Implist | 駆け出し後エンジニアのための理論と実装

Wires jp を使ったLPコーディング演習④


いよいよWires jp を使ったLPコーディング演習も終盤です。今回は、フッターを作っていきます!

完成すると、以下のようになります。

フッター要素のコーディング

今回も、どの要素同士が横並びになっているかをまず考えていきます。

横並びになっている各ブロックに枠をつけると、以下のようになりますね。9つのブロックがあることがわかります。

さらに、よく見ると、「製品情報」「お知らせ・採用情報」「会社情報」の3グループと、「お問い合わせ」の間に大きな空隙があることに気づきます。

そこで、以下のようなイメージで、それぞれ親要素となるdivにフレックスボックスを設定しましょう。フレックスボックスの中にフレックスボックスを入れるイメージです。

div(class=”footer-parentbox”)には、2つのボックスが入っています。このdivに、CSSで、justify-content: space-between;を指定することで、中の2つの要素は左右両端に配置されます。

そして、div(class=”footer-inner”)にもdisplay: flex;を指定することで、中の子要素群が横並びになります。子要素は、項目毎に<li></li>内に書き込みましょう。

 

HTML
<footer>
<div class="footer-paretbox">
<div class="footer-inner">
<div>製品情報</div>
<div>
<li>製品情報トップ</li>
<li>製品詳細</li>
<li>導入のご相談</li>
<li>導入事例</li>
</div>

<div>お知らせ<br><br><br>採用情報</div>
<div>
<li>ニュースアーカイブ</li>
<li>月別アーカイブ</li>
<br>
<li>ニュースリリーストップ</li>
<li>月別アーカイブ</li>
</div>

<div>会社情報</div>
<div>
<li>会社情報トップ</li>
<li>企業概要</li>
<li>社長挨拶</li>
<li>事業案内</li>
<li>アクセスマップ</li>
</div>
</div>

<div class="footer-inner">
<div>お問い合わせ</div>
<div>
<li>03-1234-5678</li>
<li>xxx@mail.com</li>
<li>よくあるご質問</li>
</div>
<div>
<img src="img/Icon-Instagram.png" alt="">
<img src="img/Icon-Twitter.png" alt="">
<img src="img/Icon-Facebook.png" alt="">
</div>
</div>
</div>
<footer>

 

CSS
.footer-paretbox {
display: flex;
justify-content: space-between;
}

.footer-inner {
display: flex;
}

各divおよびliタグ内に文字を打ち込み、imgタグないにSNSアイコンを指定すると、以下のように表示されます。

なお、「お知らせ」と「採用情報」の間は、<br>タグで改行することによって行間を調整しています。

 

フッター全体のレイアウト調整

フッターの要素が表示されたところで、次は、全体のレイアウトを整えていきます。

下記のように(先程のHTMLより一部抜粋)、各項目のタイトルが入ったdivには”footer-info-title”というクラス名を、リスト要素をまとめたdivには”footer-info”というクラスをそれぞれ付与します。

HTML 
<div class="footer-info-title">製品情報</div>   /*クラス名を加えた*/
<div class="footer-info"> /*クラス名を加えた*/
<li>製品情報トップ</li>
<li>製品詳細</li>
<li>導入のご相談</li>
<li>導入事例</li>
</div>

※「お知らせ」以降の項目にも同様にクラス名を付けます。

”footer-info-title”および”footer-info”に対して、CSSでスタイルを指定することで文字間隔を調整していきます。今は、間隔が詰まっているので、padding-rightを使うと良いでしょう。

ついでに、リスト要素の「・」も消します。

SNSアイコン画像を指定したimgタグにも同様にスタイルを指定して、間隔を調整しましょう。

CSS
.footer-info-title {
padding-right: 1rem;
}

.footer-info {
padding-right: 2.5rem;
}

.footer-info {
list-style: none;
}

footer img {
padding-right: 1rem;
}

※本来であれば、各リスト要素の中身は、該当ページへのリンクになっているところですが、今回はリンクは指定しません。あくまでレイアウトの練習と思ってください。

最後に、これまで書き込んできたfooter要素全体を囲う<footer></footer>タグに対して、スタイルを付けます。

footer {
background-color: #3B4043;
width: 100%;
color: white;
padding: 4rem;
font-size: 1rem;
}

これで、全体のコーディングができました!