CSS3によるタイポグラフィ

重ね順を操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
z-indexプロパティを使って、要素の重ね順を操作します。
講師:
08:24

字幕

このレッスンでは 要素の重ね順を操作してみます 今ブラウザーで開いているHTMLドキュメント 左側がCSSで操作しているテキスト "COMPETITION"という文字があります 右側は画像なんですが 通常テキストは これは"COMPETITION"という1つの単語を span要素で文字ごとに分けているんですが デフォルトでは初めの文字"C"が一番奥 そして一番最後の文字"N"が 一番手前にくるはずです それを右のこの画像に合わせて 重ね順を調整しています そのプロパティと設定の仕方について ご説明します 今Dreamweaver CCで開いている HTMLドキュメントは jqueryのプラグインlettering.jsで ”COMPETITON”という文字 stackというクラスが付けられているのですが それを文字ごとに切り分けて 切り分けた文字には char1から 全部で11文字ありますので char11までのクラスが 自動的に設定されています それに対して影や位置揃えといった 設定はしているんですけれども まだ重ね順については何も手を加えていません この状態で現在のドキュメントが どのように表示されるかを確認してみましょう 「ファイル」から 「ブラウザーでプレビュー」です これがデフォルトの重ね順ですね "C"が一番奥で"OM" さらにその上に"PETI" "TION" "N"が一番手前です 右の画像 これが目標なんですけれども 比べてみると重ね順が明らかに違います この画像と同じ重ね順に してみたいと思います "COMPETITION"の最初の文字 まず"C"について設定してみましょう "C"は一番奥でした これを手前に持ってきたいと思います "C"はchar1というクラスですね ではプロパティを設定します 使うプロパティはz-indexで ここにはautoというのが デフォルトなんですが つまり何の設定もしていない デフォルト状態なんですけれども 整数を定めることができます 通常は0以上の正の整数を使います だからと言って何も 連番にしなければいけないことはなく いきなり100としても結構です ではこれで確認してみましょう 数字が大きいほど手前に来ます では一旦ファイルは保存して そしてブラウザーでプレビューします 今まで一番奥にいた"C"が 一番手前に来ました これが重ね順100なんですけれども もちろん100にする必要はありません 一番手前にしたければ11ぐらいを 使えばいいんでしょうけれども とにかく一番手前に来たことが お分かりいただけるでしょう "O"の方に"C"の影が付いています ではもういくつか設定を変えてみましょう 先ほどご説明しました通り 数字は何も連番にする必要はありません 逆に11文字できっちり連番にすると 後で文字が加わったり 順番を入れ替えたいといった時に 他の文字のz-indexも 変えないといけなくなりますね ですから少し間を空けておいた方が 通常はわかりやすいのですけれども このレッスンでは後で結果を見て どの順番に文字が並んでいるのかわかるように きっちり連番にします というこで char1については これを4番にします 0からスタートしますので 5番目ということになりますけれども char2に コピーします そしてこちらは1個奥です 数字が小さいと遠くになりますので3番 さらに3ですね char3 こちらは少し手前の方に持ってきます 9番 10まである番号のうち9ですから 手前から2番目ですね そしてもう1個ぐらい設定しましょう char4 こちらは5番目と だいたい真ん中ですね char4というのは "COMPETITION"のうちの"P"になります ですから"COMP"までの設定をしました ファイルを保存して確認しましょう ブラウザーでプレビューします "COMP"まで右の画像と同じように 見える重ね順になりましたね "O"が奥に行っています "M"は今の所手前に来ているので あとの文字を設定しないと 重ね順が正しいかどうか確かめられませんが あとの文字も順に設定していきましょう では続けて char4からプロパティの設定を char5にコピーして そしてchar5の順番は 2ですからかなり奥ですね そしてさらにコピーをして 6の順番は これは"P"になるのですけれども 10番 一番手前です そしてchar7にコピーして 7は"I"になりますが 8です そしてもう1個ぐらい設定して また中間で確認しましょう char8 こちらは"T"になります "T"は2つありますが これは6番目ということで この辺りで1回確認しておきましょう ファイルを保存して ブラウザーでプレビューです COMPETIまで 設定しました 今度は2行目の方も確認してみましょう 2行目"P"が"C"より手前 "O"のさらに奥に"E"がありますね "T"がかなり手前です "I"が奥に行って "P"の手前に"T"が来ています あと3つですね では残りを続けて設定しましょう ではchar8のプロパティの設定を また同様にコピーして これは最後から3つ目の"I"ですね こちらは7番目とします またコピーをして あと2つですね コピーをして これは"O"ですね "O"は1番 かなり奥です そして最後 最後の"N"ですね "N"は0番 つまり一番奥ということになります これで保存をして 確かめましょう ブラウザーでプレビューします "COMPETITION" どうでしょうか? 特に最後の行ですね "T"より"I"が手前に来て "O"がかなり後ろ そして一番奥に"N"ということで 重ね順が右の画像と似た感じ 全く同じになりましたね このレッスンでは 整数を与えて重ね順を管理する 要素の重ね順を管理するためのプロパティ z-indexについてご説明しました

CSS3によるタイポグラフィ

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

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

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

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

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