よく使うCSSプロパティ
よく使うCSSプロパティ
「よく使うCSSプロパティ」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。
概要
こんにちは。
このセクションでは、最もよく使われるCSSプロパティについて学びます。
これまでは、colorやfont-sizeなどの単純なプロパティを使って例を作成してきました。
Width Height
Height - Width
widthプロパティとheightプロパティを使って、要素の幅と高さを設定します。
ここでは、2つの点に注意が必要です。
- インライン型の要素にはwidthとheightを指定できません。
- 指定したwidthとheightの値は、デフォルトではmargin、padding、borderなどのほかのプロパティとは独立しています。また、要素の内側の領域にのみ適用されます。
上記の例外については、後で詳しく説明します。
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
幅と高さ 2
前の例では、widthとheightに固定値を割り当てました。しかし、割り当てられる値は固定された数値だけではありません。
ここでは、例のwidthにパーセント値を指定する方法を見てみましょう。
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
content-boxとborder-box
box-sizingプロパティのデフォルト値はcontent-boxです。
また、デフォルトでは、widthとheightの値はコンテンツのサイズを基準にします。
borderとpaddingの値は、widthとheightの値に加算されます。
ボックスの幅が100pxだとします。
このボックスにpaddingとして10px、borderとして20pxを追加すると、要素の合計幅は100px + 10px + 20px = 130pxになります。
max-width
max-widthプロパティを使うと、要素が取り得る最大幅を指定できます。
以下の例では、max-widthに100pxが指定されています。widthのデフォルト値はauto（要素が親要素の100%を占める）ですが、幅は100pxになり、コンテンツがボックスからはみ出しています。
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
テキストの装飾
text-decorationプロパティを使って、テキストの装飾を定義できます。
このプロパティは、例を使って確認するのが最も分かりやすいでしょう。プレビューでサンプルコードの出力を確認してください。
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
テキストの先頭に空白を入れたい場合があります。そのためにはtext-indentプロパティを使用します。
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
text-alignプロパティを使って、テキストの水平方向の配置を指定します。
HTMLの例を定義してみましょう。
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
font-familyスタイルを使って、テキストに使用するフォントの種類を指定します。
ここで知っておくべき重要な点がいくつかあります。
- 指定したフォントは、ユーザーのシステムに登録されている必要があります。そのため、Webセーフフォントと呼ばれるフォントのいずれかを使用する必要があります。
- カスタムフォントを使用する場合は、使用するフォントを外部依存関係としてheadタグの間に追加する必要があります。font-familyを追加するときは、第一候補と第二候補のfont-familyを決めておきます。
- ブラウザーがシステム内で第一候補のフォントを見つけられない場合は、第二候補のフォントをユーザーに表示します。
font-family 2
以下の例では、プライマリクラスにTimes New Romanフォントを指定しています。
それぞれセカンダリフォントとターシャリフォントとして、Timesとserifフォントを指定しています。
ブラウザーはまずTimes New Romanフォントを使用しようとします。このフォントがシステムにない場合は、次の候補が使用されます。
指定したフォントが利用できない場合、ブラウザーはデフォルトのフォントを使用します。
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
名前からもわかるように、使用するテキストのフォントスタイルを指定します。
それでは、例を使ってfont-styleプロパティを見てみましょう。
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>おめでとうございます
おめでとうございます 🎉
このセクションでは、最もよく使われるCSSプロパティを学びました。
次のセクションでは、CSS Marginについて学びます。
よくある質問
「よく使うCSSプロパティ」レッスンは無料ですか？
はい。「よく使うCSSプロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。
「よく使うCSSプロパティ」で何を学びますか？
よく使うCSSプロパティ ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「よく使うCSSプロパティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。