CSS3によるタイポグラフィ

テキストの配置と背景を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ひと文字ずつに切り分けたテキストの間隔や配置、背景色などを定めます。
講師:
06:31

字幕

このレッスンでは1つの単語を 文字ごとに分けて その「間隔」や「配置」あるいは「背景色」 などを設定したいと思います 今ブラウザで開いている このHTML ドキュメント 「HOTROD」というのは これは1単語なんですけれども それをツールで切り分けて それぞれに対して― 「間隔」や「背景の色」や「角の丸の形」 などを設定してあります このような設定を行ってみましょう Dreamweaver CC で開いた HTML ドキュメントは まだ文字ごとのCSS の スタイル設定は行っていません けれども文字で切り分ける ところまでは出来ています どうしているかというと jQuery のプラグイン Lettering.js を使って jQuery の Java Script コーディングですが document を 読み込み終わったところで 「hotrod」というclass を与えた その中のテキストに対して 「lettering」というメソッドを 呼び出しています これでそのテキストがspan 要素に バラバラに切り分けられます ではこの「hotrod」 どこにあるかというと ボディの中にはp 要素が 1つしかありません そしてそこに「hotrod」という class が定められていて テキストはそのまま「hotrod」です これがバラバラのspan 要素に 切り分けられています では今の状況を まず 確認しておくことにしましょう ファイルから 「ブラウザーでプレビュー」します 文字は「HOTROD」と白で置いてあります これは1単語です 今のところバラバラになっているようには 見えませんけれども では要素の詳細を見てみましょう 「要素の詳細を表示」 そうするとp 要素が 1個だけだったはずなんですけれども その個要素としてspan 要素が class char1から6までの 連番の名前が与えられて そして文字が1文字ずつ 分けられていることが分かります ですからこの文字1つ1つに対して 設定をすることが出来る訳ですね 文字ごとに異なった設定をしたければ このclass が使えますし あるいはspan 要素に設定しても span 要素として1つ1つに対して 同じ設定が適用されることになります では早速Dreamweaver CC に戻って その設定を行ってみましょう 今回は文字に切り分けたspan 要素 それぞれについて CSS の設定をするんですが その設定の内容は同じにします ということなので class hotrod のspan 要素に対して 同じ設定を文字ごとに span 要素ごとに加える― という形にしていきます では早速その文字ごとの設定ですね 文字1つ1つに対する設定を 加えていきましょう まず「幅」と「高さ」から 「width」で120pxとします 次は高さですね 「hight」は150px これでファイルを一旦保存して 確かめてみましょう ファイルを「保存」して 「ブラウザーでプレビュー」です さっきと全く変わっていませんね これはdisplay プロパティの設定も 合わせて変えてあげる必要がありますので もう一度Dreamweaver CC の方に 戻ります class hotrod の セレクタspan 要素ですね これに対してdisplay プロパティを 「inline-block」にします ここで一旦確認しておきましょうか ファイルを「保存」して また「ブラウザーでプレビュー」をします 今度は間隔が空きましたね そうしたら今度は 背景とかその背景の角丸とか その当たりの設定を順に加えていきます 今回の作業はすべてこの スぺクタに対して行います ではバックグラウンドカラーから決めましょう 「background-color」ですね そして赤にしましょう さらに角丸も加えたいと思います ではこの後に「border-radius」 ですね 「角丸」は ボーダーの角の丸みということで 40px を与えます この後でまたもう1度確認します ファイルを「保存」して 「ブラウザーでプレビュー」です 角丸になりましたね けれどもくっついていますので 少し間隔を広げたいと思います border-radius に続けて 今度は「padding-top」です 上に少しpadding を加えます 40px それから間隔の方も広げましょう ということで 「margin-right」ですね これを20px ほど 加えてみましょう では一旦また「保存」をして 確認します 「ブラウザーでプレビュー」です 少し上にpaddingが加わって 間隔が拡がって 1文字ずつの設定になりました このレッスンではjQuery のプラグイン Lettering.js を使って 目的のclass の要素を1文字ずつ バラバラにspan 要素に分け そしてそのclass の span 要素に分かれたセレクタに対して 個別の設定を加えて 文字の間隔や背景色などを設定しました

CSS3によるタイポグラフィ

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

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

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

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

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