大まかな作りを考える
1.全体の共通余白
コーディングを行う際には、まず、デザインの全体像をぼんやり眺めてみます。 100％表示だと限られた範囲しか見えないので、少し縮小すると良いです。
左右均等に、共通の余白がある部分が多いですね。 ピンクの色で線を引いてみます。
長方形ツールで見てみると、余白は20pxのようです。
左右20pxの余白をもつクラスを作っておくと、使い回しができそうですね。 containerと命名して、スタイル指定を書いておきます。
2.ファーストビューの作りを考える
次に、今回作成するファーストビューの構造を考えます。 解説用に線を引いていますが、これは頭の中で考えて貰えればOKです。
まず、ナビゲーションにも背景が適用されていることがわかります。 ナビゲーションを含めて背景を適用するボックスが必要ですね。
コードをコピーしてきたナビゲーションの三本線部分は右のまま。 ですが、左にはロゴが配置されています。 containerの中で左右両端配置にする必要がありそうですね。
また、PC表示にしたときには[キューベスウエブ]という文字を表示します。 ロゴと文字の縦方向配置を揃えるには、２つを囲う要素を作っておいて、flexを使うと良さそうです。
次にテキストや画像の部分。
ここはPCレイアウトだと左右横並びになりますね。 ですので、最初からレイアウト切り替えを設定できるよう、それぞれのパーツに分けて囲っておいたほうが良いでしょう。
大まかな骨組みを考えたら、早速HTMLとCSSを書いていきます。
1.ロゴとナビゲーションボタン
ファーストビュー全体を囲うdivを作成します。
その中にロゴとナビゲーションボタンを囲うボックスを作ります。
ここはヘッダーなので<header>タグを使いましょう。
<body>
<div class="top">
<header class="container">
<div>
<img src="images/logo.svg" alt="Qbase WEB">
<span class="d-none">[キューベスウエブ]</span>
</div>
<nav class="nav">
<ul>
<li><a href="#">テスト</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">講座</a></li>
<li><a href="#">プレミアムサービス</a></li>
</ul>
</nav>
<button type="button" id="navbtn"></button>
</header>
cssで.topに背景画像、予備の背景色を入れます。 背景画像の調整は.topに高さが出来ないと難しいので、一旦飛ばします。
子要素を横並びにするための「display:flex」や、flexアイテムの配置を決めるalign-itemsとjustify-contentプロパティは他のところでも使用するでしょう。 ですので、Bootstrapと同じように、それぞれ共通クラス化しておきます。
スマホ非表示の[キューベスウエブ]に使うdisplay:none;も、分かりやすいように共通クラス化してしまいましょう。
Flexを使った配置にするので、#navbtnの絶対位置指定はコメントアウト。
作ったクラスをHTMLの必要箇所に適用します。 出来たら、ブラウザで表示を確認してみましょう。
ロゴが表示されていませんね。 表示されるようにサイズを指定しましょう。 デザインでは#navbtnは白なので、色も変えます。
ブラウザで表示を確認すると、少しデザインに近づきました。
CSSで余白を設定して、#navbtnの長さをデザインに合わせましょう。
微調整は後ほどまとめて行うので、デザインに近いものが出来ればOKです。 コメントアウトしていて、使わないことが確定したスタイル指定は消しておくと見やすいです。
2.トップコピーと画像の配置
h1タグで囲ったトップコピーと、最初に線で囲った３つのdivを作ります。 画面端ギリギリまで来ないようにcontainerクラスを適用。
また、h1の部分は文字白・太字・中央配置になっています。 どれも他の箇所でも使用できるスタイルなので、これらは共通クラス化しておきます。
h1見出し部分、2つのdivにぞれぞれクラスを命名します。
デザインを見てみると、一番上の画像と、STEP~の並びでは、幅が違いますね。 センターは三角形の頂点（黄色の点線）ですので、配置の調整が大変そうです。
とりあえず、暫定であたりをつけて幅を指定しておきましょう。 ブロック要素を中央配置にするために、共通クラスとしてmx-autoクラスも作っておきます。
必要な箇所にmx-autoクラスを追加します。 .top_imgbox と .top_stepbox にそれぞれ中身を入れていきましょう。
ブラウザで表示を見てみると、.top_imgboxの画像ははみ出していますね。 .top_stepboxに入れたSVGは表示されていません。olの数字も出ています。
良い具合に収まるようにCSSを書いていきましょう。
【①共通クラスを作る】 1. 画像がはみ出さないようにimg-fluidクラスを作ります。 2. flexアイテムを自動改行させるflex-wrapクラスを作ります。
【②ファーストビュー用のCSSを設定】 1. .top_stepbox内のol要素のpadding-leftを無くします。 2. .top_stepbox内のli要素にはlist-style表示を無くします。 3. .top_stepbox内のli要素が、親要素の50％幅で表示されるようにします。
【③HTMLファイルでクラス追加】 1. images/topimg@2x-8.png にimg-fluidクラスを適用 2. olタグにflex-wrapクラスを適用
ブラウザで表示を確認してみます。 デザインに近いレイアウトになっていればOK。
「今すぐテストを受ける」部分
最後に「今すぐテストを受ける」の部分を作ります。
ボタン風のパーツはデザインの中でいくつか使われています。 詳細ページの方には、色違いのボタンも登場していますので、 * 角丸や字間を設定するための「btn」クラス * 色など設定する「btn-〇〇」クラス
と、分けた形で共通クラス化しておきます。 作ったクラスをaタグに追加します。
ブラウザで表示を見てみましょう。
もう少し調整が必要ですね。
【調整内容】 1. リンク文字に付く下線を消す 2. 中央配置にするためにaタグを「text-center」クラスのdivで囲う 3. 太字にする「text-bold」クラスをaタグに追加 3. 「btn-now」クラスを作り、paddingを設定
次に、ドロップシャドウの効果をつけます。 ドロップシャドウをかけられているパーツも、全ページで見ると結構ありますね。 ただし、シャドウのサイズは場所によって違います。 同じような黄色背景のボタンでも、テスト詳細ページだとサイズが違うのですね。
デザイン通りに、という要望ですので、ここは共通化しないほうが良いでしょう。
幸いにもトップページにある２つの「今すぐテストを受ける」ボタンの影は、同じ設定が使われています。 bodyタグにトップページ用のidを設定してbox-shadowを設定してみましょう。
ドロップシャドウの値は四捨五入して小数点以下1桁までにしています。 コーディングの場合、どうしても必要な理由がない場合は、整数にするか、小数点以下１～２桁までにすることが多いです。デザイナーが細かい方で「違う」と言われたら、それ以下を書けば大丈夫です。
3.背景画像と余白の調整
背景画像が、縦に3回並ぶように設定します。 「今すぐテストを見る」の下に余白も加えましょう。
これで、大まかにはデザインの配置が完成しました。
次回、デザインと合うように微調整を行います。 デザインがない部分の、ナビゲーションを開いたときの表示も設定します。