はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY8−10の押さえておきたいポイント
実務でのコーディング
- まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
- CSSを付けつつデザイン通りに調整していく
- 完成形をイメージしてブロックを作る→ざっくりパーツ分けをすること
まずはセクション、次に整列するブロック、各パーツって感じかな・・・
このパーツ分けがMarginやpadding を決めることにもなりそう - どこに何のスタイルを当てるか設計しつつ書く
- レスポンシブも見越してブロックを整理する
VS Codeのショートカット
Ctrl + d 単語選択。
本来は複数選択のためのキーだが1回だけ使用する場合は実質的な単語選択として使える（ことが多い）。
option+↑↓キー 行移動。
選択した行が移動する
Trial and Error memo（HTML）
headタグ内の書き方がわからない
headタグ内に書かなければならに要素は思い浮かぶがタグが思いつかず、手が止まった・・・
head内は、metaタグとlinkタグが重要で覚えておきたい！
titleタグ
metaタグ ・・・ 検索非表示（noindex）、サイト概要（discription）
linkタグ ・・・ ファビコン、CSSの参照先を指定、フォント読み込み（GoogleFonts）
pictureタグ入れ漏れ
存在をすっかり忘れていたpictureタグ。
CSSやJavascriptを使わずに画像をレスポンシブに表示させることができる。
<picture class="fv-picture">
<source media="(min-width:768px)" srcset="./img/fv.png" />
<img
src="./img/sp/fv.png"
alt="素材の美味しさをそのままに Sweet Delight"/>
</picture>pictureタグの中には、sourceタグとimgタグをセットで使う。
（sourceタグは複数指定も可能）
sourceタグには、media属性を指定でき、この条件に合致した場合に出力するイメージを定義できる。
このsourceタグで記述した条件に合致しなかった場合は、imgタグで指定した画像が出力される。
hタグの漏れ、設定誤り（h2なのにh3にしていた）
h1タグはサイトの一番重要な見出しとして必ずつけなければならないし、
サイト全体をわかりやすくし、検索エンジンが理解してくれるようにするためにも
hタグのルールを守ってつけてあげないといけない。
文字の大きさをコントロールするためだけにhタグを利用してしまうのもダメだし、
逆に他のタグを使っても見た目上は表現できてしまうため、hタグを利用しない・・・というのもダメ！
今回のようにhタグ内に画像をセットすることもできるが、
本当はHTML内に文字列でしっかり記述したほうがよい模様。
formタグの書き方がわからない
今回は、formタグの中にinputタグのtype emailとbottonタグを入れる必要がある。
また、bodyタグで指定していたフォントやフォントサイズが適用されず、個別に設定が必要！
inputタグには、他にもいろいろなタイプがある。
formタグの中で使うパーツとしてはtextareaタグやselect/optionタグもある。
（DAY6でやったよー思い出せー）
Trial and Error memo（CSS）
positionプロパティ漏れ
headerを画面上部に固定したいけどどうやって書くんだっけーーーで思い出せず。
positionプロパティは要素の位置を決めることができるプロパティ。
値にはstatic（使わない）、relative、absolute、fixedがある。
今回はfixedを利用。
positionプロパティは、上下左右のどのポイントから●px移動させるた場所に表示するかを規定する、
top、bottom、left、rightプロパティとセットで使う。
中央寄せの書き方がわからない
復習しながらmargin:0 auto;を指定するとなぜか中央寄せになることに気づいた・・・
（DAY5-7のレクチャーでもその指定はしていたが、いまいちよくわかってなかった）
中央寄せといえば！でtext-align: center;とjustify-content: center;もあるよなぁ・・・と思い、違いがわからなくなった。
text-align: center; インライン要素を中央寄席にする
margin:0 auto; ブロックレベル要素を中央揃えにする
justify-content: center; フレックスボックスを使って中央揃えにする
もう少し深掘りして理解が必要だが、元からブロック要素（display: flex;を指定していない）であればmargin: 0 auto;で中央揃えができそう。
background-imageの指定がうまくできない
backgroun-imageプロパティを指定しただけでは、もとの画像のサイズにあわせて表示され、うまく表示されない。
なので、以下も一緒に指定すべき！（※今回repeatは使わなかった）
background-positionプロパティ 表示位置の指定
background-sizeプロパティ 大きさの指定
background-repeatプロパティ 繰り返しの指定
background-imageプロパティは複数の画像を重ねて表示したりもできる模様。
追って深掘りしよう。
レスポンシブ対応で手がとまる
初っ端のコードで何を書けば良いかが抜けていた。
@media screen and (min-width: 768px) {
/* ここに書く */
}あとはSP版を意識しすぎず、PC版としてのコードを書けばいいんだなぁという印象。
max-widthの指定を忘れがち。
初級編DAY8−10の追加で調べたいことメモ
- pictureタグの深掘りしたい
- hタグの深掘りしたい
- formタグの深掘りしたい
- positionタグの深掘りしたい
- 中央寄せの方法について深掘りしたい
- background-imageプロパティについて深掘りしたい
- 全体的にもっかい0から書いてみたい・・・
初級編DAY8−10の感想と記録
ちょっとカンニングはしてしまったけど、終わった〜！！！
思ったよりは早くできたけど、タグ、プロパティが思い浮かばないと手が止まってしまう。
DAY5-7は見よう見まねでコードを書いていたので、「何をやりたいのか？」を自分のあたまで考えることがまだできていないんだなぁ・・・
復習しながらこの記事も書いたものの、深掘りしたいことはたくさん！（ってか全部？！笑）
ただ、全部ちまちま調べているとキリがないし、やりながら覚えた方がいいんじゃないかなぁと思うので・・・
まずは講座を進めてみようと思います。
引き続きがんばろう！
