HTMLとCSSでサイトを作っていると、よく使うプロパティがある程度決まってきます。

今回は、下の表の19種類のCSSプロパティをご紹介します。

目次

頻出CSSプロパティ

HTMLとCSSでサイトを作っていると、よく使うプロパティがある程度決まってきます。

今回は、下の表の19種類のCSSプロパティをご紹介します。

カテゴリプロパティできること
文字color文字の色を指定する
font-size文字の大きさを指定する
font-family文字の種類を指定する
font-weight文字の太さを指定する
text-decorationテキストを装飾する
テキストline-height行間を設定する
text-align行の揃え位置を指定する
背景background背景全般の指定をする
background-color背景の色を指定する
横幅と高さwidth要素の幅を指定する
height要素の高さを指定する
余白margin外側の余白を指定する
padding内側の余白を指定する
枠線borderボーダーの色や太さを指定する
border-radiusボーダーの角を丸める
位置position要素の位置を指定する
z-index要素の重なる順序を指定する
表示display要素の表示形式を指定する
横並びfloat要素を左か右に寄せて配置する

文字に関するCSSプロパティ

color

colorは、文字の色を指定するプロパティです。

色の値については、「red」などの色の名前やrgb関数、「#000000」のような16進数のカラーコードで指定します。

1color: red;
colorの説明

font-size

font-sizeは、文字の大きさを指定するプロパティです。

単位は「px」や「%」、「em」などがあります。

1font-size: 20px;
font-sizeの説明

font-family

font-familyは、文字の種類を指定するプロパティです。

ユーザーの環境に合わせて、先に書いた順にフォントが適用されます。

12font-family: sans-serif;font-family: serif;
font-familyの説明

font-weight

font-weightは、文字の太さを指定するプロパティです。

「normal」などのキーワードで指定できる他、100刻みの数値で指定することもできます。

12font-weight: normal;font-weight: bold;
font-weightの説明

text-decoration

text-decorationは、テキストを装飾するプロパティです。

下線や打ち消し線などをつけることができます。

1234text-decoration: none;text-decoration: underline;text-decoration: overline;text-decoration: line-through;
text-decorationの説明

テキストに関するCSSプロパティ

line-height

line-heightは、行間を設定するプロパティです。

例えば「1.5」と指定すると、フォントサイズにその数値を掛けた値が行の高さになります。

この場合、「150%」や「1.5em」と書くこともできます。

123line-height: 1;line-height: 1.5;line-height: 2;
line-heightの説明

text-align

text-alignは、行の揃え位置を指定するプロパティです。

「left(左揃え)」「center(中央揃え)」「right(右揃え)」などを設定することで、位置を指定します。

123text-align: left;text-align: center;text-align: right;
text-alignの説明

背景に関するCSSプロパティ

background

backgroundは、背景全般の指定をするプロパティです。

背景色や、背景画像について(画像のURL、繰り返し、スクロール、位置、大きさなど)を指定することができます。

12background: #F4A83D; /* 背景色を指定 */background: url(“img/hawaii.jpg”) no-repeat left / 100% auto; /* 背景画像を設定 */

    背景画像の設定については、「画像のURL、繰り返し、表示位置、大きさ」の順に指定しています。表示位置と大きさの間には「/(半角スラッシュ)」を入れます。

backgroundの説明

background-color

background-colorは、背景の色を指定するプロパティです。

1background-color: #EF93B6;
background-colorの説明

横幅と高さに関するCSSプロパティ

widthとheight

widthは要素の幅、heightは要素の高さを指定するプロパティです。

単位は「px」や「%」などがあります。「%」で指定した場合、親要素に対する割合として計算されて幅や高さが決まります。

12width: 300px;height: 200px;


枠線に関するCSSプロパティ

border

borderは、ボーダーの太さ・スタイル・色をまとめて指定するプロパティです。

border-width、border-style、border-colorの3つの内、設定したいプロパティの値を指定します。

下の例だと、「3px」で「#0081cc色」の「1本線」を引く、という意味になります。

1border: 3px solid #0081cc;
borderの説明

border-radius

border-radiusは、ボーダーの角を丸めるプロパティです。

数値が大きくなるほど角の丸みが大きくなります。

1border-radius: 5px;
border-radiusの説明

余白に関するCSSプロパティ

marginとpadding

marginはborderの外側の余白、paddingは内側の余白を指定するプロパティです。

marginは隣り合う要素との距離を調整して、レイアウトを整えることができます。

paddingは要素の中の余白を広げて、要素の見え方を整えることができます。

12margin: 100px;padding: 50px;
margin-paddingの説明

位置に関するCSSプロパティ

position

positionは、要素の位置を指定するプロパティです。

よく使うのはrelativeとabsoluteという値で、上下左右の方向からの距離をセットで指定します。

relativeを指定すると、その要素の本来の表示位置を基準にして位置が決まります。

absoluteを指定すると、relativeを指定した親要素を基準として位置が決まります。(relativeを指定した親要素がない場合、画面上部を基準にします。)

relativeの例

123position: relative;top: 50px;left: 50px;
relativeの説明

absoluteの例

1234567/* 親要素 */position: relative;/* 子要素 */position: absolute;top: 50px;left: 50px;
absoluteの説明

z-index

z-indexは、要素の重なる順序を指定するプロパティです。

0を基準として、数値が大きいほど上に重なっていきます。

1234z-index: 1;z-index: 2;z-index: 3;z-index: 4;
z-indexの説明

表示に関するCSSプロパティ

display

displayは、要素の表示形式を指定するプロパティです。

例えばインライン要素に高さや幅を指定したい場合によく使います。

例を見てみましょう。

この例では、span要素にheightとwidthを設定しましたが、適用されていません。

これは、span要素がインライン要素のため高さや幅が指定できないからです。

displayの説明

インライン要素に高さや幅を指定したい場合、display: block; またはdisplay: inline-block;を指定すると、高さや幅を持たせることができます。

1display: block;
displayの説明

横並びに関するCSSプロパティ

float

floatは、要素を左か右に寄せて配置するプロパティです。

説明してもわかりづらいので例を見てみましょう。

まず、「A」と「B」という2つのボックスが縦に並んでいます。

floatの説明

これをA→Bの順に左から並べたい場合は、AとBにfloat: left;を指定します。

12/* AとBにそれぞれ指定 */float: left;
floatの説明

右から並べたい場合はfloat: right;を指定します。

12/* AとBにそれぞれ指定 */float: right;
floatの説明

Aを左寄せ、Bを右寄せにしたい場合は、

12345/* A */float: left;/* B */float: right;
floatの説明

このように書きます。

チェックテスト

下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP