CSS3によるタイポグラフィ

テキストを切り抜く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストの高さを狭めて、はみ出した部分を非表示にすると、テキストの要素が切り抜けます。
講師:
04:05

字幕

このレッスンでは 2つのテキストを上半分と下半分に 切り抜いてつなぎ合わせます 今 ブラウザで見ている html ドキュメントは 文字が半分 水の中に 沈んでいるように見えます これは ハッキリクッキリした 3D 風の文字と ぼけた文字を 半分に切って 上半分のクッキリした文字と 下半分のぼけた文字を 2つ つなぎ合わせています この様な表現の仕方について ご説明します 今 Dreamweaver CC で開いている html ドキュメントは まだ 2つのテキストが ハッキリクッキリした 3D 風と ぼけたものと それぞれ別々にある状態です body 要素の方は テキストが div 要素の中に1つあり もう1つは空の div 要素です それに関しては 疑似要素でテキストを加えて こちらはハッキリした 3D 風の 表現になっています それから div 要素の中に p 要素で加えられていた文字は ぼけた表現が適用されています 現在の状況を確認しましょう 「ファイル」から 「ブラウザでプレビュー」します 上が疑似要素で作った ハッキリした 3D 風の文字 下が p 要素の中にあった文字を ぼかした表現にしてあります これを半分に切って つなげる操作をします まず 上半分です 疑似要素のハッキリした文字 これは フォントサイズが 120 となっていますが ここに 高さを プロパティで height と加えて 70 ピクセルにします この段階で確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 見た感じ 特に変わりません 70 に縮めただけでは 文字がそのまま表示されてしまいます もう1つプロパティを加えます 高さの height プロパティを 設定した後です overflow というプロパティで hidden と設定します すると height を超えた部分は 表示されないことになります 確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 上のハッキリとした文字の方は 半分だけになりました これで 上半分ができました 下半分にする p 要素の ぼけた文字の方ですが こちらは位置を持ち上げます この font-size の後に margin-top として 一応 測ってありますので -49px 上に持ち上げると 大体良い感じになりますので 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です どうでしょうか? これで上半分が ハッキリクッキリした 3D 風の文字 下半分が水に沈んだように ぼけた文字になりました このレッスンでは 2つのテキストを含む要素を 半分に分けて くっ付ける表現について ご説明しました 上半分については 高さを制限して はみ出た部分を隠す 下半分は ピッタリ合うように 位置を合わせるという形で この表現を実現しました

CSS3によるタイポグラフィ

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

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

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

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

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