デイトラweb制作初級編　DAY3

2022年3月28日 2022年6月7日

nakano

CSSを書くための準備

１．フォルダを作成

２．フォルダの中に「index.html」ファイル、「css」フォルダ、「img」フォルダを作成

３．「css」フォルダの中に「style.css」ファイルを作成

４．「img」フォルダの中に画像を入れる

<img src="http://book.com/img/novel.png">

このコードは絶対パスといい、ファイルがある場所を完全に指定する。（主に外部ファイルを読み込むとき）

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

Day3の演習で使ったこのコードは相対パスといい、編集中のファイルの位置から指定する。（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の環境構築では、知らない単語が多くて少し不安ですが、引き続き頑張りたいと思います！