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

「Font Awesome」でSNSアイコンを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Font Awesome」を使って、SNSアイコンを作成する方法について、ご紹介致します。
講師:
04:00

字幕

このレッスンでは フォントオーサムを使って SNS アイコンを作成する方法について― ご紹介致します まずはダウンロードしてきたこちらの sns-icons ― というフォルダの中に入っているこちらの index.html ファイルと― style.css を エディタで開いて下さい そして これがそれらのファイルを開いた状態です そして こちらのブラウザの部分で 表示されているのが― こちらの index.html ファイルを ブラウザで表示させたものとなっています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう フォントオーサムのフォントアイコンには 予め主要な SNS のアイコンが― 登録されています 今回はその中でもフェイスブック ツイッター グーグルプラスを― 取り上げてみたいと思います まずはこちらの index.html の方をみてみましょう こちらの部分にある div タグに囲まれた i タグがそれぞれ上からフェイスブック― そして ツイッター そして グーグルプラス のアイコンとなっています そして それぞれの i タグにはそれぞれの アイコンを指し示すクラス 例えば フェイスブックでしたら fa-facebook-square とか ツイッターですと こちらのように fa-twitter そして グーグルプラスであれば このように fa-google-plus-square といった形で指定しています それでは こういったフォントアイコンの 探し方についてみてみたいと思います それでは フォントオーサムの ウェブサイトを表示してみましょう こちらがフォントオーサムの ウェブサイトですね こちらの上部のメニューの Icons を クリックすることによって― アイコン一覧のページが表示されてきます このような形ですね 例えば 使いたいアイコンがある時― こちらの Search icons と 書かれた入力フォームから― その探したいアイコンを 検索することもできます 例えば ここで twitter と 検索してみましょうか twitter ですね このようにすることでこのように 該当するアイコンが表示されてきます 例えば facebook 等も このように出てきますね このように出てきたら 使いたいアイコンを クリックしてアイコンの詳細ページに入ります そして このページの下の方 こちらの部分ですね こちらの部分を見ると このように 指定するクラスの記載がありますので― それを i タグの中に 書いてあげれば OK です それでは エディタに戻ります そうして それぞれにクラスを指定した i タグはこのようにブラウザ上で見ると― フェイスブックアイコン ツイッターアイコン そして グーグルプラスアイコンに― 変換されて表示されてくるわけですね ただ そのまま表示してきただけでは このようにそれぞれの SNS に応じた― 色が表示されてくるわけではありませんので この部分を CSS で調整してあげましょう それでは こちらの style.css の方を開きます そして こちらの部分ですね こちらの部分でそれぞれの SNS の色を設定してあげています このようにすることでこちらのように SNS のアイコンをフォントアイコンで― 表現することができました 以上でレッスンは終了です 今回はフォントオーサムで SNS アイコンを作成する方法について― ご紹介致しました 以降のレッスンでは フォントオーサムで 簡単なダウンロードボタンを― 作る方法について解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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