前回記事ではヘッダー部分の模写を、実際の手順を追って紹介しました。
今回は、ヒーロービュー部分と、SERVICEセクションの模写をポイントを絞って紹介します。
前回までの記事をご覧になっていない方は是非ご覧ください！
※模写コーディングをやってみたいけど、HTMLもCSSも全然わからない！！という方はまずこちらの記事を先にご覧ください！！
ヒーロービューのコーディング
ヒーローは、WEBサイトの一番最初に目に入る領域(ファーストビュー)で訪問者に強い印象を与えることができます。
ヒーロー部分のレイアウトをもう一度確認しましょう。
ヒーロービューは画面高さいっぱいに広がるものが多いですが、ここではある程度の高さで固定されています。
HTMLのコーディング
HTMLの方は簡単ですね！但し、文章の改行をどうするか？が考えどころです。
完成品は以下になります。
<div class="hero">
<p class="hero_txt">WEBコーダーKATSUの<br>ポートフォリオサイトです。<br>コーディングならお任せください。</p>
</div>.hero_txtは一つの段落となるので、文章全てを囲います。
改行をどうするかについては、.hero_txt要素の幅を小さめに指定して、要素からテキストがはみ出す時に自動で改行することもできますが、これだと意図しない所で改行されることもあります。
幅は指定せずに、<br>を使って特定の箇所が改行されるようにしましょう。
CSSのコーディング
スタイルを指定していく際のポイントとしては、
- ヒーローの高さは画面高さいっぱいとはなっていないのでChrome拡張のDesignerToolsで確認します
.heroに背景画像を指定します。表示位置、幅・高さをいい感じにするには…？- 中に入っているテキストは上下左右で中央揃えとなるようにします。
という所になるかと思います。
完成品は以下になります。
.hero {
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background: url("../image/hero_image.png") no-repeat center/cover;
}
.hero_txt {
text-align: center;
color: white;
font-family: "Noto Sans Jp", sans-serif;
font-size: 26px;
line-height: 2;
}実装の補足として、
.heroの背景画像は中央基準に、要素全体を埋め尽くすように指定(center/coverの部分).heroの背景画像のパスを指定する際は、CSSファイルから見た画像ファイルへのパスを指定。(一つ上の階層のimageフォルダのhero_image.pngとする)sample/ ├ index.html ├ css/ │ ├ style.css │ └ reset.css └ image/ ├ hero_image.png ├ service_code.png ├ service_wordpress.png └ service_responsive.png- 中に入る
.hero_txtを上下左右中央揃えにするために、.hero側から以下を指定するdisplay: flex;
align-items: center;
justify-content: center;
このヒーロービューを画面高さいっぱいにしたいときは、.heroのheightを100vhに指定するだけでOKです。(vhは100を画面高さいっぱいとする単位)
ヒーロービューで高さを気にしないものであれば、.heroのheightを指定せずに、上下に同じ値のpaddingを指定することで、高さを出しつつ、テキストを上下中央にすることも可能です。
SERVICEセクションのコーディング
続いてSERVICEセクションのレイアウトを確認しましょう。
ヘッダー、ヒーローに比べ、ちょっと複雑ですね。
HTMLのコーディング
ここでもレイアウトが分かりきっているので淡々とマークアップすれば良いのですが、次のことを意識すると良いでしょう。
このセクションのように、要素のネスト構造が複雑な場合は、外側の要素から、終了タグを含めて一つ一つ順に記述していく方法が確実です。
一筆書きで完璧に記述をしようとすると、途中で終了タグの数が合わない！！なんてことになります。
また、.service、.wrapper等はコンテンツが大量に入り、終了タグが遠くなり、何の要素の終了タグか分かりづらくなります。
終了タグの後ろ等にコメントを入れると、コーディング中の混乱を防ぐことが出来るので合わせてオススメです。
例としては以下のような感じです。
まず外側の要素を、終了タグにコメントを付けて記述してから...
<section class="service">
<div class="wrapper">
</div><!-- /.wrapper -->
</section><!-- /.section -->内側の要素を記述していくと◎です。
<section class="service">
<div class="wrapper">
<h2 class="title2">SERVICE</h2> <p class="service_txt">以下のサービスをご提供します！</p> <div class="service_wrap"> </div><!-- /.service_wrap --> </div><!-- /.wrapper -->
</section><!-- /.section -->emmetで一気に書き上げてしまうのもアリですが、使わない場合は確実に行きましょう。
また、.service_cardのように同じブロックが複数続く時はコメント＆ブロック間に空白の行を入れるのも、分かれ目が分かりやすくアリだと思います。
<section class="service">
<div class="wrapper">
<h2 class="title2">SERVICE</h2>
<p class="service_txt">以下のサービスをご提供します！</p>
<div class="service_wrap">
<!-- card1 -->
<div class="service_card">
<h3 class="service_cttl">コーディング</h3>
<figure class="service_cfig">
<img src="./image/service_code.png" alt="">
</figure>
<p class="service_ctxt">
HTML5,css3,javascript/jQueryを駆使してSEOに強く、且つデザインに忠実なコーディングを行います。
</p>
</div>
</div><!-- /.service_wrap -->
</div><!-- /.wrapper -->
</section><!-- /.section -->完成品はこちらです。
<section class="service">
<div class="wrapper">
<h2 class="title2">SERVICE</h2>
<p class="service_txt">以下のサービスをご提供します！</p>
<div class="service_wrap">
<!-- card1 -->
<div class="service_card">
<h3 class="service_cttl">コーディング</h3>
<figure class="service_cfig">
<img src="./image/service_code.png" alt="">
</figure>
<p class="service_ctxt">
HTML5,css3,javascript/jQueryを駆使してSEOに強く、且つデザインに忠実なコーディングを行います。
</p>
</div>
<!-- card2 -->
<div class="service_card">
<h3 class="service_cttl">WordPress移行</h3>
<figure class="service_cfig">
<img src="./image/service_wordpress.png" alt="">
</figure>
<p class="service_ctxt">
HTMLで作成した静的なサイトをwordpressへ移行し、快適なサイト更新を行えるようお手伝いします。
</p>
</div>
<!-- card3 -->
<div class="service_card">
<h3 class="service_cttl">レスポンシブ化</h3>
<figure class="service_cfig">
<img src="./image/service_smartphone.png" alt="">
</figure>
<p class="service_ctxt">
現代のwebサイト閲覧はスマートフォンからのアクセスが大半を占めます。スマートフォン、またタブレットからの閲覧を考慮したレスポンシブwebサイトの作成を行います。
</p>
</div>
</div><!-- /.service_wrap -->
</div><!-- /.wrapper -->
</section><!-- /.section -->コメントを入れておくと、後から見たときに構造をパッと見て把握することができます。
但し、どこにでもコメントを入れまくってしまうと、返ってごちゃごちゃになってしまうので程よいバランス感が必要です。
CSSのコーディング
スタイルを指定するポイントとしては、
.serviceの背景、.title2の左枠線と背景の色をColorPickで確認します。.service_cardについては、固定幅なのでDesignerToolsで確認します。.service_cardをFlexで横並びにしたとき、内容物に関わらず高さを自動的に揃えるには…？.service_cfigに入れる画像は元画像のサイズに関わらずいい感じに表示されるようするには…？
こんな所でしょうか？
完成品は以下になります。
.title2 {
padding: 10px;
margin-bottom: 24px;
border-left: 5px solid rgb(255,207,101);
background-color: rgb(255,241,191);
font-size: 24px;
font-weight: bold;
}
.service {
padding: 50px 0;
background-color: #eee;
}
.service_txt {
margin-bottom: 20px;
}
.service_wrap {
display: flex;
justify-content: center;
}
.service_card {
width: 300px;
margin: 0 10px;
padding: 25px;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px 0px;
text-align: center;
}
.service_cttl {
display: inline-block;
margin-bottom: 20px;
border-bottom: 1px dotted #aaa;
font-size: 18px;
font-weight: bold;
}
.service_cfig {
width: 150px;
margin: 0 auto 20px;
}
.service_cfig img {
width: 100%;
vertical-align: top;
}実装の補足として、
.title2は、他のセクションでも使えるようにしたいので、必要最低限のスタイルとします(無理に幅を指定したりしない).serviceはセクションの上下にpaddingで余白を設けています。.wrapper側へ指定しても良いですが、後々一部セクションのみpaddingを調整したいパターンもあったりするのであえて分けています。- 縦方向の要素の
marginは下方向で統一しています。上下にバラバラに付けるより、統一感ある方が後々の調整の際混乱しません。 .service_wrapにはalign-itemsを指定せずにおくと、横並びにした.service_cardの高さが自動で揃います。.service_cardに指定しているbox-shadowプロパティは模写コーディングでは確認困難です。検証ツール等でソースを見たり、ジェネレータが色々あるのでそちらを使用するのがオススメです。.service_cfig imgは幅100%にして親要素いっぱいにしておきます。これはレスポンシブ化の際にも役に立ちます。
まとめ
PCでの表示はいい感じになったでしょうか？？
なるべくソースを見ずに実装していると、思い通りのスタイルにならない...という事が多々あると思います。
次回はそんな時に役立つ検証ツールについて紹介します！
次の記事 デベロッパーツールの使い方を紹介します！
