SukeBlog

プログラマーSukeによるブログ

【HTML/CSS】No.5 よく使用するCSSプロパティ

【HTML/CSS】No.5 よく使用するCSSプロパティ
この記事は約7分で読めます
CSSプロパティはたくさんありますので、本記事では、よく使用するものに絞って紹介します。
全てを紹介するのは難しいため、必要であれば検索して調べてください。

プロパティについても、全部覚える必要はありません。
難しいプロパティについては、少しずつ慣れていけば良いと思います。

color

文字の色を変更します。
色の指定には、色の名前で指定する方法と、16進数で指定する方法があります。
色のより細かい調整をするには、16進数で指定する方法を使います。
16進数は、色の値を示すのによく使用されます。
色の値は、RGB(Red、Green、Blue)で表すことができ、16進数で表現すると、下記のようになります。
# 123456
1〜2桁目: 赤色を示す
3〜4桁目: 緑色を示す
5〜6桁目: 青色を示す

16進数については、脱線してしまうのでここでは詳しく説明しませんが、気になる方は「16進数とは」で検索してみてください。
また、どの色がどんな16進数で表現できるかは、覚える必要はありません。
いろいろなツールを使用すれば、簡単に調べることができます。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p class='color_red'>こんにちは</p>
<p>さようなら</p>
</body>
</html>
.color_red {
    color: red;
    /* color: #ff0000; でもOK */
}

background

背景色を設定します。
色の指定方法は、colorプロパティと同じです。
.color_red {
    background: red;
}

border

枠線を設定します。
cssの書き方は、太さ、線の種類、色をスペース区切りで書きます。
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div>divの中身</div>
</body>
</html>
div {
	border: 1px solid red;
}

marginとpadding

marginとpaddingは、どちらも空白を調整するときに使用します。
違いは、borderの外側の空白(margin)か、内側の空白か(padding)の違いです。

margin

borderの外側の空白を設定します。
下記の例では、わかりやすくするためにborderも設定しています。
borderの外側にスペースができているのがわかります。
div {
    border: 1px solid red;
    margin: 50px;
}
marginプロパティは、上下左右の空白に同じ値を設定します。
上下左右に別々の値を設定したい場合は、margin-top、margin-bottom、margin-left、margin-rightというプロパティを使用します。
それぞれ順番に上、下、左、右の空白を設定できます。

padding

borderの内側の空白を設定します。
borderの内側にスペースができているのがわかります。
div {
    border: 1px solid red;
    padding: 50px;
}
marginプロパティと同様に、paddingプロパティは、上下左右の空白に同じ値を設定します。
上下左右に別々の値を設定したい場合は、padding-top、padding-bottom、padding-left、padding-rightというプロパティを使用します。
それぞれ順番に上、下、左、右の空白を設定できます。

text-align

文字を左寄せ、中央寄せ、右寄せに設定できます。
div {
    border: 1px solid red;
    text-align: center;
}

縦方向に中央寄せしたい場合

縦方向に中央寄せするには、下記の記事を参考にしてみてください。
テキストの縦方向の中央揃えについて

display

displayプロパティには色々な値を設定することができるのですが、私がよく使うのはnone(要素を非表示にする)です。
特にJavaScriptと合わせて使うことが多いです(ボタンが押されたら、ある要素を非表示とするなど)。
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <p class='p1'>p1の中身</div>
    <p class='p2'>p2の中身</div>
</body>
</html>
.p1 {
    display: none;
}