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

## 共通


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

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

## css

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

## js

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