CSS基礎

# CSS基礎

```html:sample.html
<html>
<head>
<title>CSSの学習</title>
<meta charset="UTF-8">
<meta name="description" content="CSSの学習">
<meta name="viewport" content="width=device-width,initial-scale=1">



<!-- 1. CDN（Content Delivery Network）ネット上に公開されたJSやCSSなど。 -->
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">

<!-- 2. styleタグ -->
<style>
	/* 3. id を指定するときは #をつける */
	#id1 {
		color: blue;
	}

	/* 4. class を指定する場合、「.」をつける */
	.class1 {
		color: red;
	}

	.a1 {background: #ffd9bf; color: #ed6103; }


@media screen and (min-width: 1024px) { 
	/*　5. 画面サイズが1024pxからはここを読み込む　*/
	.media-query { 
		font-size: 30px 
	}
}

@media screen and (min-width: 320px) { 
	/*　6. 計算ができる、下は画面サイズを縮小させると文字が縮小する例　*/
	.calc { 
		font-size: calc(100vw / 30);
	}
}

</style>

</head>
<body>

<!-- 7. idは1ページに1つだけしか定義してはいけない -->
<div id="id1">idは1ページに1つだけしか定義してはいけない</div>

<br>

<!-- 8. classは1ページに複数定義してもよい -->
<div class="class1">classは1ページに複数定義してもよい</div>

<br>

<div class="class1">classは1ページに複数定義してもよい</div>

<br>

<!-- 9. フォントを指定 -->
<div style="font-family: 'Mansalva', cursive;">Google Fonts</div>

<br>

<div style="color: black">
・3パターンのstyle指定方法がある
<!-- 10. linkタグ -->
<p>1. linkタグ &lt;link href="http://x.com" rel="stylesheet"&gt;</p>
<!-- 11. styleタグ -->
<p>2. styleタグ &lt;style&gt; .id { color: red } &lt;/style&gt;</p>
<!-- 12. style属性を設定 -->
<p>3. style属性 style="color: red"</p>
</div>

<br>

<!-- 13. color: 文字色 -->
<div style="color: red">文字色 { color: red }</div>

<br>

<!-- 14. background-color: 背景色-->
<div style="background-color: #ffd9bf; color: #ed6103">背景色 { background-color: #ffd9b }</div>

<br>

<!-- 15. font-size: 文字サイズ-->
<div style="font-size: 20px">font-size: 20px</div>

<br>

<!-- 16. font-weight: 文字太さ-->
<div style="font-weight: bold">font-weight: bold</div>

<br>

<!-- 17. padding: 文字の上下左右の余白 -->
<div style="padding: 10px 10px 10px 10px" class="a1">padding 10px 10px 10px 10px</div>

<br>

<!-- 18. margin: 文字の周りにあるボーダー上下左右の余白 -->
<div style="margin: 10px 10px 10px 10px" class="a1">margin 10px 10px 10px 10px</div>

<br>

<!-- 19. border-radius: 角を丸める -->
<div style="border-radius: 5px; padding: 5px 50px" class="a1">border-radius: 5px;</div>

<br>

<!-- 20. display: flexをつけたFlexコンテナ(親要素)の中に、Flexアイテム(子要素)を入れると子要素が横に並ぶ -->
<div style="display: flex">
	<div class="a1">Flexアイテム</div>　
	<div class="a1">Flexアイテム</div>
</div>

<br>

<!-- 21. display: flex; justify-content: center; Flexアイテムを横の中央に配置 -->
<div style="display: flex; justify-content: center">
	<div class="a1">display: flex; justify-content: center</div>　
</div>

<br>

<!-- 22. display: flex; align-items: center; Flexアイテムを縦の中央に配置 -->
<div style="display: flex; align-items: center; height: 100px; background-color: cornsilk">
	<div class="a1">display: flex; align-items: center</div>　
</div>

<br>

<!-- 23. align-self: center; Flexアイテム自分自身を中央に配置 -->
<div style="display: flex; height: 100px; background-color: cornsilk">
	<div class="a1" style="align-self: center">align-self: center</div>　
</div>
	
<br>

<!-- 24. @media; メディアクエリブレイクポイントを判定できる。 -->
<div class="media-query">media-query</div>

<br>

<!-- 25. calc; cssで計算ができる -->
<div class="calc">calc</div>

</body>
</html>
```