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

「Font Awesome」でダウンロードボタンを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Font Awesome」を使って、簡単なダウンロードボタンを作る方法について、ご紹介致します。
講師:
03:58

字幕

このレッスンでは フォントオーサムを使って 簡単なダウンロードボタンを― 作る方法について解説していきます まずはダウンロードしてきた こちらの download-button― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそられのファイルを 開いた状態です そして こちらのブラウザの部分には こちらの index.html ファイルを― こちらのブラウザに表示させた 状態となっています これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは index.html ファイルの方からみていきましょう 今回は二つのダウンロードボタンを 作成しています まずはこちらの部分ですね こちらの部分はこの部分 そして― こちらの部分はこの部分となっています どちらのボタンに関しても基本的な HTML の書き方は一緒です ただ一点違うのがこちらのクラスですね 上の方は download-01 そして 下の方には download-02 ― というクラスを付けています 後はフォントオーサムの専用の HTML タグ i を書いて その中に― ダウンロードボタンを表す こちら fa-download ― というのを付けていますね こうすることによって今 表示されている このアイコンが表示されてくる形になります そして 今回はその後に fa-lg というものを付けています この fa-lg はアイコンの サイズを調整するもので― こちらの親要素である p タグに 設定されているフォントサイズを基準として― こちらのアイコンのサイズを少しだけ 大きくしているといった状態になります ですので こちらを見て頂ければ分かるとおり こちらの download と書いてある― テキストよりも若干こちらのアイコンの方が サイズが大きいことが分かります そして ここまで html タグが書けたら 今度はそれぞれのクラス― download-01 と download-02 に対して― CSS でスタイルを適用してあげます それでは style.css ファイルを見てみましょう そして こちらの p.download-01 というのが― こちらのボタンに対するスタイルですね そして こちらの p.download-02 というのが― こちらのボタンに対する スタイルの指定となっています こちらの download-01 の方は とてもシンプルなボタンとなっていますね こちらの部分は特に 特別なことを気にしなくても― 普段どおりのスタイルシートの コーディングで問題ありません そして こちらの download-02 の方に関しては― CSS3 で新たに追加された プロパーティーを駆使して― このような形のデザインを作成しています 具体的なプロパーティーの解説はまた別の レッスンでご紹介していきますが― 例えば text-shadow や box-shadow ― border-radius 等といった プロパーティーを使うことによって― このようなデザインのボタンを 画像を作成する必要も無く― CSS のみで実装することが 可能になっています こちらのアイコン自体もフォントオーサムから アイコンを使っているので― こちらのボタンに関しては 全く画像を作る必要が無く― 制作の時間の短縮にも 繋げていく事ができますね 以上でレッスンは終了です 今回はフォントオーサムを使って 簡単なダウンロードボタンを― 作る方法について解説致しました 以降のレッスンでは このフォントオーサムを使って― チェックリストを作成する 方法について解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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