#CSSとは??
前回マークアップしたHTMLがブラウザに表示される文字ですが、それだけでは味気ないですよね??
ここで使うのがCSSです!😊
お化粧みたいな感じですね!😳
それでは書き方を見ていきましょう👍
##CSSの記述方法
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>CSSの書き方</title>
</head>
<body>
<section>
<h1>CSSについて</h1>
</section>
</body>
</html>
h1 {
color: black;
font-size: 40px;
background-color: red;
}
と記述します!
ポイントは、HTMLのheadタグの中に リンクタグをかき忘れないことです👍
そして、CSSフォルダを作り、その中にCSSファイルを作ることを忘れないでください👌
これをブラウザに表示するとこうなります!
↓
ちょ、h1長くねと思った方、HTMLにはインライン要素とブロック要素がありましたね😁
https://qiita.com/akari_0618/items/f3b6892932cb6080c905
その前の記事を御覧ください!
長すぎだよと思った場合は、こう入力して幅を指定してしまいましょう!
h1 {
color: black;
font-size: 40px;
background-color: red;
width: 40px;
height: 65px;
}
(width)がついかされていますね!
40%は適当にセットしましたが指定の仕方には3つほどあります。
①auto
初期値。つまり最初の画面のまま表示されます。
②%
こちらは親要素の幅次第で変わります。
③px
こちらは親要素に関係なく指定できます。
ちなみに当たり前ですが、親要素より大きくは指定できません。
そしてくどいようですが、インライン要素には幅指定できませんので反応しない場合は要素の確認をしてみましょう☺️
(height)も追加されていますね!
こちらは高さの設定になります。ここでは背景カラーの高さの設定になります。
高さ指定には主にピクセル(px)で指定します。
↓
こうなりましたらOKです👍
文字を真ん中にしたいので次はそちらをやっていきたいと思います!
おそらく初心者がつまずくpaddingとmarginですね🥲
(大丈夫、私もだから)