LPを作ろう！その2

2020-08-23

こんにちは、0371です。

今回は、heroセクションの作成（途中まで）、reset.cssの導入、画像の挿入を行います。

特に、reset.cssは便利ですので、必ず覚えて欲しいと思います。

前回のレクチャーはこちら

LPを作ろう！その1
"https://0371.blog/practice-lp-1"

制作

まずは、index.htmlに<header>タグ と <section id="hiyoko">の間に<section id="hero">を作っていきます。

サイトを訪れたユーザーが、一番最初に目にする部分です。

index.html

~~~ 省略 ~~~
	</header>

<!-- hero --> 
	<section id="hero">
		
	</section>

<!-- hiyoko -->
	<section id="hiyoko" class="hiyoko__bg-ivory hiyoko__padding-x">

~~~ 省略 ~~~

なぜheroなのかというと、hero imageから由来を受けています。

ヒーローイメージ（ヒーロー画像）とは意味/解説 - シマウマ用語集
"https://makitani.net/shimauma/hero-images"

hero image は、Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと、あるいはそのレイアウトのことを意味します。

つまり、サイトを訪れたユーザーが、一番最初に目にする部分なので、heroです。
heroと似ている意味の単語として、Jumbotron(ジャンボトロン)もあります。
どちらを使用しても構いません。好きな方で書いてください。

その後に、heroの中身を記述していきます。
hero image を配置するために、<figure>タグと<img>タグを書きましょう。

index.html

<!-- hero -->
	<section id="hero">
		<figure>
			<img src="" alt="ひよこのヒーロー画像">
		</figure>
	</section>

背景画像を、CSSのbackground-imageで指定せず、HTMLの<img>タグで指定しています。

理由は、

<img>タグだとalt属性が使用できるから
GoogleのLighthouseで高スコアを取るための二つです。

altは、代替手段（alternative）という意味です。
画像が表示できなかった場合に代わりに表示させることや、視覚障碍者の方へ画像の代わりにテキストで説明するために使用されます。

GoogleのLighthouseは、良いサイトを作るための指標になるサービスです。
各項目ごとに100点満点でスコアを表示してくれます。
Lighthouseにしたがってサイトを構築することによって、自然と良いサイトになります。

Lighthouseの使い方はここでは触れませんので、各自ググってみてください。

<figure>タグについても説明します。
<figure>タグと<img>タグはセットで記述するようにしましょう。

figure: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN
"https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure"

<figure>は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。

つまり、「サイトの内容に合っていて、多少位置が変わっても問題ないもの」を使用する時に<figure>を使いましょう。
自分は、何でもかんでも<figure>タグと<img>タグはセットで記述するようにしています。（しろめ）

次に、hero imageに重ねる文字を書いていきます。
サイトのタイトルと、キャッチコピーになります。

index.html

<!-- hero -->
	<section id="hero">
		<figure>
			<img src="" alt="ひよこのヒーロー画像">
		</figure>
        <div>
			<h2>ひよこ王国へようこそ！</h2>
			<p>ひよこがいっぱい！！！！！！！！！！！！！！</p>
		</div>
	</section>

次に、hero imageを用意します。
画像は自前で用意してください。
画像の長さは横長の方が好ましいです。

プロジェクトディレクトリの中に、imgディレクトリを作成します。
その中に、用意した画像をhero.imgという名前に変更して保存してください。
/hiyoko/img/hero.img というような構成になるはずです。

ついでに、cssディレクトリの中に、hero.cssも作成しておきます。

hiyoko --- index.html
				|
				|- img - hero.img
				|
        |- css - main.css
                 header.css
								 hero.css
                 hiyoko.css
                 footer.css

それでは、画像のパスを指定します。

画像のパスとは、「どこに画像があるかを指し示すもの」です。
よく、「画像の参照はどうなってる？」とか、「この画像はここで参照してね」とか言いますが、パスの指定のことを言っています。

index.html

<!-- hero -->
	<section id="hero">
		<figure>
			<img src="img/hero.JPG" alt="ひよこのヒーロー画像">
		</figure>
        <div>
			<h2>ひよこ王国へようこそ！</h2>
			<p>ひよこがいっぱい！！！！！！！！！！！！！！</p>
		</div>
	</section>

画像やCSSのパスは、必ず相対パスで書きましょう。

理由は、サイトをWebサーバーにアップロードした時に、絶対パスだと画像の参照ができなくなることがほとんどだからです。

難しい話になりますが、UbuntuとApacheでサーバーを立てる時は、ドキュメントルートが/var/www/html/となります。
この /var/www/html/ というパスは、通常のPCで絶対パスに含まれることはないと思います。

なので、絶対パス指定だとD:/hiyoko/img/hero.JPGではなく、
/var/www/html/hiyoko/img/hero.JPGみたいな感じになります。（多分）

これだと、画像の場所がわからなくなってしまうため、表示されなくなります。
対して、相対パスは、「相対パスを記述したファイルから見たパス」になります。

今回で言うと、img/hero.JPGとなります。

これは、PC・サーバーともに、プロジェクト内のディレクトリ構成は変わらないため、どちらの場合でも画像を参照することができます。

なので、相対パスにしましょう。

慣れてきたら、ルートパスというのもあるので調べてみてください。
ちなみに、外部サイトへのリンクは絶対パス指定じゃないとアクセスできません。

ここまでで、ブラウザの表示を確認してみます。
すると、画像の周りに余白が生まれているはずです。

余白は必要ないので、reset.css で消します。下記のリンクからコードをコピーします。

modern-css-reset
"https://github.com/hankchizljaw/modern-css-reset"

reset.css

*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

reset.cssには様々な種類があるため、気になる人は調べてみてください。

これを、プロジェクトのcssフォルダーに入れてください。そのあとで、main.cssにreset.cssとhero.cssを追加します。

main.css

@import url("./reset.css");

@import url("./header.css");
@import url("./hiyoko.css");
@import url("./footer.css");

この時に、必ずreset.cssを一番上でインポートさせてください。

CSSファイルは、上から下へと順番にプロパティを読み込んでいきます。
そのため、reset.cssを下に書くと、自分で書いたcssが上書きされてしまい、バグの原因に繋がります。

設定が終わったら、ブラウザをリロードしましょう。すると、画像の周りの余白がなくなっているはずです。

今日はこれで終わりです。お疲れ様でした。

次回のレクチャーはこちら

LPを作ろう！その3
"https://0371.blog/practice-lp-3"

今日の一言

ひよこをもふもふしたい。

LPを作ろう！ その2

制作

今日の一言

LPを作ろう！その2