WebデザイナーのためのCSS3実践講座

影の効果を組み合わせた表現

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「text_shadow」を組み合わせて、テキストに複数の陰影の効果を付けて、様々な見せ方を作成する方法について解説致します。
講師:
07:05

字幕

このレッスンでは テキストシャドーを 組み合わせて テキストに― 複数の陰影の効果を付けて様々な見せ方を 作成する方法について解説致します まずはダウンロードしてきたこちらの text-effects ― というフォルダーの中に入っている この index.html ファイルと― style.css ファイルを エディッターで開いて下さい そして これがそられのファイルを 開いた状態です そして こちらのブラウザの方には この index.html ファイルを― ブラウザで表示させた状態となっています これらのファイルを使って 今回の レッスンの解説を進めていきます それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルをみていきましょう まず こちらの部分で Google Fonts から― Alfa Slab One という フォントを取り込んでいます そして こちらのボディータグの中には p タグで囲まれた四つの文がありますね それぞれの p タグにはそれぞれ スタイル A スタイル B スタイル C― スタイル D といったクラスが付いています これらそれぞれのクラスに対して こちらの style.css の方で― スタイルを定義しています そして こちらの四つの文に該当するのは こちらのブラウザのこの四つの文― になるわけですね ご覧の通り それぞれ四つの文章がそれぞれ 異なる表示のされ方をしていますね それでは これらのテキストの表現が どのように CSS で作られているのか― 確認してみたいと思います では style.css の方を 開いてみましょう まず こちらのボディータグで font family で― Google Fonts から取り込んだ Alfa Slab One を― 指定していますね そして その下でフォントカーニングを 指定しています それでは まず こちらの p クラス スタイル A の部分を見てみましょう こちらの部分はこちらの部分に該当する スタイルとなっています まず この部分では 文字色を白に 設定して そして テキストシャドーで― 影を作成しています 横方向 1 ピクセル 縦方向 1 ピクセル そして ぼかしの範囲を 1 ピクセル― そして この後の rgba 括弧 括弧 ですが これは文字色を表します 一番最後の 0.5 というのが 透過率を表すものとなっていて― この場合 半透明の黒を表しています そして バックグラウンドカラーを #ccc として灰色に設定していますね このようにすることでこういった ドロップシャドーの表現をする事が可能です 少しだけ立体感を持った文字にも見えますね それでは 次に こちらのスタイル B の方を見てみましょう こちらに該当するのが こちらの部分となりますね ご覧の通り 3D を 表現しているものになります こちらの部分では どのようにやっているかと言うと― まず 文字色を白色にしています そして テキストシャドーでこのように ずらっと書いていますね このようにテキストシャドー プロパーティーには複数の値を同時に― 設定する事ができるようになっています 複数指定する場合にはこのようにカンマで 区切っていきます それでは この部分でどのように 3D を表現しているかと言うと― このように文字の右斜め下に対して 1 ピクセル増やしながら 且つ 影の色を― 白から順番に黒くしていっています このようにすることで合計 いち に さん し ご ろく なな 八個の影を― 1 ピクセルずつずらしながら 且つ 白から黒に徐々に色を変えながら― 描画しているわけですね このようにすることで 3D を表現しています そして 最後にバックグラウンドカラー ということで青色に設定しています このようにすることでこういった テキストの表現が可能になる訳ですね それでは 次に こちらのスタイル C の方を― 見ていきましょう こちらのスタイル C では レタープレスを表現しています ブラウザですと こちらの部分になりますね このように文字が押し込まれた 表現となっています この表現をどのように作るかと言うと このように作っています まず 文字の色を灰色に設定して そして テキストシャドーで― 二つの影を組み合わせています まず こちらの部分で文字から 右斜め下に向かって― 1 ピクセルの白色の影を追加しています そして 次に こちらの部分で文字の 左斜め上に対して灰色の影を設定しています そして 最後にバックグラウンドカラー #ccc で灰色の背景を用意しています このようにすることでこういった レタープレスの表現が可能になる訳ですね そして 最後にこちらのスタイル D の部分を見てみましょう こちらのスタイル D では アウトラインの表現を行っています ブラウザで見ると このような形ですね 文字の輪郭をかたどったような 形になっています これを表現するには まず 文字の色を fff 要するに白色に設定して― 背景色と合わせています そして テキストシャドーを使って 四つの影を組み合わせています これはこの文字に対する左上 右上 右下 左下に対してそれぞれ― 1 ピクセルずつ赤い影を 置いているような状態となります こうすることでこういった文字の アウトラインをかたどった表現をする事が― できるわけです この様にテキストシャドーという プロパーティーをうまく使えば― 様々なテキストの表現を する事が可能となります 以上でレッスンは終了です 今回はテキストシャドーを組み合わせて テキストに複数の陰影の効果を付けて― 様々な見せ方を作成する 方法について解説いたしました 以降のレッスンからは 文字ではなく アイコン代わり振られたフォントファイル― いわゆるアイコンフォントを使って ウエブサイト上でアイコンを― 表示させる方法について解説致しますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。