CSS1日目！
いやー、Xを見ていた人はわかると思いますが、コロナになって大変でした。こんな時期になるなんて、、、、
まぁ、それは置いておいて、CSSの学習を進めていきます。
CSSとは何か。
CSSはHTMLで書いたものを装飾したり、動きを付けることができる言語でHTMLとセットで扱われます。
基本的な構造
「タグ名」or「.class名」でHTMLの範囲を指定し、中カッコ{ }で囲みます。
その中に、修飾を指定し、その値も記載していきます。
簡単な例ととして、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<div class="example">Hello World</div>
</body>
</html>header{
font-size: 24px;
}
.example{
font-size: 5px;
}上がHTMLで、下がCSSを記載しています。
CSSはHTMLのようにタグの記載はありません。
このHTML/CSSの出力結果は以下のようになります。
これで、フォントのサイズが大きくなっていることが確認ができました。
正確な言葉で表現すると、今回「header」と「.example」をセレクターといいます。
その中に書いてある「font-size: 24px;」をプロパティといいます。
代表的プロパティ
プロパティは多数あります。
よく使用されるものをリストアップします。
※ChatGPT君に活躍してもらいます。
display: 要素の表示方法を指定します（例: block、inline、flex）。
position: 要素の配置方法を指定します（例: static、relative、absolute、fixed）。
z-index: 要素の重なり順を制御します。
float: 要素を左または右に浮動させます。
width: 要素の幅を指定します。
height: 要素の高さを指定します。
margin: 要素の外側の余白を指定します。
padding: 要素の内側の余白を指定します。
border: 要素の境界線のスタイル、幅、色を指定します。
background: 要素の背景色や画像を指定します。
color: テキストの色を指定します。
font-size: テキストのサイズを指定します。
font-family: テキストのフォントを指定します。
font-weight: テキストの太さを指定します。
text-align: テキストの水平方向の配置を指定します。
line-height: 行の高さを指定します。
overflow: 要素の内容が表示領域を超えた場合の表示方法を指定します。
cursor: マウスカーソルの形状を指定します。
box-sizing: ボックスのサイズの計算方法を指定します。
flex: Flexboxレイアウトを使用する際に、フレックスアイテムの振る舞いを指定します。
明日から少しずつ解説を付けていきます。
復習！！
CSSはHTMLとセットとして扱われる言語でHTMLに装飾を行う役割があります。
基本形は
タグ｛
プロパティ : 値 ;
｝
を基本形として書いていく。
この記事が気に入ったらサポートをしてみませんか？