Wires jp を使ったLPコーディング演習①
今回から数回にわたって、 wires jpを用いたLPのコーディング演習をしていきます。
「wires jp」は、Adobe XDで使えるUIキットで、さまざまなパーツを無料で使用することができる便利なツールです。 （公式サイト：https://www.behance.net/gallery/67284971/Wires-jp）
wires jpにある「オーソドックスなLPパーツ」を無理なくコーディングできれば、ひとまず基礎はOK！…ということで、本記事ではwire jp上のパーツを盛り込んだLPを例題にもってきました。
※今回練習に用いるLPは、wires jpのパーツに無料画像素材サイトunsplash（公式サイト：https://unsplash.com/）の画像を当てはめて作った架空のWEB制作会社のLPです。
ファーストビューのコーディング
コーディングの際、意外とつまずきがちなのが、ヘッダー部分です。ここでは、Bootstrapを用いてヘッダー部分を構成していきます。「どの要素の中にどの要素が入っているのか」、という内包関係をしっかり意識することがコツですよ！
まず、Bootstrapのrowとcolを使って、ヘッダーを4:8に分けます（※colは足して12になるよう分割します）。
col-4とした方には、ロゴと社名・キャッチフレーズが入ります。col-4のdiv内に、さらにdivを設けてこれをフレックスボックスの親要素とし、ロゴと社名・キャッチフレーズのdivを横並びにします。
col-8とした方には、nav要素をフレックスの親要素として、メニューとボタンを横並びにします。
html
<header class="row">
<div class="col-4 header-left">
<div class="titlebox"> /*flexbox 親要素*/
<div class="logo"><img src="img/logo.png" alt="ロゴ"></div> /*flexbox 子要素*/
<div class="text"> /*flexbox 子要素*/
<h1>株式会社XD</h1>
<p>WEB製作をあなたに</p>
</div>
</div>
</div>
<div class="col-8 header-right">
<nav> /*flexbox 親要素*/
<button>お問い合わせ</button> /*flexbox 子要素*/
<li><a href="#">会社情報</a></li> /*flexbox 子要素*/
<li><a href="#">アクセス</a></li> /*flexbox 子要素*/
<li><a href="#">料金案内</a></li> /*flexbox 子要素*/
<li><a href="#">製作実績</a></li> /*flexbox 子要素*/
<li><a href="#">サービス</a></li> /*flexbox 子要素*/
</nav>
</div>
</header>
/*メモ： 右寄せにする都合上、row-reverseにするためメニューのリストと表示が逆順になっています。 */
画像の位置調整
まず、ファーストビューのイメージサイズを下記のように規定します。そして、この枠内の背景として、画像を設定します（画像imgフォルダからURLで指定します）。
CSS
.firstview-image{
height: 600px;
width: 100%;
background-image: url(img/firstview-image.jpg);
}
※Width 100% としておりますが、この100%は親要素の <section class="container"> に規定されます。つまり、containerのサイズに対して100%という意味です。
すると、画像は下記のように表示されます。
…これでは、画像のごく一部のみが拡大表示されてしまって、ちょっと不恰好ですね。
今回は、画像を表示させたい区画の縦横比と、元画像の縦横比が大きく異なっているため、なかなかぴったりに収めることができません。では、下記の、赤い枠線で囲った付近が画面に入るようにするには、どうすればいいでしょうか?
元画像は縦長なので、（縦横比は保ったまま）十分な横幅を確保するために画像サイズを拡大します。280%にしたところでなかなか感じ良く収まりました。さらに、 background-position で位置調整をし、画像を好みの場所に収めます。
CSS
.firstview-image{
height: 600px;
width: 100%;
background-image: url(img/firstview-image.jpg);
background-size:auto 280%; /*この部分を追加*/
background-position: left -200px; /*この部分を追加*/
}
他にも、 background-size: cover; で、指定した領域を画像で一度覆ってから baclgroundnd-position で位置調整をする方法があります。画像調整の方法は色々ありますので、画像サイズと収めたい領域の大小関係から、適した手法を選びましょう！
レスポンシブデザイン
画面全体を縮小していくと、タブレットサイズあたりでメニューが崩れてしまいますね。
そこで、メディアクエリを使って、PC、タブレット、スマホでデザインをが変わるようにしてみましょう。
CSS
/*PC版*/
@media screen and (min-width: 1000px) {
今回のCSS 全部
~1000pxまではこの内部のCSSが適用される
}
@media screen and (min-width: 300px) {
タブレット版のCSS
~300pxまではこのデザインCSSが適用される
}
/*メモ： それ以下のサイズでは、スマホ用デザインのCSSが適用されます。 */
CSSの項目毎にメディアクエリを設ければ、コードの重複を防げます。今回は、コードが見づらくなってしまうことを防ぐために、PC、タブレット、スマホを分けて適用することにしました。
※ただ今、PC版のみコードを公開中です。