全体を見てみる
今回のセクションでは、横に並べるカード数が異なる程度で、スマホ/PCに大きな差はありません。
同じカードレイアウトは、テスト詳細ページ（関連コース）でも使うことに注意すれば素直に作ってしまって問題ないでしょう。
見出し部分の作成
では、上に表示される見出し部分から作ってみます。
ここからがページのメインコンテンツ、ということを示すためのmainタグを追加。 その中にsectionタグを入れ「freetest」というクラスをつけておきます。
更に内側に、見出しとテキストを入れていきましょう。
h2タグは文字色が青です。 他の部分でも青色の文字は出てくるので、共通クラスを作ります。
また、下のセクションでもh2に該当する部分は文字サイズが共通です。 h2タグに対して一括でサイズ等を指定しておきます。
PerfectPixel +検証ツールを使って、余白や背景画像位置を決めていきます。
見ていると、h2やpタグについているmarginが邪魔になる部分がありそうです。 marginを0にするクラスを作っておきます。
フォントの兼ね合いもあるのでピッタリとは行きませんが、ほぼ同じ位置に配置できました。
8つのテストカードを作成
次に、テストの概要が書いてあるカード部分を作ります。
カードはスマホ幅で2枚、PC幅で4枚横並びですね。 flexレイアウトで並べられそうです。
カード部分は、下記のような構造で作ることができます。
1.大枠を作る
まず、大きなブロックを作ってみましょう。
それぞれに中身を入れていきます。 スタイル指定が必要そうだと思う箇所には、この時点でクラス名をつけておきます。
次に、CSSを書いていきます。 最初から完成させようとすると、行き詰まってしまいます。 必要だと思うものから書いていき、ブラウザ表示を見ながら不足している部分を足していけば大丈夫です。
とりあえず、ここまで書きました。 font-sizeに関しては10px未満は「10px」として扱って良い、とのことなので、.testcardを使って一括で指定しています。
ブラウザで表示を見てみます。
まだまだスタイル指定が足りていませんね。 ここからは、上から順に設定していきましょう。
2.無料マークとカード上部
「無料」マーク
.testcard_iconの上下左右中央に「無料」が表示されるようにします。 flexを使って、align-items: center;とjustify-content: center;を指定します。 justify-content: center;は共通クラス「justify-content-center」を作りました。
PerfectPixel+検証ツールで確認しながら、オレンジ色の円の位置指定を加えます。
50%幅だけだと、カンプよりもカードが少し大きいですね。 .testcardにpaddingを加えてサイズ調整と余白の確保もしておきましょう。
文字が中央、オレンジ色の円がカードの左上と少し重なった位置にきました。
画像部分
次にカードの上部分、白い丸の中に画像が入っているところです。
CSSで.testcard_imgを白い円にします。
HTMLの方では、.testcard_imgにmx-autoクラスを加えて中央配置。 「無料」のテキストを上下左右中央にしたのと同じ方法で、画像を白い円の中央に入れます。
カンプに合うように、下記のCSSを加えます。 1. .testcard_topにpaddingを設定 2. .testcard_imgにドロップシャドウを付ける 3. .testcard_img imgのサイズ調整
3.カード中央部
既に作成しているクラスを加えて配置を整えます。
カードに表示されているテスト名は、よく見ると濃グレーですね。 文字色やボタンの色、余白をCSSで調整します。
フォントサイズが違うので、画像を重ねてもズレます。 ここは仕方がないので、大まかな位置があっていれば良しとしましょう。
4.カード下部
まず、liタグを横並びにして文字色を青に変更します。 そして、真ん中（２番目）のliタグにだけ左右にborderを付けます。
spanタグを使って点数や人数が書かれている部分を太字にします。 項目名等の部分も、小さくなるようにクラスを作っておきましょう。 （Chromeで見ると変わりませんが、PCレイアウトでも使うので）
行間を狭めるために、line-heightも設定しておきます。
こちらもフォントサイズの影響で、カンプ通りの仕上がりにはなりません。 デザインと近いレイアウトになっていればOKです。
5.影をつける
カード全体、「無料」のバッジに影を付けましょう。 今のようにパーツが分かれた状態では、上手く影が付きません。
testcard_top、testcard_middle、testcard_bottomに分けた3つのdivを囲います。 「testcard-inner」というクラス名を付け、CSSで影を設定します。
6.カードを増やして並べる
1枚カードが出来たら、コピー&ペーストで増やして、カードの並びを整えます。
カードの数を増やしただけだと、折り返さずに並びますね。
flexアイテムを折り返すためのクラス「flex-wrap」を加えます。
カードのサイズ（長さ）が違うので、PerfectPixelでカンプをずらしながら、間隔を調整して行きましょう。 余白調整のために、カード全体を囲うdivに「testcard-wrapper」というクラスをつけました。
配置が整ったら、コピーしたカードの画像を変更します。 カンプと比較しながら微調整して行けば完成です。 （ピッタリは重なりませんが、配置や余白がデザインに寄っていればOKです）
