[自分用]自分のマニュアル

共通

内容	詳細
不要な空行、コメントアウトは消す
4Kディスプレイもチェックする
reset.cssはいじらない	チーム開発する場合、みんなに影響を与えることになる
フォントはダウンロードが必要なものがある
タイトルとディスクリプションの設定を忘れない
各ブラウザ、各端末で確認をする

html

内容	詳細
containerで幅を調整
機能のためにつけたタグなら、機能についてのクラス名を付与する	→そうでないと、ぱっと見てなんのためのネストなのかを理解できない 例) pc-none(pcサイズの時、表示させない)、 sp-breakpoint(スマホサイズのブレイクポイントで変化を与える)
クラス名を省略しない	・第三者に伝わるように ・自分自身が後で見返した時にすぐにわかる ・cssの可読性向上にもつながる
first-viewのクラス名はfirst-view
インラインレベル要素はブロックレベル要素で包む	・ブロック要素と、余白や幅等の設定が変わるためデザイン崩れにつながる (display:blockを追加してもいいが、見た目の統一感崩れや余計なプロパティが増えてしまう)
border-topで実装できるならhrを使わない	余計なネストが増えるため
oocssなので、スコープ調整はクラス名で行うのではなくcssで行う	つまり〇〇-〇〇というクラス名はできる限り使わない ※ちなみに最初の〇〇をフレフィックスという
titleはこのサイト名を指定する	一目で確認できるため
h1系のタグにはtitleよりheadingというクラス名の方が適切	タグとかぶってしまうから
idは使用目的がある時以外は使わない	「ページ内リンク」、「DOM取得」の際に使用する
alt属性は画像の中の文章を記述する ※装飾だが、どうしてもimgタグを使用しなければならない時は空でいい	主に、その画像がないと文章が成り立たない時にimgタグを使うため。 （音声ガイダンスでも使用される） ※ちなみにbackgrondとの使い分け。 ①第一はデザイン優先 ②どっちでも実現可能な場合は、 「alt属性を入れることで、ブラウザに認識してもらいたいかどうか」 「その情報って、当該サイトにおいて重要なのかどうか」 で判断する
pタグが連続する場面でも、別のまとまりならdivで囲むといい	同じ場面の内容なのかなと思わせてしまう
buutonクラスは、aタグ自体に付与する	aタグ自体にデザインを付与することが多いため
箱型の要素は「boxes」「box」、 カード型の要素は「cards」「card」を使う	レイアウト構造がわかりやすい 親要素と子要素の繋がりの部分を意識
単に改行させたい時のクラス名にはnoneやhiddenは使わない	そもそも存在自体を消すのかと思わせてしまうため
wrapperとcontainerはあまり同時には使わない ちなみにinnerも
プライバシーポリシー、特定商取引法に基づく表記にはアンカータグを設置
ハンバーガーメニューはdivではなく、buttonを使う。	ちなみにクラス名はhamburgerだと見た目の命名なので、drawer-open-triggerなどの役割ベースで命名をすると良い
ハンバーガーメニューの中身のクラス名はdrawerがいい
section,article,main,sidebarらへんの関係性を親子関係を理解する	同時には使わないものがいくつかある
drawerはheaderに含めない	htmlはパーツで組み立てていく。その時にdrawerはheaderと同一のパーツではなく、独自のパーツと判断できる。
ulの中にulは基本問題ない ※繰り返しのビジュアルパターンはul/liを使用する TH
中身が少ない時も、footerを一番下に配置したい時はpaddingを使うと思うが、全体を包んでいるwrraperのpadding-bottomにfooterを配置してはいけない。	要素を埋め込むための余白ではないため。
mailにはリンクを設定する webページにもリンクを設定する（外部ページは、別タブで開くように留意）

css

内容	詳細
css管理方法（あくまでも個人用）	・base １つの要素だけのスコープを切ってスタイルを当てる。 要素そのものを指定しているので、その指定しているタグ自体に必ずスタイルが当たるもの　(言い換えれば、土台になるもの) ・global 他のセクションでも使い回しができそうな見た目のもの ・local 使い回しができないもので、その部分にしか当てないもの 基本的に大分類 中分類 小分類みたいにパスのように指定することでが属性を意識して記述する
border-raidus	値をMAXで使いたいなら9999pxを指定する。 なぜなら一目見ただけでborder-raidusをいっぱいに使いたいと伝えることができるから。
擬似クラスでcssを指定するのもありだが、可視化に欠けるため、マルチクラスを使用するといいかも	例えば最後のリストだけ、ボタンの形にしたい時は、last-childを指定するのではなくbuttonクラスを指定する等
リンクの有効範囲に気をつける	displayプロパティ等で調節
トルツメ（取って詰める）で記述する ・margin-top ・margin-left ・隣接セレクタをうまく使う	理由は ・統一感が生まれる ・後々調節しやすい ・隣接セレクタを使うと余白の打ち消しが減る
子要素の大きさが、親要素の大きさを超えないようにする	デザイン崩れや追加、修正のしづらさにつながる
メディアクエリは、幅自体で設定をするのではなく、デザイン崩れが起きたタイミングで実行する	変に余白が多くなったりする
line-height：normalは1ではなくブラウザによりけりなため、1なら１を指定する
リストの中点は、文字で入力するのではなく、list-style-type: discを使うといい	改行する時に中点の下に文字が来てしまうのを防げるため
line-heightには単位を指定しない	単位を指定するとどんな小さい文字、大きい文字にも指定したline-heightが適用されてしまう。見た目に違和感が出る。 単位を指定しないことにより、文字の大きさに適したline-heightを指定することができる
margin: 40px 5px 0 5pxは width: calc(100%-10px)で表現できる
formの入力部分が左により過ぎてしまっていると不自然
inputにはidを付与して、labelタグとの関連付けをする
gapを使うと、コード量を減らすことができる

js

内容	詳細
<script>タグの中身は基本可視化されないため、bodyタグで呼び出すのは正しいとは言えない	cssを同じように呼び出す。 ※htmlを読み込む前にjsを読み込むとエラーが出るためdefer等の工夫が必要。
is-active(活性化させる)、is-show(見せる)、is-move(動かす)を区別する
DOMを変数に格納する場合は、接頭辞に$をつける	$=jQueryオブジェクト
init関数の設置	関数の発火をまとめる
関数名は動詞＋名詞
constは生成された要素も読み取ってくれるので、 letを使用して、代入の形を作らなくても大丈夫
使いまわさないものは、無理して定数/変数で宣言しなくてもいい
1行だけの処理は、わざわざ関数化しなくても良い	余計な記述が増えるため
<script type = “module”>のように記述することはない	ファイル自体分割してしまっているから