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

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


本日は、ホームページ要素として頻出の、「3つのお困りごと」のブロックをコーディングしていきます。

今回のお題も、wire.Jpのレイアウトにアイコンを組み込んで作成いたしました。オーソドックスな型なのに、コーディングは意外と難しい(!?)ので、是非チャレンジしてみましょう。

3つ組ボックスをコーディングする 

この3つ組ボックス、よく見ると仕切り線の上下にスキマがあります。さらに、各ボックス内部にも余白がとってあり、隣のボックスの文章とは一定の間隔を保っています。 

このタイプの3つ組ボックスは、以下の図のようにイメージしてコーディングしましょう。  

まず、領域全体を指定するdiv(クラス:problem-parentbox)を設け、その子要素として3つのdiv(クラス:problem-childbox)を作ります。 

そして、3つの子要素 のうち2つの右サイドにボーダー付けます(まとめて border-rightを指定し、最後のひとつのボックスについて border: none とします)。さらに親要素の上下にpaddingを設けると、子要素のボーダーの上下に余白ができるのです。

親要素にdisplay: flexを指定し、子要素を横並びにします。この時、子要素にwidth: 100%を指定することで、各子要素を均等幅に収めます。 

この3つ組ボックス全体の幅は、親要素のwidthを設定することで調整できます。 

HTML
<div class="problem-paretbox">
<div class="problem-childbox">
<img src="img/coins.png" alt="">
<div class="textbox">
<h3>子要素タイトル</h3>
<p>テキストテキストテキストテキスト テキストテキスト テキストテキスト テキストテキスト <br>
</div>
</div>
<div class="problem-childbox">
/*省略*/
</div>
<div class="problem-childbox">
/*省略*/
</div>
</div>

 

CSS 
.problem-paretbox {
width: 70%;
background-color: #B3CFE2;
margin-left: auto;
margin-right: auto;
padding-top: 2rem;
padding-bottom: 2rem;
display: flex;
}

.problem-childbox {
border-right: 2px white solid;
box-sizing: border-box;
padding: 1.5rem;
width: 100%;
}

.problem-childbox:last-child {
border: none;
}

 

実績紹介ブロックをコーディングする 

 次は実績紹介のブロックです。 

 このタイプのブロックは、実績紹介の他、使用例、オフィス・イベント紹介など色々なシチュエーションに使えます。

大きさの異なる複数のボックスも、flexboxとBootstrapのrow/colを駆使して思い通りに表示させましょう! 

まずは、どのボックスとどのボックスが横並びになっているかしっかりチェックします。 

 以下のようにイメージできたらコーディングをしていきます。

HTML 
<div class="row portfolio-parentbox">
<div class="col-8 portfolio-left">
<div class="portfolio-left-inner">
<div class="portfoliobox">
/*画像とテキストが入ります*/     
</div>
<div class="portfoliobox">
/*画像とテキストが入ります*/  
</div>
</div> /*portfolio-left-inner の閉じタグ*/

<div class="portfolio-left-picture">
<img src="" alt=""> /*portfolio-left下段の画像を配置*/
</div>                        
</div>   /*portfolio-left の閉じタグ*/

<div class="col-4 portfolio-right">
/*省略(画像・タイトル・テキストをそのまま縦ならべでOK)*/
</div>
</div> /*portfolio-parentbox の閉じタグ*/

 

 CSS
.portfolio-parentbox {
width: 100%;
height: 100%;
}

.portfolio-left-inner {
display: flex;
justify-content: space-between;
}

あとは、適宜marginやpadding、文字サイズを調整して体裁を整えます。 

なお、 CSSでクラスを指定して スタイルを指定する際、 rowやcol-8, col-4など の「Bootstrapのグリッドレイアウトを用いる際のクラス名」は使わない方が無難です。CSSでクラス名を指定する必要がある時は、新たにクラス名をつけましょう。