CSS

HTML/CSS/JavaScriptのLP作成手順

前置き

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

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

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


ファイルの作成

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

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


共通CSSをチェック

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

幅チェック

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

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

class名を複数使用

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


フォントサイズやカラー

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

変数は:rootで設定

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

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


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の書く位置が変わったりして
けっこう面倒です💦笑

yossy

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


PCファーストの例

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

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

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

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

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

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


まとめ

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

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

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

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

-CSS
-,

© 2021 aLiz Nuxt