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

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


 

 

今回は、料金表・お問い合わせフォーム・アクセスマップの3つをコーディングしていきます。

完成すると、以下のように表示されます。

料金表の作成

では、まず料金表を作成してみましょう。ボックスが3つ横並びになっている…ということはフレックスボックスですね!

各ボックスは、マウスオーバーすると枠が青色になるようなデザインになっています。今日は、こういった「+α」のデザインを実装していきます。

まず、横並びのボックスから、コーディングしていきましょう。

今回は、親の幅(class: fee-parentbox)は700pxとしています。子ボックス(class: fee-childbox)内の文字数や、子ボックス間スペースを変更する場合は、全体の幅を適宜変更してください。

HTML
<h2>ご利用料金</h2>
<div class="container fee-parentbox"> /*親ボックス*/
<div class="fee-childbox"> /*子ボックス*/
<div class="fee-childbox"> /*子ボックス*/
<div class="fee-childbox"> /*子ボックス*/
</div>

 

CSS
.fee-parentbox {
height: 100%;
width: 700px;
display: flex;
justify-content: space-between;
}

.fee-childbox {
border: black 1px solid;
padding: 1rem 0;
text-align: center;
border: #d5dada solid 1px;
border-radius: 5px;
}

.fee-childbox:hover {
border: #1d4aab 2px solid;
}

fee-childboxの疑似クラス(.fee-childbox:hover)に対して、ボックスにマウスオーバーした時のスタイルを設定します。

続いて、子ボックス内に要素を加えていきます。

HTML
<h2>ご利用料金</h2>
<div class="container fee-parentbox">
<div class="fee-childbox">
<h3>デザイン</br><span class="enn">¥</span><span  class="text">30,000</span></h3>
<div class="option"><span>オプション2</span>¥5,000</p>
<div class="option"><span>オプション2</span>¥5,000</p>
<div class="option"><span>オプション3</span>¥5,000</p>
<div class="option"><span>オプション4</span>¥5,000</p>
<div class="option"><span>オプション5</span>¥5,000</p>
<div class="option option-last"><span>オプション5</span>¥5,000</p>
<button>選択する</button>
</div>
</div>

とこどころにspanタグがついていますが、これによって子ボックス内の文字サイズや色を細かく指定していきます。

以下は、子ボックス内の「オプション1〜5」へのスタイル付与の例です。

なお、widthを指定することで次の文字(ここでは「¥5,000」)との間隔を調整できます。

CSS
.fee-childbox .option span {
display: inline-block;
width: 8rem;
}

 

お問い合わせフォームの実装

次は、お問い合わせフォームをコーディングしていきましょう。フォームは本来奥が深く、一部プログラミングも必要です。今回は、複雑なコードは書かず、もっともシンプルなフォームのコーディングを行います。

formタグ内には、ユーザーが書き込んだ情報をサーバーに送信するための要素が入ります。action=””の中身は、今は仮に”#”としてありますが、本来はフォームの送信先のURLが入ります。

入力欄内の薄い文字(例文などを書く)は、プレイスホルダーといい、inputタグ内にplaceholder=”表示したい文字列・数字”として記入します。

HTML
<div class="contact-box">
<h3>お問い合わせ</h3>
<p>メールアドレスをご入力ください。24時間以内に折り返しご連絡させていただきます。</p>
<form action="#" method="post">
<input type="mail" id="email" placeholder="メールアドレス">
<button>送信する</button>
</form>
</div>

 

googlemapの実装

アクセス情報の記載には、今やgooglemapは欠かせない存在です。今回は、例として富士山の所在地を載せてみましょう。

googlemapの実装の方法は、すでに数多くのブログで解説されています。ですから、ここでは答え合わせのつもりで、「高さ: 300px, 幅: boostrap containerに従う」かたちでgooglemapを実装してみてください。

正解は…

HTML
<h3>アクセス</h3>
<div id="map">
<iframe src="https://~ 取得した位置情報を記載" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

できたでしょうか?…ここでは、記事のメインセクションがまとめてarticleタグに入れてあり、articleタグのクラスにclass=”container”を指定してあります。

ですので、widthは100%を指定すればOKです。

ちなみに、containerの幅はデフォルトでは以下のように規定されています(以下、引用)。

固定幅レイアウト (container)

ブラウザウインドの幅に応じた固定の幅がデフォルトで決められていて、それを元に各カラムに幅を割り振る方法です。コンテンツがページの中央に表示される(左右にマージン)感じです。

Bootstrap 公式よりhttps://entereal.co.jp/blog/view/784641