HTML/CSSのコーディング教材を公開【ヒーローセクション】

HTML/CSSのコーディング教材

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg

今回は、HTML/CSSコーディングで一番目立つ部分。

ヒーローセクションを制作していきますね。

今回の概要

  • 所要時間:1時間
  • 使用言語:HTML&CSS
  • ヒーロー部分を制作する

完成したヒーロー部分はこちら

今回もわかりやすく、要点を抑えて解説していきますね。

ヒーローセクションとは?

ヒーローセクションとは、Webサイトでもっとも目立つ部分を指します。

もっとも目立つ=ヒーローという理由から、ヒーローセクションと呼ばれます。

ヒーローセクションはもっとも目立つ部分なので、Webサイトの一番上、つまりファーストビューの位置に設置されます。

そして、ヒーローセクションは主に次の様な特徴を含んでいます。

  • 動画、画像を利用する
  • 強烈なメッセージを残す
  • サービスの紹介をする

サイトによって使われ方は様々ですが、基本的なパターンとして覚えておいてください。

ヒーローセクションのHTML部分をコーディングする

それでは、ヒーローセクションのHTMLをコーディングしていきましょう。

index.htmlを開きます。

</header>
<!--これより以下に記述してください-->
<section id="home">
	<div class="container home-container">
		<div class="home-img">
			<img src="img/home.png" alt="ホームイメージ">
		</div>
		<div class="home-texts">
			<h2 class="home-heading">
				I am San-en-nari.
			</h2>
			<h3>Wordpress Engineer</h3>
			<p>Wordpressを使ったWeb制作が得意です。<br>プログラミング学習サイトも運営しています。</p>
			<a href="#contact" class="contact-btn">Contact</a>
		</div>
	</div>
</section>

意外と記述量は少ないのではないでしょうか?

注目ポイント

Progateでは扱わなかったタグに、sectionというものがあると思います。

sectionタグは一般的な要素のまとまりを表します。

今回であれば、ヒーローというひとまとまりを表すため、セクションを利用しています。

また、ヒーローセクションのidがhomeになっていることには注意が必要です。

ブラウザチェック

以下の様になっていれば、上手にコーディングができています。

コーディング経過1

ヘッダー製作時に、コンタクトボタンは作りましたね。

なので、class=”contact-btn”と指定するだけで、実装できてしまいます。

<a href="#contact" class="contact-btn">Contact</a>

ヒーローセクションのCSS部分をコーディングする

次は、CSS部分をコーディングしていきましょう。

style.cssの一番下のコードから、に次の様に記述していきます。

home-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
}

注目ポイント

今回もfelxboxを使用して、横並びにしています。確認してみましょう。

  • display: flex;
  • flex-direction: row-reverse;
  • justify-content: space-evenly;
  • align-items: center;

まずこれらを言語化してみましょう。

  • display: flex;
    要素を横並びにします。
  • flex-direction: row-reverse;
    横並びになった要素の配置を入れ替えます。
  • justify-content: space-evenly;
    要素間の余白を均等にしつつ配置します。
  • align-items: center;
    要素を縦軸方向で揃えます。

図にするとこんな感じです。

まずは、display: flex;で横並びにしてから、flex-direction: row-reverse;で入れ替えます。

フレックスボックスの説明1

そして、justify-content: space-evenly;align-items: center;で要素を並べます。

横軸方向の余白の距離感が全ておなじになった上、要素が縦軸方向に中央揃えになりました。

フレックスボックスの説明2

それでは、追加でCSSを書いていきましょう。

.home-texts {
    width: 40%;
}
.home-heading {
    font-size: 50px;
}
.home-texts h3 {
    font-size: 30px;
    margin-bottom: 35px;
}
.home-texts p {
    margin-bottom: 20px;
}
.home-img {
    width: 45%;
}
.home-img img {
    width: 100%;
}

ブラウザチェック

コーディング経過2

一見良さそうに見えますが、ヘッダーとヒーロー要素が被ってしまっています。

button {
	border: none;
	cursor: pointer;
	outline: none;
}

/* ここから書き足す */

.container {
    max-width: 1920px;
    padding: 100px 30px 150px;
    margin: 0 auto;
}

このCSSを、リセットCSSの最下層部に書き足してください。

CSS同士を詰めて記述していれば、行数でいうと32行目前後にです。

理由として、これからsectionを追加するたびに、containerというクラスは使います。

共通部分として考えていいため、heroのCSSとしてではなく、リセットCSSに加筆しました。

ブラウザチェック

コーディング経過3

ヘッダーとイラストが重なっていなければ完成です。

HTML/CSSのコーディング教材【アバウトセクション】へ行く

お疲れ様でした。今回のI am San-en-nariなどは、あなた自身のお名前に変更してもいいかもしれません。

オリジナルのポートフォリオサイトを制作していきましょう。

次回は、『HTML/CSSのコーディング教材【アバウトセクション】』(準備中)です。

所要時間は1時間、ぜひ挑戦してください。