模写コーディング 1-1

Codestepさんの初級編にチャレンジ（著作権フリーありがとうございます）
デモサイト：https://code-step.com/demo/html/portfolio1/

PC

左：元サイト　右：模写

header

・インスタのアイコンが若干下がり気味になってしまった
　→元サイトはnavの高さに余裕があるから？右上が基準になってるから？原因が分からない、、

・ロゴとnavを横並びにするのに margin-left: auto; を使用した
　→親要素に justify-content: space-between; でも良い

mainvisual

・mainタグに入れてあげても良かったかも

・レスポンシブ時の画像の切り替えをcssで切り替えてた（display: none; にしていた）
　→レスポンシブ時を考慮してpictureタグで行うべき

・object-fit: cover; で、固定したエリアの中に画像を表示することができる

・width: 100%; 指定で画面の表示幅まで表示され、はみ出さずに済む

・画像に高さを指定してあげる

section（#about）

・下に続くsectionも左右幅などが統一されていたため、sectionタグに同じクラス名をつけた方が効率的（class="wrapper" とかで統一）

・font-sizeの単位は「rem」で行うように意識する
　→「rem」を使えば、常にルート（またはhtml要素）に相対的にサイズを指定することができる

・タイトル下のプロフィールを組織ごとにdivで囲ってpタグでそれぞれ記述するなど余計な記述が多かった
　→ul、liのリストタグで整理するべき
　→一番下のテキスト情報はpタグで

section（#works）

・画像リストをflexboxで配置できた
　→画像をul、liのリストタグで記述した方が良かったかも

・justify-content: space-between; で両端揃えに

・flex-wrap: wrap; で折り返しを指定

・imgの親にwidth（31%など）を指定し、imgの max-width に100%を指定することで親のサイズに納めることが可能

section（#news）

・ニュースの一覧部分をtableタグで記述した
　→dl、dt、ddタグの方が良い（「説明したいワード」と「説明内容」とがペアになるように）

・dl、dt、ddを使う場合、dtタグとddタグはflexboxで横並びに配置する

・dtのwidthを20%、ddのwidthを80%と指定することでサイズ感が良くなる

section（#contact）

・フォームをdivで囲った
　→フォームのエリアはformタグで囲め！！！入力フィールドから送信ボタンまで

・フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述すべし

footer

・コピーライトはpタグで

・heightでフッターに高さを与えるのではなく、paddingでサイズ調整

・親要素に text-align: center; 指定でコピーライトを中央寄せに

感想

なんとか見た目は似たような感じになったが、所々使用タグが適切じゃなかった。

ヘッダーの調整に慣れないと。tableタグとdlタグの使い分けに混乱しそう。

画像のサイズ調整にも手こずってしまったが、親要素にwidthを指定してimgのmax-widthを100%にしてあげることでうまくいくことが知れた。imgに直接サイズを指定する必要もないみたい。

クラスの命名も適切なものにできるようにしていきたい。

レスポンシブ版は別の記事にまとめます。