デイトラ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の環境構築では、知らない単語が多くて少し不安ですが、引き続き頑張りたいと思います!

コメントを残す

メールアドレスが公開されることはありません。