【受講記録】デイトラWeb制作コース初級編DAY7

2024-10-282024-12-04

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

この記事はこんな人に参考になるかも？

これからデイトラWEB制作コースの受講を考えている方
　実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！

現在進行形でWEB制作コース受講中の方
　一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！

卒業生の先輩方
　懐かしんでいただければ・・・笑　
　　自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。

&copy;2023 Sweet Delight.

注釈や著作権情報、免責事項など印刷物の習慣で小文字になるような付帯的テキストを示すタグ。
文字が周りよりも小さく出力される。

調べたところでは、コピーライトくらいしか使い所はない模様・・・

aタグのリンクを別タブで開きたい場合は・・・
target属性を”_blank”で指定すればよい。

<a href="http://" target="_blank" class="footer-nav-link">

PC用のデザインカンプ（＝サイトの設計書）は1440pxで作られることが多い。
※1280pxだったり、1920pxのこともある。

レスポンシブで表示が変わる画面サイズの境目のこと（今回は、スマートフォン版とPC版の境目）をブレイクポイントという。

今回ブレイクポイントは768pxの1つのみだが、スマホ・タブレット・PCとそれぞれのデバイスで別々にスタイルを当てたいときは、複数のブレイクポイントを用意する場合もあり。

hoverを少しゆっくり変化させる。やわらかい印象になる。

 .header-nav-link{
    transition: opacity 0.3s;
  }

opacityはサイトの中で統一したほうがきれいに見える

カーソルを当てた時にアイコンを変えるのは、carsorプロパティ。
今回はpointerを使う。

必ずしもHTMLのなかからクラス名をコピペするのではなく、検証ページからやってみた結果を踏まえてクラス名コピペしたほうが早い。
結果的に何も記述しなかったからのCSSがあるような場合は、不要なコードなので削除したほうがよい。（読み込みに影響する可能性がある）
375px、768px、1440pxだけではなくて、色々な画面幅で崩れや不自然なレイアウトになっていないか確認する癖をつける！
ひとつ修正すると別のサイズが崩れたりする。修正ごとに細かいチェックが必要！
また、横幅も3000pxなど、とても大きく広げた時に、崩れがないか（特に画像が切れたりしないか）をしっかり確認する。