LPを作ろう！その1

2020-08-20

こんにちは、0371です。

Web制作の経験が半年ほどの準初心者さん向けに、LPの作り方を教えています。
実際にLPを作っていく流れを重視しています。

「HTML&CSSの勉強はしたけど、自分でサイトを作れない・・・。」という方は参考にしてみてください。

目標物

当面の目標は、**「ランディングページを自分の手で1から作る」**です。
以下のような構造のページを想定しています。

0371's.Portfolio
"https://0371-firstlp.netlify.app/"

上記のランディングページはbootstrap4を使用していますが、受講者の要望でHTML&CSS&JS のみで制作することになります。

制作

ひよこLP（ランディングページ）を作りたいと思います。

まずは下準備ということで、E:/abc-circle/hiyokoなどのサイト制作プロジェクト用のディレクトリを作成しましょう。
その中に、index.htmlを作成します。
その後に、cssディレクトリを作成します。

CSSディレクトリ（フォルダー）の中には、main.cssとheader.cssとhiyoko.cssとfooter.cssも追加しましょう。

このようなディレクトリ構造になるはずです。

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

それでは、index.htmlの中身を書いていきましょう。
エディターにemmetというプラグインが入っていない方は、適宜ググって導入してください。

!と入力すると、HTMLの雛形が自動生成されます。プラグインの種類によって、何処まで生成されるかはバラバラです。自動生成されたコードは以下の通りとなっています。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

では、コードを入力していきましょう。

lang="en"をlang="ja"に変更
<title>ひよこ王国</title>に変更
<body>タグの中にheader hiyoko footerの順にコメントを挿入

ここまで行うとこうなります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ひよこ王国</title>
</head>
<body>

<!-- header -->

<!-- hiyoko -->

<!-- footer -->
	
</body>

次に、header hiyoko footerでLPとしての最小限の構成を目指します。各コンポーネントの記述をしていきましょう。

コンポーネントとは、webページを構成する要素のことを言います。

hiyokoは<section>タグで囲い、idを指定してください。

section － HTML5タグリファレンス
"http://www.htmq.com/html5/section.shtml"

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

<section>タグを使用する際のポイント

レイアウト目的のコンテナ要素として用いるなら、<section>ではなく、<div>を使用してください。

その部分の意味を表す見出しを付けることができない場合には、<section>～</section>で囲むのは適切ではないかもしれません。

上記二点をクリアしてセクションであることが明確な場合にも、より具体的な意味を持つ<article>、<aside>、<nav>のほうがふさわしい場合には、これらのタグを使用します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ひよこ王国</title>
</head>
<body>

<!-- header -->
  <header>
		<h1>ひよこ王国</h1>
	</header>

<!-- hiyoko -->
  <section id="hiyoko">
		<h2>ひよこ王国へようこそ！</h2>
		<p>ひよこがいっぱい！！！！！！！！！！！！！！</p>
	</section>

<!-- footer -->
  <footer>
		<p>&copy; 2020 自分の名前</p>
	</footer>
	
</body>

ここまで終わったら、CSSの設定をしていきます。まずはmain.cssから記述します。

main.css

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

各CSSファイルをimportしています。コンポーネントごとにCSSファイルを分ける書き方だと、CSSの管理が楽になります。

全てのCSSプロパティを一つのCSSファイルで記述すると、コード量が肥大化しメンテナンスが困難になりかねません。そのため、style.cssだけで書かないようにしましょう。

その他のCSSファイルも書いていきます。

header.css

.header__bg-yellow {
	background-color: #ff0;
}

.header__padding-x {
	padding: 0 40px;
}

hiyoko.css

.hiyoko__bg-ivory {
	background-color: #FFFFF0;
}

.hiyoko__padding-x {
	padding: 0 40px;
}

footer.css

.footer__bg-yellow {
	background-color: #ff0;
}

.footer__padding-x {
	padding: 0 40px;
}

プロパティ名が特殊です。 コンポーネント名__プロパティ名というような命名方法です。今回はSassを使用していないので、BEM記法（Block Element Modifier）の一部を参考にして記述しています。

個人的にはstyled-componentsやtailwindcssの方がいいと思います（しろめ）
こういう風な記述方法があるんだなあ程度に覚えておいてください。

次に、index.htmlにCSSのパスとCSSセレクターを書きましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ひよこ王国</title>

	<!-- CSS -->
	<link rel="stylesheet" href="./css/main.css">

</head>
<body>

<!-- header -->
	<header class="header__bg-yellow header__padding-x">
		<h1>ひよこ王国</h1>
	</header>

<!-- hiyoko -->
	<section id="hiyoko" class="hiyoko__bg-ivory hiyoko__padding-x">
		<h2>ひよこ王国へようこそ！</h2>
		<p>ひよこがいっぱい！！！！！！！！！！！！！！</p>
	</section>

<!-- footer -->
	<footer class="footer__bg-yellow footer__padding-x">
		<p>&copy; 2020 自分の名前</p>
	</footer>
</body>

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

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

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

今日の一言

ひよこ王国にいきたい。

LPを作ろう！ その1

目標物

制作

今日の一言

LPを作ろう！その1