メインコンテンツの01番目、Conceptのエリアを作成していきます。
1.Conceptエリアの大枠を作る
Conceptもmaxwidth:1140pxなので、ヘッダーで使った「container」クラスのdivで囲います。更に、その中の細かなボックスを考えながらHTMLを書いていきましょう。
イメージは下図のような形です。
これをHTMLのコードに起こすと、このようになります。
index.html
ブラウザで見てみると、これだけでも最低限のレイアウトは出来ていますね。
見出し部分の装飾を作る
課題のヘアサロンサイトでは、それぞれの見出しの上に数字が振られており、その数字に下線を引いたようなデザインになっています。
この線の作り方はいくつかありますが、解説ではdivを使って設定します。
（他の方法でも見本通りのデザインになっていればOKです）
数字を囲ったdivに設定した「number」クラスに対して、cssで下線となるborder-bottomを設定します。
ブラウザで見てみると、線は表示されるものの端まで伸びているはずです。
これはdivがブロックレベル要素と呼ばれる、箱のような使い方をする要素であるためです。
ブロック要素は幅を指定しない場合、親要素の横幅と同じ値になるという決まりがあります。このため親要素＝containerの幅まで<div class="number">は伸びてしまっています。
数字の幅だけに変更するため、cssのdisplayプロパティを使って「このdivはインラインブロック要素として扱う」と指示をします。
インラインブロック要素だと、基本的に横幅は内容の幅と同じになります。今回の場合だと「01」という２文字分の幅になるわけです。
あとはpadding-bottomやline-heightなどを使って、数字と下線の間の距離を調整すれば完成です。
Learn Moreのボタン風デザインを作る
「Learn More」の文字を右に寄せて、背景色を付けましょう。
まず、CSSを設定するために、以下２つのクラスを作成します。
- ボックス内の要素を右寄せに配置するための「text-right」クラス
- 文字に背景色を付けるための「learn-more」クラス
そして「learn-more」クラスを適用させるため、spanタグでテキストを囲います。
index.html
それぞれ、最低限設定したいスタイルだけ書いてみます。
style.css
ブラウザで見てみましょう。
位置が変わって、見えにくいですが文字に背景色もついています。
もう少し背景色が適用された枠が欲しいので、paddingを加えましょう。
最後に、上に寄ってしまっている「Learn More」の位置を整えましょう。
.rowに高さが違う要素を真ん中に表示してくれるようalign-items: center;を加えます。
保存してブラウザをリロードすると「Learn More」が丁度真ん中に配置されるようになります。
これでLearn More部分が完成。
Concept部分も出来上がりました。