CSS3によるタイポグラフィ

要素を動的に生成して使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSの疑似要素を使うと、親要素の中に動的に要素を加えて設定することができます。
講師:
07:29

字幕

このレッスンでは CSS で動的に要素を加えて その要素に対して スタイルの設定を行います 今 ブラウザで開いている html ドキュメントですが 実際にテキストを持っている要素は この下に書いてある文字だけです 上に書いてある 白い文字は 空っぽの要素に対して CSS で動的に要素を加え テキストを加え カラーやフォントの太さなどを 設定しています これを疑似要素と言い その加え方についてご説明します Dreamweaver CC で開いているのは まだ 疑似要素を加える前の html ドキュメントです body 要素を見ましょう body 要素の中には section があり そして div 要素の中に p 要素があって そこにテキストが書いてあります テキストが書いてあるのは この要素だけです では 現在 どのように見えるか ブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 背景に写真があり 左の方に黒い文字が書いてある 「 Submerge 」と書いてるだけです では ここに疑似要素を 加えていきたいと思います 疑似要素は親要素を決めて その中に加えることになります まず親要素を追加しましょう div 要素にして class を "top" とします ここに動的に要素を追加します つまり 空っぽで良いということです では Submerge という p 要素ですが こちらも div 要素で囲んでおきましょう class は bottom とします そして p 要素を含めておいて div 要素を閉じます 勿論 これだけでは何も起こりませんし 今 加えた要素は空っぽです ここに 疑似要素を加えていきます style シートの方に CSS を追加しましょう ここで top の中に 疑似要素を加えます 疑似要素は :: (コロン2つ) で始まります 古い仕様では1つでも結構です 今のブラウザは 両方に対応していると思いますが 一応 正式な使用は2つですので 2つ入れるようにしましょう 疑似クラスだと区別するためです そして before が疑似要素です 疑似要素を入れる時の キーワードになります そして 文字が何もありませんので 文字を content という プロパティで加えます ここに下にあるテキストと 全く同じ文字を加えますので これをコピーしましょう これで保存して確認してみます 「ファイル」を「保存」して 「ブラウザでプレビュー」です 同じ文字が入りました 上の方が疑似要素です では この疑似要素に 少し飾りつけをしていきましょう まず テキストのカラーです color を RGB で 定めます 白でも良いですが 少し 暗さを入れて 若干 青味をかけます ほとんどわからないと思いますが 水の上に浮かべる文字なので 少し青味をかけました 確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です 上が疑似要素だと 色で区別できます 疑似要素を初めて知ると このキーワードの意味が 気になります before があるなら after もあるんじゃないか? あります では after を付け加えましょう ここに「ペースト」です カラーが同じ色だと分かりませんので red にしましょう 中身のテキストは同じで構いません 「ファイル」を「保存」して また「ブラウザでプレビュー」します 疑似要素のキーワード before を 2つ目は after に直してから 「ファイル」を「保存」して 「ブラウザでプレビュー」します 白い方が before です 赤が after 見てお分かりの通り before は前に追加され after は後に追加されます でも 今回は1つしか使いませんので before でも after でも 構わないのですが とりあえず before を使ってみました 疑似要素の after の方は 試しましたが 要らないので 消してしまいます もう少し before の方に 飾りつけをします まず font-weight を bold (太く)します そして display プロパティで block に定めます あと もう1つだけ text-transform のプロパティで uppercase にすると 全部 大文字になります これで改めて確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 白い文字が太字になって 全部 大文字に変わりました このレッスンでは CSS で動的に疑似要素を加えました 疑似要素は親要素を決めて そこに :: で before または after の設定をして その中にテキストの内容を はじめとする 通常の CSS の設定をすれば その設定をされたテキストが表示されます

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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