CSSは、HTMLの見た目を調整するためのファイルです。CSSについては、ごろうはBootstrapから入ったので基本をあまりしらないままだったので、今回はいいきっかけになります。
CSSについて基本を覚える
cssを記載する方法は、何やら３パターンあるらしいけど、使うのはＣＳＳ用ファイルを作ってそれを読み込みする方法しか一般的に使われたないとのこと。
なら、使われるものだけ覚えたらいいと判断！
ファイル名は、なんでもよくて、style.cssとかcommon.css とかを見ることが多いかなぁ。って思います。
ことCSSファイルをHTMLファイルで読み込みすることで、見た目を調整していくことができる。
HTMLファイルからCSSファイルを読み込みする
外部ファイルを読み込みするのは、linkなのでこれを使って読み込みをします。これは、Webブラウザで見ている人に知って欲しいというより、コンピューターに見た目の調整は、このファイル見てね！ってことを伝えたいだけなので、Headタグ内で読み込みします。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ここで読み込み -->
<link rel="stylesheet" href="./style.css">
</head>これで読み込み完了です。
見た目を変更してみる！
では、見た目を変更して楽しんじゃいましょう！
css ファイルにbodyタグ内の背景をアクア色に変更してね！って書いてみます。
body {
background-color: aqua;
}ブラウザで確認すると、背景色が変わっています。おー、これで変えられるだ。簡単ですよね！
CSSの書き方の用語を確認
body（セレクタ） {
background-color: aqua;
}セレクタの指定の仕方は、タグを指定するときは、タグ名を記載する。
クラス名は、. ＋ class名 で指定することを覚えておくといいです。
あとは、id を指定するときは、# ＋ id名 で指定します。
他にもあるみたいですが、それは都度調べながらやるので対応していけると思います。
body {
background-color: aqua;
}
.classname {
background-color: aqua;
}
#idname {
background-color: aqua;
}詳細に指定した方が優先される
HTMLの立場になった時に、自分に適用されるCSSが複数あった場合にどれを優先して反映するかを理解が必要です。
っていっても、ごろうも何となくで理解していてあまり困ったことがないので、イメージで覚えておけばいいかなって思います。
詳細に指定された方が優先されるんですが、以下の場合どれが詳細として判定されるのか確認していきましょう。
<body>
<div>Hello！World！！！</div>
<div class="classname">Hello！World！！！</div>
<div id="idname">Hello！World！！！</div>
</body>body {
background-color: aqua;
}
div {
background-color: brown;
}
.classname {
background-color: blue;
}
#idname {
background-color: red;
}
一番上は、divタブに対してのCSSが適用されていますが、２列目３列目は、CLASS名やIDを指定されているCSSのカラーが適用されているのが分かります。
大きなくくりを指定したものより、詳細な情報を指定した方が優先されるということです。
後で書いた方が優先される
詳細度が同じで指定された場合はどうなるのか確認してみましょう。
body {
background-color: aqua;
}
div {
background-color: brown;
}
.classname {
background-color: blue;
}
#idname {
background-color: red;
}
.classname {
background-color: black;
}.classnameが２回登場しています。この時、どちらが優先されるか見てみましょう。
背景が黒くなったので、あとで書いた方が優先されていることがわかります。プログラムの基本は、上から順番に処理がされるということで、同じ詳細レベルの場合は、上書きされて後が優先されるということです。
Chromeの開発モード確認する方法
開発者でない限り使わない画面でCSSの適用されている状況を確認していきましょう。
Chromeを開いて「F12」を押下するか、右クリックのメニューから「検証」を選択すると下の画像のような画面が表示することができます。
これは、Webアプリを作ったりホームページを作成する人にとっては、当たり前のように使う画面ですので、是非とも覚えておいてください。
この画面では、どのCSSが適用されていたけど、上書きされたかも確認できるので、自分が思ってない表示になった時に調査するときに便利できると思います。
コメント