はじめに
2024年10月からデイトラのWeb制作コースの受講をスタート。
現在は初級編を終えて、中級編に突入しました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
中級編DAY7の押さえておきたいポイント
似たスタイルを異なるclassにあてる
違うクラスだけどほぼ同じスタイルが当たる場合は、ひとまとめに記述をしておき、
あとから（下に）独自のスタイルを記述してあげたほうがメンテナンス性が高い。
.mv__lead1,
.mv__lead2 {
//ここに共通のスタイルを書く
}
.mv__lead1 {
//独自のスタイルを書いて上書きする
}
.mv__lead2 {
//独自のスタイルを書いて上書きする
}レスポンスを考慮した背景サイズ
背景の色塗りのサイズなどを決める時は、単純にデザインカンプの横幅をwidthで指定するのはNG。
レスポンシブにしたときに、不格好で変な表示になることが多いため。
ウィンドウ幅が広がっても、見栄えがおかしくならないように、
calc()を使い、ウィンドウ幅100%から左右の余白を引いたサイズを指定してあげるとよい。
.class{
max-width: calc(100% - 15px * 2);
}レスポンシブにおける幅指定
PC幅では問題なくても、スマホ幅に切り替わるまでの狭いサイズ（タブレットなど）で
画像が不恰好に大きくなってしまう場合、パーセンテージで幅を指定してあげるとよい。
.class{
width: calc(600px / 1100px * 100%);
}コンテンツの幅、1100pxに対して、画像は600pxという割合で表示してね！という指定になる。
レスポンシブで担保すべきサイズ
- 最小サイズは「320px」
- 最大サイズは「1920px」
ただし、案件対応時は担保するサイズを確認したり、ディレクターさんから指示をもらうべき。
着手前にしっかりと確認しよう。
中級編DAY7の追加で調べたいことメモ
- 改行位置がSPとPCとで異なる場合はどのように改行タグを入れるのか？
中級編DAY7の感想と記録
比較的順調に終了！
calcで計算する部分がちょっと悩んだけれど、考え方はわかってきたので、よしとしよう！
引き続きがんばるぞ！
