株式会社エレクアライズ|東京立川|楽天ネットショップ制作・ホームページ制作
Menu
Home / 吉永

吉永

ツナガルチップス No.13

2017年1月23日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ

CSSプロパティはこんな感じ。

background:
linear-gradient(45deg, #2f2061 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #2f2061 45px, transparent 45px,transparent 91px, #79cc2b 91px, #79cc2b 135px, transparent 135px),
linear-gradient(-45deg, #2f2061 23px, transparent 23px, transparent 68px,#2f2061 68px,#2f2061 113px,transparent 113px,transparent 158px,#2f2061 158px);
background-color:#79cc2b;
background-size: 128px 128px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

色

背景色

マーク色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.12へ
→ ツナガルチップス No.14へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.12

2017年1月16日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ

CSSプロパティはこんな感じ。

background:
linear-gradient(63deg, #2f2061 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #2f2061 78%),
linear-gradient(63deg, transparent 34%, #2f2061 38%, #2f2061 58%, transparent 62%),
#79cc2b;
background-size: 16px 48px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

色

背景色

マーク色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.11へ
→ ツナガルチップス No.13へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.11

2017年1月10日 CSS, HTML, Web , , , 2 by
あけましておめでとうございます。

本年も宜しくお願い申し上げます。

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ

CSSプロパティはこんな感じ。

background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #167acb 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #167acb 10px, rgba(96, 16, 48, 0) 11px),
#404040;
background-size: 20px 20px;

赤字の箇所が背景1の色で、緑字の箇所が背景2の色で、青字の箇所がマークの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

色

背景色1

背景色2

マーク色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.10へ
→ ツナガルチップス No.12へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.10

2016年11月2日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回もちょっと変わった背景パターンをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ

CSSプロパティはこんな感じ。

background-color: #cc6081;
background-image:
linear-gradient(115deg, transparent 75%, #ffc753 75%),
linear-gradient(245deg, transparent 75%, #ffc753 75%),
linear-gradient(115deg, transparent 75%, #ffc753 75%),
linear-gradient(245deg, transparent 75%, #ffc753 75%);
background-position: 0 0, 0 0, 10px -20px, 10px -20px;
background-size: 20px 40px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

色

背景色

マーク色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.9へ
→ ツナガルチップス No.11へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.9

2016年9月24日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回はちょっと変わった背景パターンCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ(パターン1)

パターン1のCSSプロパティはこんな感じ。

background-color: #cc6081;
background-image: radial-gradient(closest-side, transparent 98%, #ffc753 100%), radial-gradient(closest-side, transparent 98%, #ffc753 100%);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

続いてパターン2

例えばこんな感じ(パターン2)

パターン2のCSSプロパティはこんな感じ。

background-color: #ee5e97;
background-image:
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;

赤字の箇所が背景の色で、青字の箇所がマーク1の色で、緑字の箇所がマーク2の色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

柄
色

背景色

マーク1色

マーク2色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.8へ
→ ツナガルチップス No.10へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.8

2016年9月16日 CSS, HTML, Web , , , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回は背景パターンといえばの王道、ストライプやボーダーをCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ(ストライプ)

ストライプのCSSプロパティはこんな感じ。

background: repeating-linear-gradient(90deg, #920783, #920783 10px, #EB6100 0, #EB6100 20px);
赤字の箇所が背景の色で、青字の箇所が線の色です。

続いてボーダー編

例えばこんな感じ(ボーダー)

ボーダーのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(#920783, #920783 10px, #231815 0, #231815 20px);
赤字の箇所が背景の色で、青字の箇所が線の色です。

続いて斜め右ストライプ編

例えばこんな感じ(斜め右ストライプ)

斜め右ストライプのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(45deg, #DB5425, #DB5425 10px, #E5A83F 0, #E5A83F 20px);
赤字の箇所が背景の色で、青字の箇所が線の色です。

続いて斜め左ストライプ編

例えばこんな感じ(斜め左ストライプ)

斜め左ストライプのCSSプロパティはこんな感じ。
background: repeating-linear-gradient(-45deg, #955629, #955629 10px, #E60012 0, #E60012 20px);
赤字の箇所が背景の色で、青字の箇所が線の色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

柄
色

背景色

線色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.7へ
→ ツナガルチップス No.9へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.7

2016年9月10日 CSS, HTML, Web , , , , , , , , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回の記事はコチラ

これまでに文字装飾に関しては回数を重ねたこともあり、案外CSSでできることが多いんだなと分かりましたね。
今回からはテーマを少し変えて、文字の背景についての装飾手法を学んでいきましょう。
例えば水玉背景にしたり、チェック柄背景にしたり、などなどetc・・・
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ(水玉)

水玉模様のCSSプロパティはこんな感じ。

background-color:#f5f5d1;
background-image:
　radial-gradient(#ceca93 20%, transparent 20%),
　radial-gradient(#ceca93 20%, transparent 20%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
赤字の箇所が背景の色で、青字の箇所が水玉の色です。

続いてチェック柄です。

例えばこんな感じ(チェック柄)

チェック柄のCSSプロパティはこんな感じ。

background-color:#aed9e6;
background-image:
　linear-gradient(transparent 56.25%, rgba(255,255,0,.75) 56.25%, rgba(255,255,0,.75) 75%, transparent 75%),
　linear-gradient(90deg, transparent 56.25%, rgba(255,255,0,.75) 56.25%, rgba(255,255,0,.75) 75%, transparent 75%),
　linear-gradient(transparent 25%, rgba(255,255,0,.35) 25%, rgba(255,255,0,.35) 31.25%, transparent 31.25%),
　linear-gradient(90deg, transparent 25%, rgba(255,255,0,.35) 25%, rgba(255,255,0,.35) 31.25%, transparent 31.25%);
background-size: 32px 32px;
赤字の箇所が背景の色で、青字の箇所がチェック柄の色です。

今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。

柄
色

背景色

水玉色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.6へ
→ ツナガルチップス No.8へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.6

2016年9月2日 CSS, HTML, Web , , , , , , , , 2 by
こんにちは！！

エレクアライズ 制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

今まで紹介してきた手法で大分テキストを装飾するテクニックがついてきましたね。
今回はおさらいということで、今までの内容を全てごった煮のデモを用意しました。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

ランキングにランクインしました！！
文字設定項目
色
テキスト
文字の縁1設定項目
太さpx
ぼかし具合px

色
文字の縁2設定項目
太さpx
ぼかし具合px

色
文字の縁3設定項目
太さpx
ぼかし具合px

色
文字の縁4設定項目
太さpx
ぼかし具合px

色
文字の縁5設定項目
太さpx
ぼかし具合px

色
ドロップシャドー設定項目
横方向のずれpx
縦方向のずれpx
ぼかし具合px
色
ディープシャドー設定項目
太さpx
ぼかし具合px
色

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.5へ
→ ツナガルチップス No.7へ

###############################################################################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic

アンドロイダー公認デベロッパー(https://androider.jp/developer/f8d0c0800a2e980c4d497a58102c00e8/)
吉永　祐太

###############################################################################################
アンドロイダー公認デベロッパー認証




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.5

2016年8月5日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ　制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

今回のテーマはエンボス。
文字が背景から浮き出ていたり、へこんでいたりするアレですアレ。
百聞は一見にしかずというので実際に見てみましょう。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

今回も引き続き「text-shadow」というプロパティを応用します。

エンボス(浮き彫り)

例えばこんな感じ

左上と右下に影をつけて浮いている感じを演出しています。
文字で書くとこんな感じ「text-shadow: -1px -1px #ffffff, 1px 1px #333333;」

ピローエンボス(へこみ)

例えばこんな感じ

同じく左上と右下に影をつけて浮いている感じを演出しています。
文字で書くとこんな感じ「text-shadow: 1px 1px #ffffff, -1px -1px #444444;」

影の付け方で浮いたり、へこんだりして見える。
人間の目って面白いですねぇ～。

今回も動作確認用のデモパーツを用意したので遊んでみてください。

エンボス加工


浮き彫り及びへこみ具合px ← 数値入力してみて下さい

文字← 文字を入力してみて下さい

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.4へ
→ ツナガルチップス No.6へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス No.4

2016年8月1日 CSS, HTML, Web , , , 2 by
こんにちは！！

エレクアライズ　制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

前回までの内容でドロップシャドーはつけられるようになりました。
今回はディープシャドーをつけられるようにしましょう。
ディープシャドーとは文字と影の隙間がなく、文字が3Dっぽく見えるシャドーのことです。
マンガとかチラシとかでよく見るアレですアレ。
百聞は一見にしかずというので実際に見てみましょう。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

今回も引き続き「text-shadow」というプロパティを応用します。

例えばこんな感じ

今回は同時に右下に影を1ピクセルづづずらしながら隙間なく配置しております。
文字で書くとこんな感じ「text-shadow:1px 1px 0px #333333,2px 2px 0px #333333,3px 3px 0px #333333,4px 4px 0px #333333,5px 5px 0px #333333,6px 6px 0px #333333,7px 7px 0px #333333,8px 8px 0px #333333;」

赤字の箇所で影の位置を指定しています。
徐々に数値が増えていってますね。
シャドーの幅を増やしたいなら9px 9px、10px 10pxと増やしていけば良いです。

今回も動作確認用のデモパーツを用意したので遊んでみてください。

ディープシャドー

影の太さpx ← 数値入力してみて下さい
ぼかし具合px ← 数値入力してみて下さい

影の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

文字← 文字を入力してみて下さい

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.3へ
→ ツナガルチップス No.5へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

Older Entries
Newer Entries