備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。
ブロックレベル要素とインライン要素
ブロックレベル要素
親要素の幅全体を占有して前後に改行を生じさせる要素。
例）<div>要素、<p>要素、<h1>～<h6>要素、<ol>要素、<ul>要素、<li>要素
インライン要素
テキストの一部として扱われて改行を伴わずに横に並ぶ要素。
例）<span>要素、<a>要素、<img>要素
インライン要素の中にブロックレベル要素を含めることはできない。
CSSの構文
要素で指定する場合
div {
color: brown;
font-size: 25px;
}
id属性で指定する場合
#user_id_5 {
color: brown;
font-size: 25px;
}
class属性で指定する場合
.message {
color: brown;
font-size: 25px;
}
要素とid属性で指定する場合
div#user_id_5 {
color: brown;
font-size: 25px;
}
要素とclass属性で指定する場合
div.message {
color: brown;
font-size: 25px;
}
CSS MDNでプロパティの一覧を確認することができる。
CSSの適用方法
各要素のstyle属性に直接CSSを記述する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 各要素のstyle属性に直接CSSを記述する。-->
<div class="name" style="color: brown; font-size: 25px;">山田太郎</div>
<div class="name" style="color: brown; font-size: 25px;">山田花子</div>
</body>
</html>
HTMLの<head>要素内に<style>タグを使用してCSSを記述する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- HTMLの<head>要素内に<style>タグを使用してCSSを記述する。-->
<style type="text/css">
div.name {
color: brown;
font-size: 25px;
}
</style>
</head>
<body>
<div class="name">山田太郎</div>
<div class="name">山田花子</div>
</body>
</html>
CSSファイルを作成してHTMLの<head>要素内で<link>タグを使用して読み込む。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- HTMLの<head>要素内で<link>タグを使用してCSSファイルを読み込む。-->
<link rel="stylesheet" href="/css/sample.css">
</head>
<body>
<div class="name">山田太郎</div>
<div class="name">山田花子</div>
</body>
</html>
sample.css
div.name {
color: brown;
font-size: 25px;
}
CSSのボックスモデル
content
要素の内部に配置された実際に表示されるデータ（テキストや画像など）。
content（CSS MDN）
border
要素の境界線を設定する。幅、種類、色を指定可能である。
border（CSS MDN）
margin
要素の外側の余白を設定する。他の要素との間隔を調整するために使用する。
margin（CSS MDN）
padding
要素の内側の余白を設定する。要素のコンテンツ（content）と境界線（border）の間の距離を設定するために使用する。
padding（CSS MDN）
フレックスボックス
フレックスボックスとは
アイテムを行または列に並べるための1次元のレイアウト方法。
サンプルコード
要素を横並びに配置する。
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
.container {
display: flex;
}
display: flex;を適用した要素（フレックスコンテナ）の直接の子要素（フレックスアイテム）が横並びになる。フレックスコンテナ自体が横並びになるわけではない。
display（CSS MDN）
詳細は下記を参照する。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet