条件
以下の条件を守って作成してください。
HTMLの条件
-
HTML5の基本構造を書くこと
CSSの条件
-
CSSは style.css に書くこと
【html】
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSSプロパティ一覧表</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>CSSプロパティ一覧表</h1>
<table>
<caption>よく使うCSSプロパティまとめ</caption>
<tr>
<th>プロパティ名</th>
<th>意味</th>
<th>記述例</th>
<th>用途</th>
</tr>
<tr>
<td>color</td>
<td>文字の色を変える</td>
<td>color: red;</td>
<td>文章の文字色を設定するときに使う</td>
</tr>
<tr>
<td>font-size</td>
<td>文字の大きさを変える</td>
<td>font-size: 16px;</td>
<td>見出しや本文の文字サイズを調整するときに使う</td>
</tr>
<tr>
<td>font-weight</td>
<td>文字の太さを変える</td>
<td>font-weight: bold;</td>
<td>見出しや強調したい文字に使う</td>
</tr>
<tr>
<td>line-height</td>
<td>行の高さを変える</td>
<td>line-height: 1.8;</td>
<td>文章を読みやすくするときに使う</td>
</tr>
<tr>
<td>text-align</td>
<td>文字の位置をそろえる</td>
<td>text-align: center;</td>
<td>中央寄せや右寄せにしたいときに使う</td>
</tr>
<tr>
<td>background-color</td>
<td>背景色を変える</td>
<td>background-color: yellow;</td>
<td>見出しやボックスの背景を変えるときに使う</td>
</tr>
<tr>
<td>width</td>
<td>横幅を指定する</td>
<td>width: 300px;</td>
<td>ボックスや画像の横幅を決めるときに使う</td>
</tr>
<tr>
<td>height</td>
<td>高さを指定する</td>
<td>height: 200px;</td>
<td>ボックスや画像の高さを決めるときに使う</td>
</tr>
<tr>
<td>margin</td>
<td>外側の余白を作る</td>
<td>margin: 20px;</td>
<td>要素同士の間をあけるときに使う</td>
</tr>
<tr>
<td>padding</td>
<td>内側の余白を作る</td>
<td>padding: 15px;</td>
<td>文字と枠の間をあけるときに使う</td>
</tr>
<tr>
<td>border</td>
<td>枠線をつける</td>
<td>border: 1px solid black;</td>
<td>表やボックスに線をつけるときに使う</td>
</tr>
<tr>
<td>border-radius</td>
<td>角を丸くする</td>
<td>border-radius: 10px;</td>
<td>ボタンやカードの角を丸くしたいときに使う</td>
</tr>
<tr>
<td>display</td>
<td>表示方法を変える</td>
<td>display: flex;</td>
<td>横並びやレイアウト調整に使う</td>
</tr>
<tr>
<td>justify-content</td>
<td>横方向の並び方を変える</td>
<td>justify-content: center;</td>
<td>flexで中央寄せにするときに使う</td>
</tr>
<tr>
<td>align-items</td>
<td>縦方向の位置をそろえる</td>
<td>align-items: center;</td>
<td>flexで上下中央にそろえるときに使う</td>
</tr>
<tr>
<td>flex-direction</td>
<td>並ぶ向きを変える</td>
<td>flex-direction: column;</td>
<td>縦並び・横並びを切り替えるときに使う</td>
</tr>
<tr>
<td>box-shadow</td>
<td>影をつける</td>
<td>box-shadow: 0 0 10px gray;</td>
<td>ボックスを浮かせて見せたいときに使う</td>
</tr>
<tr>
<td>overflow</td>
<td>はみ出した部分を調整する</td>
<td>overflow: hidden;</td>
<td>内容が枠から出たときに使う</td>
</tr>
<tr>
<td>max-width</td>
<td>最大の横幅を決める</td>
<td>max-width: 1000px;</td>
<td>大きくなりすぎないようにするときに使う</td>
</tr>
<tr>
<td>min-height</td>
<td>最小の高さを決める</td>
<td>min-height: 200px;</td>
<td>高さを最低限そろえたいときに使う</td>
</tr>
</table>
</body>
</html>
【CSS】
body {
font-family: sans-serif;
background-color: #f9f9f9;
margin: 30px;
color: #333;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
}
caption {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
th,
td {
border: 1px solid #333;
padding: 10px;
text-align: left;
}
th {
background-color: #e6f0ff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}