Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hirotry(照屋 寛邦)

（初学者向け）LP作成時の型・作法など

Last updated at Posted at 2020-04-18

はじめに

この記事は、ランディングページ(LP)を手早く作成するために、どのLPにも使える共通部分や、書く際の作法をまとめたものです。
復習と備忘も兼ねて、本記事を執筆いたしました。
本記事記載のソースコードを起点に、コンテンツの追加、CSSの変更、Bootstrap等のフレームワーク実装を行っていただき、各々が目指すデザインのページへと進展させていただければ幸いです。

前提条件として以下の点にご留意願います。

  • ここでいうLPは縦長のレイアウトのページを指す
  • HTML及びCSSのみ使用のシンプルなLP（JSやその他の言語・フレームワークは使用しない）
  • メニューはシンプルな横並びのもの
  • レスポンシブに関するCSSは省略

LPの意味に関しては下記記事が参考になります。
ランディングページ（LP）とは何か？初心者にもわかりやすく解説！

出来上がり見本

本記事記載のソースコードを用いると下記画像のようになります。
見やすくするため、下記２点が本記事のソースコードと異なります。

  • hogeセクションを２回記述
  • style.cssの各種カラープロパティの値を以下の値に指定
    • body及びa要素の文字色：#222
    • hogeセクションの背景色：#ddd
    • footer要素の背景色：#aaa
    • footer要素の文字色：white

LP_default_sample.png

ディレクトリ構造

基本構造（一例）。

作業ディレクトリ
css/
  ├ reset.css
  └ style.css
img/
  ├ top-bg.png
  ├ XXXX.png
  └  ・・・
favicon.ico
index.html

各ファイルのソースコード

画像ファイルとfavicon以外のindex.html, reset.css, style.cssの型となるソースコードを以下に示す。

index.htmlの型

作法的なもの

  • bodyタグ内の基本構造はheader section(トップタイトル用) section(*n) footer
  • ヘッダー、各セクション、フッター内に.containerクラスを持ったdiv要素を作り、その中にコンテンツを記述。
  • トップセクション以外の各セクションに.sectionクラスを付けて、共通のレイアウトを適用。
index.html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <title>Document Title</title>
  <meta name="description" content="メタディスクリプション（ページの概要・要約）">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<header>
  <div class="container clear">
    <div class="header-left">
      <h1 class="header-title">ヘッダーに表示するタイトル</h1>
    </div>
    <div class="header-right">
      <ul class="header-nav">
        <li class="header-nav-item"><a href="#">メニュー名</a></li>
        <li class="header-nav-item"><a href="#">メニュー名</a></li>
        <!-- メニューの数だけ li を作成 -->
      </ul>
    </div>
  </div>
</header>

<section class="top">
  <div class="container">
    <p class="top-title">
      トップタイトル
    </p>
    <p class="top-subtitle">
      トップサブタイトル
    </p>
  </div>
</section>

<!-- hogeセクション（必要な数だけ繰り返し記述） -->
<section class="hoge section">
  <div class="container">
    <h2 class="section-title">Hoge</h2>
    <!-- ここに hogeセクションの内容を記述 -->

  </div>
</section><!-- /hogeセクション -->

<footer>
  <div class="container">
    <p class="copyright">Copyright(C) Hogehoge All Rights Reserved.</p>
  </div>
</footer>

</body>
</html>

リセットCSS

各ブラウザは、デフォルトで適用するCSSを持っているため、ブラウザによって見え方が若干異なることがある。
以下のリセットCSSを書くことにより、ブラウザ毎の表示の差異をなくす。

reset.css
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

style.cssの型

style.css
/*==============================
ページ全体の共通部分
==============================*/
body {
  color: #222;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.5;
}
img {
  width: 100%;
  height: auto;
}
a {
  text-decoration: none;
  color: #222;
}
a:hover {
  opacity: 0.7;
}

.container {
  width: 90%;
  max-width: 980px;
  margin: auto;
}

.clear::after {
  content: "";
  clear: both;
  display: block;
}

/*==============================
header
==============================*/
header {
  padding: 20px 0;
}

.header-left {
  float: left;
}

.header-title {
  font-weight: bold;
  font-size: 24px;
}

.header-right {
  float: right;
}

.header-nav {}

.header-nav-item {
  float: left;
  margin-left: 50px;
}

.header-nav-item a {
  font-size: 15px;
  font-weight: 600;
  line-height: 36px;
}

/*==============================
top
==============================*/
.top {
  background-image: url(../img/top-bg.png);
  -webkit-background-size: cover;
  background-size: cover;
  padding: 80px 0;
}
.top-title {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.top-subtitle {
  font-size: 18px;
  text-align: center;
}

/*==============================
section (各セクション共通部分)
==============================*/
.section {
  padding: 60px 0;
}

.section-title {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

/*==============================
hoge （各セクション名）
==============================*/
.hoge {
  background-color: #ddd;
}

/*==============================
footer
==============================*/
footer {
  background-color: #aaa;
  color: white;
  padding: 20px 0;
}

.copyright {
  font-size: 12px;
}

float 及び Flexboxについて （おまけ）

Flexboxが主流になってきているが、両方の性質を理解して使い分けをできるようにしたい。
以下はfloat及びFlexboxを使用する際の留意事項をまとめた。

float

floatさせたい要素のcssにfloat: left;もしくはfloat: right;を記述。
floatさせる要素の親要素に.clearクラスを付加することで、要素の浮遊によるレイアウトの崩れを解消。

Flexbox

Flexboxを適用させるには、親要素に.hoge-wrapperクラスを付け、
そのクラスに対してdisplay: flex;及びその他Flexbox関連のCSSを記述。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?