課題の目的
HTMLの表組みタグを使って、CSSのプロパティを整理した一覧表を作成してください。
この課題では、CSSでよく使うプロパティを「名前」「意味」「記述例」「用途」に分けて見やすくまとめます。
表を使って情報を整理する力と、HTMLの基本タグを正しく使う力を身につけることが目的です。
課題内容
HTMLだけを使って、CSSのプロパティをまとめた表を1つ作成してください。
表のタイトルは「CSSプロパティ一覧表」としてください。
表には以下の4項目を入れてください。
-
プロパティ名
-
意味
-
記述例
-
用途
必ず入れるプロパティ
以下のプロパティを表に入れてください。
-
color
-
font-size
-
font-weight
-
line-height
-
text-align
-
background-color
-
width
-
height
-
margin
-
padding
-
border
-
border-radius
-
display
-
justify-content
-
align-items
-
flex-direction
-
box-shadow
-
overflow
-
max-width
-
min-height
条件
-
table タグを使うこと
-
tr th td を使うこと
-
表の上に caption を入れること
-
4列の表にすること
-
15行以上書くこと
-
HTMLの基本構造を書くこと
-
文字は日本語で分かりやすく書くこと
提出条件
提出するファイル名は
css-table.html
としてください。
提出はスラッグ
次回も使うので削除しないこと
評価ポイント
-
HTMLの基本構造が書けているか
-
表タグを正しく使えているか
-
情報が整理されているか
-
CSSプロパティの意味が正しく書けているか
-
記述例が正しいか
-
見やすい表になっているか
＜このコードで作成して下さい。＞
この形を参考にして作成してください。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>CSSプロパティ一覧表</title>
</head>
<body>
<h1>CSSプロパティ一覧表</h1>
<table border=”1″>
<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>