WebデザイナーのためのCSS3実践講座

Webフォントと「@font_face」

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3の新機能であるWebフォントと、それを扱う為の「@font_face」ついてご紹介致します。
講師:
04:04

字幕

このレッスンでは CSS3 の 新機能である Web フォントと― それを扱う為の@font-face についてご紹介していきます まずは Web フォントの方から みていきましょう Web フォントというのは 簡単に言うと フォントファイルをサーバー上に設置して― そのフォントファイルを読み込むことによって ウェブサイト上で利用できる機能となります それでは Web フォントが出てくるまでの フォントの扱い方がどうであったか― 確認してみたいと思います Web フォント機能が出てくるまでの ウェブサイト上でのフォントの表示はー 閲覧者がインストールしている フォントである必要がありました そして 共通するフォントが少ない為に ウインドーズやマックでの― ウエブサイトの表示でフォントの見栄えが 変化してしまいました そして 統一したフォントを表示させる為には 画像で作成する必要がありました これは SEO 的にも 良くないものとされていました それでは 次に Web フォントの登場で どのように変化するのか― 見てみたいと思います まず Web フォントとは フォントファイルをサーバー上に置いて― 利用する為の機能となります そして サイトの閲覧環境 要するに ユーザーがインストールしている― フォントの種類や ウインドーズやマック等といった― OS に依存せずに 統一した フォントの表示が可能になります そして フォントの見栄えを統一するために 画像でテキストを作成する必要が無くなるので― SEO にも有効となります 更に Web フォントを提供する ホスティングサービスが― 続々と増えてきています その為 Web フォントを 利用するための仕切りがどんどんと― 低くなってきており 利用できる フォントの種類もかなり増えてきています このように Web フォントは 多くのメリットをもたらしてくれますが― 何点か注意事項もあります 例えば その中の一つにこういった 注意事項があります 但し フォントファイルの読み込みに 時間が掛かる場合もあります 要するに サーバー上に設置した フォントファイルをロードする為に― 少し待ち時間が発生してしまう という形になります ですので Web フォントを利用する際には 定則なインターネット回線でもストレス無く― 表示できるよう注意を払う必要があります さて ここまでご紹介してきた この Web フォントですが― この Web フォントは CSS3 で 新しく追加された機能でもって― 初めて利用できるようになりました その新機能がこちらの @font-face というものになります この @font-face というものは 先程も言いましたとおり― CSS3 の新機能で Web フォントを サイト上で利用可能にする機能となっています 利用する Web フォントを CSS の中で定義して利用する形となります 但し フォントによっては ライセンスで サーバー上にそのファイルを設置する事自体― 禁止されている場合もありますので Web フォントを利用する際には― そのフォントファイルのライセンスを 必ず確認するようにしてください 以上でレッスンは終了です 今回は CSS3 の新機能である Web フォントと それを扱う為の― @font-face について ご紹介しました 以降のレッスンでは Web フォントの ホスティングサービスの一つで― Google が提供している Google Fonts のご紹介と― 使い方について解説していきますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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