そしてCSS
CSSは飾り付けみたいな感じだからすぐ反映されて体験が簡単だけど
デザイン力を磨いてきたことのない自分にとっては沼中の沼
ここも基礎の基礎で切り上げて、
あとの素敵なデザインは、世の中に溢れる天才センス先生方に任せます。
CSSはファイルを作成したらHTMLのhead要素から呼び込みます
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style3-3.css"> ※ここに記述
</head>
そして、HTMLファイルのbody要素の中の要素を指定して、cssファイルでその要素にどんな装飾を加えるか記述していきます。
以下はp要素の文字色を赤に指定しています
p {
color: red; ※文字色を赤にする
}
cssでは、まず装飾したいhtmlのp要素を上記のように指定しますが、
上記の例では、このpのことを『セレクタ』、
何を装飾にするのかのcolorのことを『プロパティ』、
どう装飾するのかのredのことを『値』 といいます。
また、上記だとファイル内のすべてのp要素の文字色が赤になってしまうので、変更する要素だけを指定する方法もあります
これにはclass属性とclassセレクタ、もしくはid属性とidセレクタを使用します。
【class属性とclassセレクタ】
まずhtmlファイルで変更したい一部のpをclass属性として指定
<p>
１つ目の段落
</p>
<p class="change">
2つ目の段落
</p>
上記のpが『属性』、changeが『属性値』
続いてcssファイルで指定したclass属性を青色に装飾
.change {
color: blue;
}
class属性をセレクタに指定する際は、セレクタ名の前に.が付きます
【id属性とidセレクタ】
id属性は1つのページ内で、同じid名を複数のHTML要素に付与しないという慣例が存在するため、ここだけ変更したい！というときに使う感じです。
<p id="change">
テキスト
</p>
id属性名はchangeで指定
#change {
color: blue;
}
idセレクタ名の前には#が付きます。
【部分装飾】
要素全体ではなく、テキスト等に部分的に装飾をすることもできます。
それが『span要素』。全然使いこなせてません
<p>
テキスト<span class="bigfont">装飾</span>テキスト
</p>
.blue {
fontsize: 20px;
}
こんな感じでテキスト途中の装飾の文字だけ大きくしたりできます。
装飾にはテキストの色、サイズ、背景色、表示位置、のほか
画像だったりなんか色々できます
この辺がこだわりだすと抜けられない沼。。
でもデザイナーさんもですがフロントサイドではめっちゃ大事なものなのはわかるし、日々便利なものが作られている感じするので、どこで切り上げていくのかが重要だと思いました