CSS3によるタイポグラフィ

Modernizrのダウンロード

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Modernizrのダウンロードと設定についてご説明します。
講師:
06:27

字幕

このレッスンでは HTML5やCSS3の機能が ブラウザによって使えるか 使えないかをチェックして そのチェックに応じたコードを 書くためのJava Script ライブラリ 「Modernizr」のダウンロードと 設定について ご紹介します こちらがModernizr のサイトです ドメインはmodernizr.com ということで わかりやすいですね 但し「z」と「r」の間に 「e」がありませんので その点にご注意ください ダウンロードのボタンは2つありまして 「DEVELOPMENT」と 「PRODUCTION」 まず「PRODUCTION」のほうから 見てみましょう こんなページになっていまして チェックボックスがいっぱいありますね 自分が確かめたい 使いたい機能だけをチェックできます 例えば@font-face を使いたい background-size を使いたい 面倒に思うかもしれませんが この使いたい機能だけをセットにして Java Script ライブラリとして作ってくれます ですから必要最小限のサイズにできる ということです もっとも 最初にコードを書く時 あるいは初めて使う場合には 開発版 DEVELOPMENT の方がいいと思います 一旦戻りましょう 「DEVELOPMENT」をクリックします 同じページじゃないかと 最初は意味がわからないと思いますが チェックマークがついていますね つまり 開発にはこれだけあれば十分でしょう というチェックがあって 一部オープンになっていますので これは必要ならチェックを加える ということになります Java Script ライブラリの 作り方なんですけれども 「GENERATE」で今選んだ項目の ライブラリを作ります そして「DOWNLOAD」を クリックすればOKです 特に開発の段階で 実際の Java Script ライブラリの 中身を見たい― という時には 「Don't Minify Source」 ここにチェックをつけておくと 実際の中が コードとして きちんと見られる形でダウンロードされます その代わりサイズは少し増えます チェックをはずすとコードを短く してしまうというわけではないですが 小さくすることができます ですから実際にアップロードする時には 「Don't Minify Source」 というチェックを 外しておくとよいでしょう 今回は特にコードの中を 見るつもりはありませんので 「Don't Minify Source」は オープンにしたまま 「GENERATE」で 「DOWNLOAD」します ダウンロードされたライブラリがこれです modernizr.custom. 何か連番が付いてきます これはさすがに使いづらいので modernizr だけでいいでしょう 名前を変えてしまって構いません modernizr.js ということで このレッスンでは あるいはこのコースでは lib というフォルダの中に Java Script のライブラリを 入れることにしていますので この状態で設定を行います Modernizr を読み込んでみるための サンプル用のHTMLドキュメントを Dreamweaver CC で開きました まずscript 要素で Modernizr を読み込む必要があります ここにscript 要素で 「src(ソース)」ですね そして「参照」をクリックします 先ほど読み込んだ modernizr.js がありますので これを開きましょう そしてタグは閉じて これで読み込みはできました 読み込んだだけでModernizr は 仕事を1つしてくれます まずここに注目しておいて欲しいのですが このHTML要素 特にclassは何も定めていません 覚えておいてください ではブラウザで確認しましょう ファイルを「保存」して 「ブラウザーでプレビュー」します これがサンプル用の HTMLドキュメントの表現なんですけれども 特別 表面上は元と変わっていません けれどもここで 「要素の詳細を表示」します すると先ほど覚えておいてくださいねと 申し上げたんですけれども 細かい所は落としてしまいましょう 「HTML」この要素の中にclass が たくさん入ってますね これがModernizr が まず最初にしてくれた仕事です このclassによってこのブラウザで使える CSS3やHTML5の機能が分かるんですね ですからこのclassを頼りにして この機能が使えるかどうか確認して その機能が使えるかどうかによって CSSを書き分けるということが出来るんです これがModernizr の 非常に便利な機能です このレッスンでは HTML5やCSS3の機能が ブラウザごとに 使えるかどうかチェックしてくれる 便利なJava Script ライブラリ 「Modernizr」をご紹介しました

CSS3によるタイポグラフィ

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

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

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

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

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