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

2024-10-232024-12-04

はじめに

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

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

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

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

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

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

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

初級編DAY5の押さえておきたいポイント

ディベロッパーツールの使い方

大雑把にコーディング後、ディベロッパーツール上で微調整を加えて、確定してコードに反映するひともいる。

Newworkタブでは404や速度の確認もできる。

参考サイト
【動画あり】Chromeのデベロッパーツールの使い方！コーダーはどう使う？

コーディング準備

イメージ画像もHTMLやCSSと同じフォルダの中に入れておくと、相対パスで指定しやすくなる。
スマートフォン向けの画像もまとめてわけておくとわかりやすい。

コーディングしよう！（headタグ）

コメントのショートカット
　Mac　：　command　+　/
　Windows　：　Ctrl　+　/

favicon,title,description

favicon（ファビコン）とtitleタグの記述は、ブラウザでサイトを検索した時と、サイトにアクセスした時に表示される。
descriptionで記述した内容は、ブラウザの検索結果ページのサイトタイトル下に表示される。

    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <title>Sweets delight</title>
    <meta name="description" content="サイトの概要を記入します" />

リセットCSS

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

リセットのスタイルシートは、ブラウザがデフォルトで保持しているブラウザ独自のCSSをリセットするためのもの。
自分が作成したCSSよりも前に読み込んで欲しいので、必ずreset.cssのほうを上に記述する必要がある。

HTMLファイルに限らず、コードはファイルの上から順に読み込まれていく。
まずreset.cssで各ブラウザ独自のCSSをリセットし、それからstyle.cssに記載したスタイルを上書きしていくイメージ。

noindex

<meta name="robots" content="noindex" />

Googleなどで検索結果に表示されないようにする。（クローラーによる登録を拒否する）
制作途中のサイトは、まだインターネットに公開してはいけない情報が入っている可能性もある。
そのような大事な情報が漏れてしまっては困るので、インデックスされないように（ブラウザで検索しても出てこないように）このタグを追記する。

似たようなコンテンツ（重複コンテンツ）や情報の少ないページなど、意図的にインデックスさせないページもこのnoindexの記載を残したまま公開する場合もあり。

実際の案件をやるときには、制作するサイトの納品時や公開時にnoindexを外すか否かをお客様に確認するとよい。

GoogleFonts

Google Fonts

GoogleFontsのサイトでフォントを選択すると、自動的にHTMLやCSSのコードが生成されるので、それをHTMLに貼り付けする。
その後、CSSで font-familyを指定すればOK。
ただし、複数のフォントを選択した場合などCSSは同じプロパティが２回書かれていたりするので、そのあたりの手直しが必要。

なお、英語のフォントは、font-family の中の一番左に書くこと！
スタイルシートは左から読み込みがされる。
まずは英字を読み込んで、該当がなければ日本語のフォントを読み込むようなイメージ。

headerをつくろう！

なるべくすべてのタグにclassを指定したほうが、タグの管理／修正がしやすくなる。

なぜクラス名にCSSをあてるのか？

タグ自体にCSSをあてることもできるのだが・・・後からタグを変更したいようなケースがある。
ul → divにしたり、 div→ sectionにしたり。
そういうときに、タグを修正してもCSSには影響を及ぼさないようにするため、クラス名を指定してCSSをあてる。
また、わかりやすさの観点からもクラス名を利用する。
クラス名で、header-nav-list など、クラス名に”header”と入っていると、ヘッダーにある要素なんだな・・・というのがわかりやすくなる。
つまり・・・保守性が高くなるのでこうする！