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

「Font Awesome」の基本的な使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Font Awesome」の基本的な使い方について、ご紹介致します。
講師:
05:08

字幕

このレッスンでは フォントオーサムの 基本的な使い方についてご紹介していきます まずはダウンロードしてきたこちらの font-awesome-basic ― というフォルダの中に入っている こちらの index.html ファイルと― こちらの style.css ファイルを エディタで開いてください そして これがそれらのファイルを 開いた状態です そして こちら側のブラウザで表示されている 物は こちらの index.html を― ブラウザで表示させたものとなっています これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは前回までのレッスンのおさらいです 前回のレッスンでは フォントオーサムの 利用の準備ということで― フォントオーサムからファイルを ダウンロードしてきて そして― index.html ファイルと style.css と同じフォルダの中に― そのダウンロードしてきた ファイルを設置しました そして こちらのヘッド (header) タグの間にフォントオーサムの― ウェブサイトからコピーしてきたこちらの リンクタグをペーストしましたね 今回は実際にフォントオーサムの アイコンフォントを利用する方法について― みていきたいと思います まずはこちらの index.html ファイルのこの部分をご覧下さい この部分がフォントオーサムの アイコンフォントを利用する為の― タグとなっています このように i というフォントオーサム 専用の HTML タグを利用しています そして その中にクラスが付いていますね クラスの中には fa というクラスと fa-globe ― というクラスが付いています この先頭についている fa は 固定の値となっていて― その後に続く fa-globe というのが アイコンの種類を指しています 今回は地球アイコンを指していますね このように書く事でこちらの i タグの 部分が実際のフォントアイコンに― さしかわってブラウザ上で 表示されてくることになります それがこちらの部分ですね このように地球アイコンというテキストの隣に このように地球のアイコンが― 表示されているのが分かります この i の部分がアイコンに 置き換わっていますね これがフォントオーサムの 基本的な使い方となります 因みに このフォントオーサムで 表示されてくるフォントアイコンは― CSS で見栄えを調節する事も可能です それを行っているのがこちらの部分ですね そして こちらの部分をブラウザで 表示させたのがこちらの部分です このように色が青に変わっていますね この部分はこちらの style.css の方で color: blue ― という形で定義しています その為にこちらのフォントオーサムの アイコンも青に変わっているわけですね 更に こちらのアイコンのサイズも 変えることができます それはこのように font-size を 指定してあげることで変えることが出来ます この font-size でサイズを 変更する際には― 先程の i タグに直接 font-size を指定するのではなくて その i タグの親要素となる 今回ですと div タグですね その div タグに対してフォントサイズを 指定してあげるようにしましょう それでは 一度 index.html の方に戻ります そして 更に注目して頂きたい部分が こちらの部分となります こちらの部分は先程 CSS の中で 指定したフォントサイズを基準として― こちらのフォントアイコンのサイズを 調整するものとなっています fa-lg というものから始まって 最大 fa-5x というまでのサイズ指定が― できるようになっています これを指定してあげることによって 先程 CSS の方で設定していた― フォントサイズ 30 ピクセルを 基準としてこちらのアイコンのサイズを― 相対的に上げていくことができます このように見て分かるとおり 地球のアイコンだけが大きくなっていて― こちらの地球アイコンという テキストに関しては フォントサイズ― 30 ピクセルのままと なっているのが分かります このようにフォントオーサムで利用できる フォントアイコンは CSS で― 簡単に見栄えを調節することも 可能になっていますので― とても便利ですね この他にもフォントオーサムでは 複数のアイコンを― 重ねて表示させることができたり アイコンに 回転をさせるアニメーションを加えたり― といった機能も搭載されていますので 合わせてウェブサイト上で― 確認してみるのも良いでしょう 以上でレッスンは終了です 今回はフォントオーサムの基本的な 使い方についてご紹介致しました 以降のレッスンでは このフォントオーサムで― SNS アイコンを作成する方法について ご紹介していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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