デイトラweb制作初級編 DAY3

CSSを書くための準備
1.フォルダを作成
2.フォルダの中に「index.html」ファイル、「css」フォルダ、「img」フォルダを作成
3.「css」フォルダの中に「style.css」ファイルを作成
4.「img」フォルダの中に画像を入れる
絶対パスと相対パス
<img src="http://book.com/img/novel.png">
このコードは絶対パスといい、ファイルがある場所を完全に指定する。(主に外部ファイルを読み込むとき)
<link rel="stylesheet" href="./css/style.css">
Day3の演習で使ったこのコードは相対パスといい、編集中のファイルの位置から指定する。(CSSは基本的に相対パス)
※「./」はこのファイルと同じ階層、「../」は一つ上の階層という意味。
CSSのルール
h2 { color: red; }
・h2 = セレクタ 場所を指定する
・color = プロパティ スタイルの種類
・red = バリュー 具体的な内容
<h2 class="red-title">赤色のタイトル</h2>
<h2>タイトル</h2>
.red-title {
color: red;
}
・この場合は、class="red-title"の属性を持つ「赤色のタイトル」部分のみ赤色になる
・classをCSSで指定するときは、「.」を忘れない!
<div class="contents">
<p>あいうえお</p>
<div>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
</div>
.contents > p {
color: red;
}
・「>」で繋げて書くと、直属の子孫要素である「あいうえお」だけが指定される
・「>」がない場合は「あいうえお」「かきくけこ」「さしすせそ」の3つが指定される
HTMLはボックスとして存在している
内側から コンテンツ → padding → border → margin
・コンテンツ = 内容が表示される部分
・padding = 要素内の余白
・border = 要素の境界
・margin = 隣の要素との余白
まとめ
今回はCSSの構造やルールなど様々なことを学ぶことができました!
よく使うCSSプロパティの表とそれらの解説動画も添付されていて、わかりやすいなあと思いながら勉強してました。
DAY4の環境構築では、知らない単語が多くて少し不安ですが、引き続き頑張りたいと思います!