CSS3によるタイポグラフィ

テキストを切り抜いて位置調整をする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
切り抜いた下半分のテキストを、上半分のテキストに合わせて配置します。
講師:
07:12

字幕

このレッスンでは テキストを含んだ要素 2つを切り抜いて 位置合わせをするやり方を ご説明します ブラウザで開いている html ドキュメントは テキストが半分 水に沈んだように見えます これは 実は 2つのテキストです 上半分のハッキリとした 3D 風と 下半分の ぼけた水に沈んだような 表現の テキスト2つを切り分けて 位置を調整することによって 1つのテキストの様に見せています この調整をしてみましょう Dreamweaver CC で開いた html ドキュメントです これは上半分のハッキリとした 3D 風の文字については 既に切り抜きが行われています それは この div 要素からです 疑似要素でテキストを追加して その高さや はみ出た部分の 表示を調整することで 半分に切ることが出来ています けれど 下半分のテキストは それはこちらの div 要素です p 要素の中に文字があり これを lettering.js で jQuery の JavaScript コードを使って 一文字ずつ lettering() という メソッドで切り分けています それに対して それぞれ回転などを加えてありますが まだ 切り抜きはされていません 現在の状況を確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」です 上半分の 3D 風の ハッキリしたテキストは 上半分だけに切り抜かれていますが 下半分の個別に Z 軸で 時計回りに回転しているものの 上半分が見えています つまり 切り抜きがされていません この 切り抜きと上のテキストが ピッタリ合うような微調整が必要です まず 下のテキストを半分切り抜きます そのためには div 要素に対して セレクターを設定し ここに記述します まず 高さ( height )です これは 120px とします この 120px と言うのは font-size と同じです そして 高さに対して はみ出た部分 overflow です そこは隠します あと パディング( padding )は 調整がしやすいように 0 (ゼロ)にしておきます これで確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 下半分が切り抜かれましたが 位置が合っていません この位置調整を次に行います 下半分のテキストは p 要素です div 要素のクラス bottom に 含まれています ですから この bottom に対して 位置調整を行います top の後に bottom と入力します そして まず position これを relative として 更に 上に持ち上げるわけですから top の位置を -50px とします 本当にちゃんと位置があったか 分かりやすいように 上のテキストのカラーを もっと分かりやすく 白ではなく RGBa で 黒の半透明にします 薄くしちゃいます 0.2 と 後は立体的に見せるための text-shadow も 一旦 外しておきましょう 位置の関係を見やすくします これで一旦 「ファイル」を「保存」して 「ブラウザでプレビュー」です 位置はどうやら 合っているみたいです でも 今度は Y 軸で時計回りに 回っているのは少しおかしいので これを X 軸で― 水平軸で 前後に 回転させようと思います 先に上のテキストは 元に戻しておきましょう 元のほぼ白のカラーに戻して text-shadow も復活させます 回転はここで行っていますので Z 軸で回転するのではなくて X 軸とします これで仕上げになりました 結果を見てみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 位置はピッタリ合っているようです そして X 軸 水平軸で 前後に回転したので 丈が縮んで見えます 回転してるように見えないかもしれませんが とりあえずはこれで完成です このレッスンでは 下のぼけたテキストの 下半分を切り抜いて 位置調整をする手順について ご紹介しました そのためにはまず 切り抜きは 高さを制限して はみ出た部分を隠す それから位置を調整するために 下半分のテキストの クラス bottom を 上に引き上げました

CSS3によるタイポグラフィ

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

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

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

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

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