よく使うCSSのプロパティと使い方を学ぼう

今回はよく使うCSSのプロパティについて解説をしていきます。

HTMLの書き方を覚えたあとは、HTMLにどのようなスタイル(装飾)を与えることができるか覚えていきましょう。

実務でよく使用するプロパティ

CSSのプロパティは数多く存在します。

その中でも、実務でよく使用するCSSプロパティについて一緒に確認していきましょう。

color

colorプロパティは、テキストの文字色を指定することができます。

値には色を指定して使用します。

CSSでは、次の4種類の形式で色を指定することができます。他のプロパティでも色の指定を行うことがあるので、覚えておきましょう。

CSSでの色の指定

キーワード

「black」「white」「red」「blue」など、色名を直接指定する方法。

rgb

「red」「green」「blue」の３つの値を0〜255の数値で指定する方法。

rgba

rgbの値に４つ目の値に「alpha値」を指定する方法。

alpha値は、不透明度を表し、「0〜1」の数値で指定する。50％の不透明度にしたければ「0.5」と数値を指定する。不透明度が1(不透明)の場合は省略可能。

HEX値(カラーコード)

#を書いた後に、「red」「green」「blue」の値を16進数(0〜ff)で指定する方法。

alpha値を追加することも可能。「00~ff」の数値を指定する。100%の不透明度である1.0はffで指定する。

それぞれの値が同一の文字の場合、1文字に省略可能。例.「#ffffff」→「#fff」

colorプロパティの記述例

.example{
 color: red;
 color: rgb(255, 0, 0);
 color: #ff0000;
}

4通りすべてが同じ赤色を示します。

font-size

font-sizeプロパティは、フォントの大きさを指定します。

値は、「数値＋単位」で指定することができます。

CSSで指定する単位

CSSの値で数値を入力する際には、単位を付けます。

ここで、CSSを記述する際によく使われる単位について確認しておきましょう。

font-sizeプロパティの記述例

.example{
 font-size: 16px;
}

font-family

font-familyプロパティは、フォントの種類を指定することができます。

「sans-serif(ゴシック系)」「serif(明朝系)」「monospace(等幅フォント)」と系統・種類、様々なフォントがあります。

フォントの種類はwebサイトのデザインの雰囲気や見やすさに関わる部分なので、調節が必要です。

font-familyプロパティの記述例

.example{
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

• フォント名動詞の間を「，(カンマ)」で区切って記述する
• 間に半角スペースを含むフォント名の場合は「’’(クオーテーション)」で囲む
• 左側に書かれたものが優先的に表示されるため、優先度の高い順に記述していく

font-familyの注意点

ユーザーが使用するPCのOSの違いによって、指定したフォントが存在しない場合があります。

例えば、Macにしかないフォントを指定した場合には、windowsではwebページでは表示できません。

ですので、基本的にフォントは複数指定し、ユーザーが閲覧するPCのフォントが出るように調節を行います。

font-weight

font-weightプロパティは、フォントの太さを指定することができます。

値の初期値は「normal」で、「bold」はよく使用されます。

フォントの種類にもよりますが、数値での指定も可能で、100〜900、100単位ずつの9段階で変化させることができます。値が700以上でboldになります。

font-weightプロパティの記述例

.example{
 font-weight: bold;
}

line-height

line-heightプロパティは、行間(行の高さ)を指定することができます。

指定の方法は、主に2パターンあります。

数値 ＋ pxで指定

決まった数値をpx単位で指定します。

数値 ＋ em , %　または　単位なし で指定

文字の高さ(フォントサイズ)に応じて行の高さを調整してくれます。

フォントサイズ20pxの場合、line-height: 2; で40pxに相当します。

line-heightプロパティの記述例

.example{
 line-height: 2;
}

letter-spacing

letter-spacingプロパティは、文字同士の間隔を指定することができます。

初期値は「normal」で、letter-spacing: 0; の状態です。

pxでの指定も可能ですが、emを用いることがほとんどです。フォントサイズに応じて字間を変化させてくれます。

letter-spacingプロパティの記述例

.example{
 letter-spacing: 0.5em;
}

text-align

text-alignプロパティは、インライン要素(文字や画像)に対して水平方向の揃え方を指定します。

text-alignプロパティの記述例

.example{
 text-align: center;
}

width

widthプロパティは、要素の横幅を指定します。

初期値は「auto」です。CSSでの指定がない限り要素の幅は自動で決まります。

単位には「px」や「％」、「vw(view width)」「vh(view heigth)」などを使用します。

widthプロパティの記述例

.example{
 width: 50%;
}

height

heightプロパティは、要素の縦幅(高さ)を指定します。

初期値は「auto」です。CSSでの指定がない限り要素の幅は自動で決まります。

単位には「px」や「％」、「vw(view width)」「vh(view heigth)」などを使用します。

heightプロパティの記述例

.example{
 height: 100vh;
}

width・heightプロパティの注意点

インライン要素(aタグやspanタグなど)にはwidth・heightの指定ができません。

width・heightの指定をしたい場合には、display: block;またはdisplay: inline-block;を予め指定しておく必要があります。

padding

paddingプロパティは、要素の「内側」の余白を指定できます。

要素自体の大きさを変えるものがwidthとheightでしたが、要素自体の大きさはあまり変えずに、自身の領域を広げたい時にはpaddingを使用します。

値は、「数値 ＋ 単位」で記述し、単位には「px」「％」などを使用します。

paddingのショートハンドの指定方法

paddingプロパティの指定の方法によって、コードを書く量を省略することができます。

それぞれの記述の方法を確認していきましょう。

一部のみのpaddingの指定方法

paddingプロパティは、指定したい方向のみを記述する方法があるので、こちらも確認しておきましょう。

paddingプロパティの記述例

.example{
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 30px;
 padding-left: 40px;
}

次のように記述することで、marginを上下左右に一括で指定することが可能です。

.example{
 padding: 10px 20px 30px 40px;
}

border

borderプロパティは、要素の周りに線をつけることができます。

borderに関するプロパティ

指定できるプロパティは以下の通りです。

borderプロパティの記述例

.example{
 border-width: 2px;
 border-style: solid;
 border-color: gray;
}

borderプロパティのショートハンド

次のような書き方で、上記のborderに関するプロパティを、一括で指定することが可能です。

.example{
 border: 2px solid gray;
}

一部のみのborderの指定方法

borderプロパティもpaddingプロパティと同様に、一部のみに指定することが可能です。

border-radius

border-radiusで、要素の4つ角に丸みをつけることができます。

単位には「px」や「％」を使用します。

border-radiusプロパティの記述例

.example{
 border-radius: 10px;
}

4つ角に半径10px分の丸みがつきます。

次のように記述することで、4つの角にそれぞれ別の大きさの丸みを付けることもできます。

.example{
 border-radius: 10px 20px 30px 40px;
}

始めの値から、時計回りで左上→右上→右下→左下という順で指定されていきます。

border-radiusプロパティので正円を作る

正方形の要素に対して、border-radius: 50%;と記述することで正円を作ることが可能です。

.example{
 width: 100px;
 height: 100px;
 border-radius: 50%;
}

margin

marginプロパティは、要素の「外側」の余白を指定することができます。

隣の要素と距離を取りたい場合や中央寄せをする際に使用します。

値は、「数値 ＋ 単位」で記述し、単位には「px」「％」などを使用します。

marginのショートハンドの指定方法

paddingプロパティと同様に、余白の指定の方法によってコードを書く量を省略することができます。

それぞれの記述の方法を確認していきましょう。

一部のみのmarginの指定方法

paddingプロパティと同様に、一部のmarginのみの指定も可能です。

.example{
 margin-top: 10px;
 margin-right: 20px;
 margin-bottom: 30px;
 margin-left: 40px;
}

次のように記述することで、marginを上下左右に一括で指定することが可能です。

.example{
 margin: 10px 20px 30px 40px;
}

marginプロパティで「ブロック要素」を中央寄せする

インライン要素に対しての中央寄せはtext-align: center;で指定しました。

ブロック要素(divタグやpタグなど)に関しては、次のように記述することで、中央寄せをすることができます。

.example{
 margin: 0 auto;
}

overflow

overflowプロパティは、「親要素」からはみ出た「子要素」の部分をどのように処置をするかを指定することができます。

overflowプロパティの初期値は、「visible」で親要素からはみ出た子要素があった場合には、そのままはみ出して表示されます。

その他の値については、以下のような値とふるまいになります。

overflowプロパティは、以下の記事でより実践的な詳しい解説していますので併せてご覧ください。

【CSS】overflowの使い方解説！要素のはみ出し解決

box-shadow

box-shadowプロパティは、要素に影(ドロップシャドウ)をつけることができます。

以下のように記述していきます。

box-shadowプロパティの記述例

box-shadowプロパティは値を６つ指定することができます。

それぞれの値の意味を理解して使用するようにしましょう。

.example{
 box-shadow: ①px ②px ③px ④px ⑤ ⑥;
}

①影の左右の向き(正の値：右方向　負の値：左方向)

②影の上下の向き(正の値：下方向　負の値：上方向)

③影のぼかし

④影の広がり(正の値：影の拡大　負の値：影の縮小)

⑤影の色

⑥「inset」と記述することで内側に影がかかる

①②の値のみの指定で、ぼかしのない影をつけることができます。

background

backgroundプロパティは、背景に関するスタイルを指定することができます。

backgroundに関するプロパティ

指定できるプロパティは次の通りです。

backgroundプロパティの記述例

.example{
 background-color: #ff0;
 background-image: url(../img/sample.jpeg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center top;
 background-size: cover;
}

backgroundプロパティのショートハンド

backgroundプロパティは上記のようなプロパティを別々に記述する方法以外にも、ショートハンドと呼ばれる省略した記述の方法が存在します。

上記のコードをbackgroundプロパティのショートハンドを用いて、一括で指定すると次のようになります。

.example{
 background: #ff0 url(../img/sample.jpeg) no-repeat fixed center top / cover;
}

それぞれのプロパティ値を半角スペースで区切り、任意の順番で記述することが可能です。

background-sizeプロパティは、background-positionプロパティの値の後に「/(スラッシュ)」を書いてから指定することに注意しましょう。

object-fit

object-fitプロパティは、画像等をボックスにどうはめ込むかを指定することができます。

object-fitプロパティの初期値は、「fill」でボックスサイズに合わせて縦横比を維持しないで、画像が足りない部分は引き延ばされ、余る部分は縮まれるようにリサイズされます。

基本的な使い方としては、画像を好きな大きさにトリミングしたいときに使用します。

object-fitプロパティの記述例

<img src="zeroplus.png" alt="ZeroPlus塾長" />

img {
 width: 400px;
 height: 400px;
 object-fit: cover;
}

img要素にトリミングをしたいサイズとしてwidthとheightを指定した上で、object-fit: coverを加えることで指定した大きさで画像をトリミングすることができます。

object-fitプロパティの値

object-positionプロパティ

また、object-fitと併せて使うプロパティとして、object-positionもあります。

object-positionプロパティは、object-fitを指定した画像のどの部分を見せるかを指定することができます。

object-positionプロパティの初期値は「50% 50%」で、つまり上下左右中央部分が表示されます。

.example {
 object-position: [左右] [上下];
}

このように「左右」「上下」を指定します。

値としては、数値もしくは「top」「right」「bottom」「left」を指定することができます。

position

positionプロパティは、要素の「位置」を決めることができます。

positionプロパティは、以下の記事で詳しく解説していますので併せてご覧ください。

【CSS】position プロパティまとめと効かないときの対処法を解説

Flexbox

CSSには、Flexboxと呼ばれるレイアウトの指定方法があります。

Flexboxに関して、以下の記事で詳しく解説していますので併せてご覧ください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

プロパティはまだまだ存在する

今回はweb制作を行う上で、よく使うCSSのプロパティの解説をしました。

サイトを作成する上で欠かせないプロパティばかりなので、しっかりと学習をして使いこなせるようになりましょう。

今回紹介したプロパティ以外にも、まだまだプロパティは存在します！

知っているプロパティの数が多いほど様々なwebサイトのデザインを表現することができるようになります。

１つずつ知っているプロパティを増やしていくことが大切です。

継続して勉強を続けましょう！

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー