CSS3によるタイポグラフィ

このチャプターで何をつくるのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターでつくる内容と学習するCSS3の項目について簡単にご紹介します。
講師:
02:04

字幕

このレッスンでは チャプターを通して どのような作例を作るのか また CSSでどういった設定を行うのか といったことを 簡単に かいつまんでご説明することにします 先にHTMLドキュメントの方から 見ておきましょう Dreamweaver CCで HTMLドキュメントを開きました body要素にテキストが p要素 hotrodというクラスの中に 収められています テキストはこのクラスと全く同じ hotrodですね そして このクラスの セレクタから見て勘づくように この中で様々な設定を行っているわけです では改めてブラウザーで見てみましょう 「ブラウザーでプレビュー」です テキストをまず 1つ1つ 要素に分けなければなりません その上で1つ1つのテキストに 背景を付け 背景はグラデーションになっています 家が赤で 下が茶色 そしてアウトラインも付いていますね さらに よく見ないとちょっと 分かりにくいかもしれませんが テキストと背景には影が付いています これは拡大して見ましょう ショートカットはcommand もしくはCtrl "+"ということですので 続けざまにショートカットで拡大します そうすると影がもうちょっと 分かりやすくなりますね 文字のほうは左上に 少しシャープな影になっています 影は黒です 背景は左下の方に少しうっすらと幅広く 影が付いているということです そしてさらに1つ1つの文字が 全体に傾いていますね これもやはりCSSの設定です このレッスンでは チャプター全体を通して作る作例と その中で設定するCSSのポイントについて 概略をご説明しました

CSS3によるタイポグラフィ

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

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

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

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

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