Day 12-模写コーディングの反省点

★本日の学習成果まとめ

手順1
・コーディング前にサイト全体を確認し、どの部分をどのタグで囲むかを考える。
この作業が一番重要で、「ブロックボックスにするからここはdivで囲う必要がある」等をここで認識して考える必要がある。

手順2
・ディレクトリ(リポジトリ)を用意する
今回であれば、HTMLとCSSとjpgを入れておくディレクトリを用意して、入れておく。

手順3
・まずは全体のコーディング
◇HTML
①meta　name＝「」　content＝「」でカッコの中にサイトの説明等を入れることでSEO対策になる。
②ブラウザの違いで表示されるスタイルが違っては嫌なので自分のCSSの前にリセットCSSを組み込むのが一般的。
例えば下のようにやる。

<link rel="stylesheet" href="path/to/reset.css">
<link rel="stylesheet" href="path/to/style.css">

③この時点で、横幅を統一したいものがあればclassを指定しておけば後々簡単に横幅を統一することができる。

◇CSS
①HTML　100%　に指定する。これによってユーザーが指定したフォントサイズに自動的に変更される。
②文字サイズをremで指定することで、レスポンシブに文字サイズが変わるので良い。
③inline-blockは「横方向につなげるブロック」、blockは「縦方向に積み上げるブロック」、flexは「枠内で自由に配置するブロック」とchatGPTが教えてくれた。
④li要素は事前にliststyle:noneで丸を消しておく。

手順4
・headerのコーディング
①グローバルナビゲーションはnav→ul→liタグでできる。
②id属性に対してCSSやリンクを飛ばしたいときは、＃～でできる。＃を先頭につけることを忘れない。
③マウスホバーした際に薄くするにはopacityプロパティで0.7ぐらいにするとよい。

手順5
・mainvisualのコーディング
①objext-fit:coverで要素の領域内を完全に覆うようにして要素を配置したいときに使う。
②＠media　screen　and(max-width)で画面領域に応じて表示内容を変えることができる。

手順6
・Aboutのコーディング
①flexboxで要素を中央寄せにするときは
縦方向は「align-items:center」横方向は「jusify-content:center」で中央寄せにすることができる。
②テキストの寄せ方は「text-align:」で指定することができる。
③flex-direction:columnで要素を縦に並べることができる。画面領域が小さいときはcolumnで縦方向にするのが良い。

ここまでが1回目の学びでした。
何日もかけて作っていると忘れるしよくないと思った。短期集中で何度もトライしていこう！！