実践1でwebサイトの一部を作りましたがまだまだ完成させるには物足りないと思います。このようにサイトの一部ずつ勉強しながら作っていけば理解しやすく、完成した時の達成感が味わえると思います。
height・width(内容領域の高さ、幅)
width(ウィドゥス)はタグの幅で
height(ハイト)はタグの高さを指定できるものです。
width
<body>
<h1>Boll Boy</h1>
</body>
h1{
background-color: aqua;
width: 500px;
}
widthは指定しないと横幅いっぱいに表示されます。
height
h1{
background-color: aqua;
height: 500px;
}
font-family(文字のフォント)
font-famiy(フォントファミリー)は文字のフォントを変更できるプロパティです。
font-familyはいろいろ種類がありますが主に使うものを紹介します。
| font名 | 表示 |
| serif(セリフ) | 明朝体 |
| sans-serif(サンセリフ) | ゴシック体 |
| cursive(カーシヴ) | 筆記体 |
| fantasy(ファンタジー) | かわいい系の文字 |
<body>
<h1 class=”serif”>serif</h1>
<h1 class=”sans-serif”>sans-serif</h1>
<h1 class=”cursive”>cursive</h1>
<h1 class=”fantasy”>fantasy</h1>
</body>
.serif{
font-family: serif;
}
.sans-serif{
font-family: sans-serif;
}
.cursive{
font-family: cursive;
}
.fantasy{
font-family: fantasy;
}
font-weight(文字の太さ)
font-weight(フォントウェイト)は文字の太さを変更できます。
<body>
<p>フォント指定なし</p>
<p class=”bold”>フォント太字</p>
</body>
.bold{
font-weight: bold;
}
list-style(リストの種類を変更)
list-style(リストスタイル)はなにも指定しない場合にliタグでを文章の始めに黒点がつきます。その黒点をスタイル変更ができます。
<body>
<ul class=”none”>
<li>リストスタイル無し none</li>
</ul>
<ul class=”circle”>
<li>リストスタイル白丸 circle</li>
</ul>
<ul class=”square”>
<li>リストスタイル四角 square</li>
</ul>
</body>
.none{
list-style: none;
}
.circle{
list-style: circle;
}
.square{
list-style: square;
}
コメント