CSS3によるタイポグラフィ

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

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

ぜひご覧ください。

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

字幕

このレッスンではチャプター全体を通じて どのような作例をつくるのか そしてその際どういったCSSの項目あるいは 設定について学ぶのかということについて 簡単にご説明します 今ブラウザーで開いているこのページが 作例です 同じような表現が2つありますが 右側は画像です けれど左側はこれはtextなんですよね テキストに対してCSSで この画像と同じような設定を加えています ではこの画像はどこから取って来たかというと 本のカーバー表示です 本の表紙ばかりを 沢山紹介しているサイトがあります Googleで検索するのでしたが bookcover designで探せると思います この一番トップにあるThe Book cover Archive というのがそのサイトです ドメインは全部繋げてBookcoverArchive.comと なっています 先ほどのように検索したほうが 簡単かと思いますが これ今 本のカバーばかりが ずーとあるのですけれども これが1ページ目です 1から75 351まであるそうですけど next page きりがないので 先ほどのサンプル参考にした Book cover というのは ページでいうと今2ページ目ですけれども 17ページにあることを調べてあります この「Competition」というのがそうですね 2008年6月24日の出版だそうです James Caseという方の著作 実際に売っている本です アマゾンでちゃんと扱ってまして 現在でも購入できそうですね これを参考にしています Dreamweaver CCでこのHTMLドキュメントを 開きました 上の方のCSS設定は飛ばしておいて ボディ要素の中を見てみましょう ボディ要素の中はこれだけです セクションの要素があり div要素があり その中にp要素として3つだけ 著者名とタイトルと それから説明が書いてあります そしてこのイメージ imgの要素というのは 先ほど参考にした画像です COMPETITIONという文字はあくまで 一単語で入れてあります それを jQuery のプラグインを使って バラバラに切り分けて 細かく1つ1つの文字の設定を行っています もう一度ブラウザーで見てみましょう 文字をツールでバラバラに切り分けた後 上下左右の位置を細かく調節します まず似たファントを使わなくてはなりません これは苦労したところだと思うんですけど 似たファントが しかも 無料のウェブフォントがありましたので それを使っています それを1文字のCOMPETITIONという単語を ツールで1文字ずつに切り分けて 上下左右の位置調節をし そして重ね順もこれは変えています 右側の画像と 同じような重ね順になるようにして 陰の付き方も 方向やぼける度合いといったものを 細かく調整した結果 かなり似通ったものになりました これをチャプター全体を通して 作ってみたいと思います このレッスンではチャプター全体を通して 作る作例 それからその作例を作る時の CSSの設定のポイントについてご紹介しました

CSS3によるタイポグラフィ

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

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

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

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

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