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

「Font Awesome」でチェックリストを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「Font Awesome」を使って、チェックリストを作成する方法について、解説致します。
講師:
03:17

字幕

このレッスンでは フォントオーサムを使って チェックリストを作成する方法について― 解説致します まずはダウンロードしてきた こちらの checklist ― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態です そして こちらの右側では こちらの index.html を― ブラウザで開いた状態を表示させています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず こちらの index.html ファイルの方から― 確認していきます 今回は二つのリストを作成しています まずは何も指定していない デフォルトの状態のリスト― そして もう一つはフォントオーサムを使って チェックリストを作っているリストとなります まず こちらの上の デフォルトの状態ものですが― こちらのブラウザ上ですと こちらの部分になります そして 下のこちらの部分に関しては ブラウザ上ですと こちらの部分となります では まず こちらの何も指定していない デフォルトの状態のものを見ていきましょう デフォルトの状態のリストでは こちらのように表示されてきます このようにリストの頭に黒点が付くような形で リスト表示という形になっていますね それでは 次に フォントオーサムを使った チェックリストの方を見てみます こちらの部分では このように 先程の黒い点の部分がこのように― チェックマークなどで置き換わっています これの作り方をみていきましょう まず リストの方ではこちらの ul の方にクラス fa-ul ― というものを付けてあげます そして 各 li タグの中に フォントオーサムの専用の i タグを― 記入して その中にこのように fa-li と記入してあげます そして fa というものは これまでのレッスンと同様に― 固定のものとなります そして その後の fa-check-square ― といったものはアイコンの種類を 指し示すものですね このように全ての li タグに含まれる i タグのクラスに fa-li ― というものを付けてあげます このようにすることでデフォルトの状態では 黒い点が表示されていた部分に― このようにフォントオーサムで指定した フォントアイコンが表示されてきます このようにフォントオーサムを 使うことによって― リスト形式の頭に付けるアイコンも 簡単に見栄えの良いアイコンに― 差し替えることができます 以上でレッスンは終了です 今回はフォントオーサムを使って チェックリストを作成する方法について― 解説致しました 以降のレッスンからは CSS3 を利用して 様々なスタイル効果を付けた― ボックスの作り方について 解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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