HTML/CSS/JavaScriptのLP作成手順

前置き

LP作成の流れを簡単にまとめました✍️
デザインはできていて、
実装だけするパターンです。

流れ、全体像が分かった方が
最初はやりやすいと思います🎈🧸

「display: flex;で
　要素の改行する時は注意❗️」
など、細かいところはこちらを確認していただくと
良いヒントが得られるかもしれません🍬
Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと
 Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②
Nuxtから離れてHTML/CSS/JavaScriptを書いて気づいたこと③

ファイルの作成

まずはindex.htmlがないと
何も始まらないので作成🗂
使用するcss, jsファイルがあれば
ファイルパス(住所🏠)を書いて読込🔄

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
  <title>タイトル</title>
  <meta charset="utf-8"/>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <meta name="description" content="検索された時に表示されるタイトル">

  <!-- cssファイルやgooglefontの読み込み -->
  <link rel="stylesheet" href="app.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap" rel="stylesheet">
  
  <!-- viewportを書かないとメディアクエリがうまく効かない場合がある -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>

<body>
  <!-- body閉じタグの前でjsファイルの読み込み -->
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<head>

</head>

<body>

</body>

</html>

CSSは用途別に分けておくと⭕️
・reset.css
・変数用のCSS
・通常のスタイリングのCSS

共通CSSをチェック

まずはデザインを見て、
共通化できそうなところを
確認していきます✨👀

幅チェック

左右に余白があるか❓
まずは幅を見てみましょう🌱

例えば…
header, footerは幅いっぱい、
sectionも幅いっぱいに背景画像、
その中のdivには左右に余白がある…
つまり中身の幅をmax-widthで決めて
中央にするためmargin: auto;が必要💡

class名を複数使用

タグに直接スタイルをあてるか、
container container-aboutのように
クラス名を複数使用すると便利です💡
container → 共通のCSS
container-about → about内のタイトルのみ
といったことができます💫

<body>
  <section class="about">
    <div class="container container-about">
    </div>
  </section>
</div>

<body>

</div>

</section>

</div>

header,
footer,
section, {
  width: 100%;
}

.container {
  max-width: 1080px;
  margin: auto;
}

header,

footer,

section, {

width: 100%;

}

.container {

max-width: 1080px;

margin: auto;

}

フォントサイズやカラー

見出しh1〜h6
button, aあたりは
基本的に同じCSSであることが
多いと思います🍀

変数は:rootで設定

CSSでも変数は使用できます。
※Sassの場合はstyle-resourcesが必要
【Nuxt.js】Sassの導入方法

色の変数は種類ごとに分けると
メンテナンスがしやすくなります✨
フォント/背景/アイコン/stroke…

:root {
  --color-main: #000;

  /* fontのカラー */
  --color-font-default: var(--color-main);
}

:root {

--color-main: #000;

/* fontのカラー */

--color-font-default: var(--color-main);

}

p {
  color: var(--color-font-default);
}

p {

color: var(--color-font-default);

}

1要素ずつレスポンシブを意識する

CSSはあくまで装飾
htmlがしっかりしていれば
いくらでも調整できるもの…❣️

しかし、
まとまったhtmlを完成させてから
CSSに取り掛かろうとすると、
「あれ❓ここdivで囲まないとダメ❓」
といったhtml自体を変える必要が
出てくることもあります😯💦

1要素ずつ、
レスポンシブを意識しながら
htmlを書くとスムーズです✍️

レスポンシブ

レスポンシブの難しい点は、
基本的にデザインに
PCとスマホしかないところです💥

おおまかな閲覧デバイスは
PC, タブレット、スマホ。
つまりタブレットの表示は
自分で最適な状態を
考える必要があります🤔💭

とはいっても
CSSはあくまで装飾🍒
ベースのhtmlさえあれば
そんなに難しくないのです💫☝️

ルール

1セクションずつやる❣️
順番は
pc→tab→sp⭕️
または
sp→tab→pc⭕️

tabから作成とかしない❌🙅‍♀️

PCファーストの場合🖥
ウィンドウサイズを縮めていき、
切り替えたい部分をチェックして
最大値を取ります🌟

モバイルファーストの場合📱
PCと逆のことをすれば良いだけです💫

- 〜479px：スマートフォン縦
- 480px〜599px：スマートフォン横
- 600px〜959px：タブレット
- 960px〜1279px：小型PC
- 1280px〜：大型PC

⬇️最初からサイズを確認せずに
　こんな設定をしてはいけません💥💣🤯
※いつも同じデザイナーさんで…など
　確実に数値が決まっている場合は別

あとから数値を変更したり、
タブレットを無視して
スマホからやろうとすると
CSSの書く位置が変わったりして
けっこう面倒です💦笑

/* PC */

@media screen and (max-width: 1024px) {
  /* tab*/
}

@media screen and (max-width: 426px) {
  /* sp */
}

/* PC */

@media screen and (max-width: 1024px) {

/* tab*/

}

@media screen and (max-width: 426px) {

/* sp */

}

yossy

今やスマホでwebサイトを
閲覧する方がほとんど。
スマホファーストに
切り替えても良いかも？
と思うこの頃です。

PCファーストの例

div containerが
max-width: 1080px;となる場合
横幅1440pxを想定した場合は
左右に余白もあって綺麗に見えます。

ところがウィンドウの幅が1080pxの時は
左右の余白がなくピッタリになり
デザイン通りの余白がなくなってしまいます🌀

となると小型PCの960px〜1279pxで見る時に
sectionまたはdiv containerの左右に
paddingを設定してあげる必要があります💫☝️

/* PC */

@media screen and (max-width: 1279px) {
  /* lap*/
  .container {
    padding: 0 20px;
  }
}

/* PC */

@media screen and (max-width: 1279px) {

/* lap*/

.container {

padding: 0 20px;

}

そうすると、
今度はコンテンツ間の空きが
なくなる可能性が出てきます💭

なので今度はコンテンツの中身の
max-widthを調整していく必要があります💫☝️

こんな感じで
縮めていって違和感を覚えた時点で
調整していきます🍒

まとめ

レスポンシブ対応、
ある程度pxを決めてからやるものと思っていて
タブレットを飛ばして実装していました💦

どこに該当CSSを書いたか、
長〜いコードから探すのも大変です笑

もちろん検索を使いますが🔍
これがどこのメディアクエリか
いちいち確認しなければなりません❗️笑

流れをスッキリまとめることができたので、
次からはスムーズにできそうです🔥💪