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

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版のみコードを公開中です。