HTML&CSSでWebサイトを作ってみよう!

アイコンフォントを使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アイコンフォントは柔軟で応用の効く技術です。メリットとデメリットを学んでみましょう。
講師:
06:29

字幕

このレッスンでは CSS によるアイコンフォントの設定を学んでみましょう。まず final のフォルダーの中にあるindex.html をブラウザで開きます。すると「お問い合わせ」や「サイトマップ」の左にアイコンが出ているのが分かるかと思います。実はこのアイコンは画像いわゆる JPEG やPNG ではなくてフォントのファイルになっています。つまりこういった選択のできるプレーンテキストと同じような扱いになっています。なので、フォントサイズなどで拡大も可能ですしカラープロパティで色も変えることもできますしCSS3 を使ってシャドウを付けることも可能です。こちらのフッターの左にある矢印もアイコンフォントで設定されています。ではこのアイコンフォントを設定するためにまず begin のフォルダーをSublime Text で開きたいと思いますのでbegin フォルダーごと Sublime Text に落として開きます。そして index.html を開いておきます。それではブラウザに戻って検索をしてみましょう。検索は font と打った後に awesomeという風に打って検索しましょう。そしてこちらの Font Awesome というリンクをクリックします。 クリックしたらこちらが開発元のサイトです。それでは Get Started というリンクがあるのでこちらをクリックしましょう。そしてこちらの CDN を使っていきます。CDN は コンテンツのデリバリーネットワークと言って人気のあるリソースをインターネット上からダウンロードして使ってもいいよ、というネットワークです。ということで、こちらの一行をまずコピーをとっておきます。そして Sublime Text に戻ってペーストするのはこの style.css の下の行になります。こちらにペーストをします。これは長い URL に見えますが最後の方を見ると font awesome.css です。つまりこれも CSS を呼び出しているのでリンクが長くても CSS の扱いとしてリンクタグを使っているという訳です。そしてこのまま / という状態ですとインターネット上のサーバーに上げれば反映されるのですがローカル上では反映されませんのでhttp: と打って絶対リンクとしてネット上から引っ張ってくるようにしておきます。そうしたら、今度はアイコンを呼び出す記述を「お問い合わせ」の前にしていきたいと思います。 まず I タグを打って半角スペースそしてクラス属性でアイコンの種類を設定できます。class =fa とまずクラスをつけて、その後にfa-comment というクラス名を付けてI タグを閉じてI の終了タグを記述します。そして半角スペースを打っておきます。そしてこの I のタグのセットをコピーしてサイトマップの頭に挿入をして今度はアイコンのスペルを(綴りは) comment でしたね。commentそして comment を消してfa-sitemap と入力します。この comment や sitemap という単語が実はアイコンをネット上から呼び出す為の予め指定されているクラス名になります。必ずスペルを確認するようにしましょう。そして上書き保存をします。そうしましたら右クリックからOpen in Browser で確認してみましょう。すると、このようにcomment と書いた所にはこういった吹き出しのアイコンが「サイトマップ」は sitemap のアイコンが出ています。もう一度 Font Awesome のサイトの一番上までスクロールしてIcons というメニューをクリックしてみましょう。 クリックすると、このようにアイコンのリストが出てきます。実は「fa- なになに」と入力するとここにある全てのアイコンを使用することが可能です。例えば Directional という所は矢印関係のアイコンに特化したリストが並んでいます。ここからフッターに使う頭にくっつける矢印のアイコンを設定したいと思います。では Sublime Text に戻りましょう。そしてフッターまでスクロールします。そしてこちらの HOME という所を見つけましょう。見つけましたら、その頭にI のタグを打って classそして属性を設定しますのでclass fa半角スペース fa-angle-rightそして属性を閉じてI のタグの開始を閉じてそして終了タグを / I と記述をして閉じておきます。このように1個作りました。あとはこのセットをコピーして他の方の文字の頭に入れていけばいいだけですね。それではペーストしていきます。「サービス」とこのように各ナビの頭にペーストで入れておきます。そして上書き保存をしてブラウザにフォーカスして更新をしてみましょう。そうすると、このように矢印のアイコンが入ったかと思います。このように非常に応用が利く技術ですので積極的にアイコンフォントを使っていきましょう。 このレッスンではアイコンフォントについて学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

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

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

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

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