よく使う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値（カラーコード）

#を書いた後に、それぞれの色の固有値を16進数（0〜ff）で指定する方法。
不透明度を表すalpha値を追加することも可能。「00〜ff」の数値を指定する。100%の不透明度である1.0はffで指定する。
それぞれの値が同一の文字の場合、1文字に省略可能。例.「#ffffff」→「#fff」

colorプロパティの記述例

.example {
  color: red; /* キーワードで赤色を指定 */
  color: rgb(255, 0, 0); /* rgbで赤色を指定 */
  color: #ff0000; /* HEX値で赤色を指定 */
}

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

font-size

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

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

CSSで指定する単位

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

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

「px」「%」「em」の３つがよく使われます。使いながら理解していきましょう。

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;
}

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

font-familyの注意点

ユーザーが使用するデバイスによっては、指定したフォントが適用されない場合があります。
ない場合は違うフォントが表示されてしまうため、表示をなるべく統一するために

• 複数種類のフォント + sans-serif などの系統指定
• Webフォントを利用する

のどちらか、または両方の手段が取られます。

授業や教材ではWebフォントを使っていきます。Webフォントに関して別記事で詳しく紹介しています。

注意点に関しては、学習を進めていく中で理解できると思うので、ひとまずは指定の仕方が分かれば問題ありません。

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;
}

text-align

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

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

.example {
  text-align: center;
}

width

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

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

widthプロパティの記述例

.example {
  width: 50%;
}

height

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

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

height プロパティの記述例

.example {
  height: 100px;
}

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

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

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

padding

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

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

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

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

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

一部のみの padding の指定方法

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

paddingプロパティの記述例

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

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

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

margin

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

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

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;
}

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つ角に丸みをつけることができます。

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%;
}

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 プロパティの値の後に「/ (スラッシュ) 」を書いてから指定することに注意しましょう。

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

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

CSSのプロパティを学習するポイントは

• CSSでできることを覚える
• 使って覚える
• 忘れたときは「〇〇（できること） CSS」で検索する

です。暗記するのではなく、使いながら覚えていくのがおすすめです。

今回紹介したプロパティは特によく使うので、他の記事も参考にしながら早々に覚えていくとよいでしょう。

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

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー