たなしょのメモ

日々勉強していることをつらつらと

ランディングページを作る編その2

ランディングページの続き

前回は4項目のうち2つの側が完成したので、次はSKILL紹介のところです。

イメージとしては文字をh1タグで配して画像を横並びに表示させるイメージ。

できた画面がこちら。

f:id:bonashochang:20181110112337p:plain

できるスキルが少ない…。

そこはひとまずおいとくとして、こんな感じにシンプルに作成してみました。

float:leftで横並びに設定して、あとは各種スキルの画像の位置を修正。

本当はbackground-imageを追加したかったんだけどなかなか実装が難しかったのでまた今度にします。

(各スキルに関して個別に記事に書こうかなぁ。)

 

メンバー紹介ページを作る

これで4つの項目のうち3つめができたので、最後はメンバー紹介のページを作ります。

SKILL項目のように横並びにして画像の下にメンバーの担当とメンバー名を記載する。

完成した項目がこちらです。

f:id:bonashochang:20181111032057p:plain

個性的なメンバーたちですね笑

かなり綺麗にまとめられて作成した自分も満足です。

 

フッターを作成している

続いてフッターを作っていましょう。

とはいってもfooterタグで囲んで文字を入れるだけですが。

f:id:bonashochang:20181111033151p:plain

わかりずらいですがメンバー紹介の画像の下に「Copyright 2018 たなしょ会」の文字が入れてみました。これで一通りランディングページの完成です。

次回はこのランディングページをherokuにアップしてみましょう!

ではでは