※この解説からは、余白などの設定も同時に行っていきます。
1.見出しの設置
最初に見出しの部分を作成しましょう。
見出しの文字サイズと下線部分は、独自クラスを付けてcssで設定します。
ブラウザで表示を確認してみましょう。
2.カード部分の作成
タイトルの下にある横に３枚ずつ並んだカードを作成していきます。
３分割する為にcol-md-4のクラスを適用したdivで枠を作ります。
その中にカードとして設定したdivを入れ込む形です。
cssを追加し、ブラウザで表示を確認しましょう。
border-radius
border-radiusはボックスの4つのコーナーの角丸さを指定できるプロパティです。
.ico-circleのようにheightとwidthを同サイズにして、50％と指定すると円が作れます。
box-shadowプロパティ
box-shadowはボックスに影を設定することができるプロパティです。
.ico-circleではオフセット距離やぼかし位置を「0」に設定することで、枠線を表示させるのに使用しています。
Font Awesomeのタグに関して
デザインを見ながらFont Awesomeでアイコンを探してコードを取得すると、見本のコードとは別のクラスになっている場合があります。
これは、Font Awesomeのバージョンによってクラスが変更されているためです。
最新版をご利用の際は、見本と違っていて問題ありません。Font Awesome公式サイトに表示されているコードをそのまま利用してください。
3.カードをコピーして内容を変更
カードのレイアウトが完成したら、6つになるようにコピー&ペーストしてアイコンとテキストを書き換えていきます。
ブラウザで確認して、3ブロックずつ横並びに配置されていれば完成です。
