よく使うCSSプロパティを目的別に紹介！特徴と使い方を解説

「CSSプロパティについて詳しく知りたい」
「CSSの中でもよく使うプロパティって何だろう」

プログラミング初心者の中には、上記のように考えている方もいるのではないでしょうか。

よく使うCSSプロパティを知ることで、効率よくHTMLのスタイルを変更できます。

今回は、よく使うCSSプロパティを目的別に紹介し、各特徴と使い方について解説していきます。

以上の項目について解説していきます。

この記事を読むことで、CSSプロパティの特徴と、よく利用するCSSプロパティが何なのか理解できるので、是非チェックしてみてくださいね！

CSSで利用するプロパティとは

CSSのプロパティは、HTMLのデザインを変えるために用意されたスタイルの種類です。プロパティをHTMLに指定するには、セレクタというHTML要素を指定する値を利用します。

セレクタでHTML要素を指定するには、要素に指定されているクラス属性を利用するのが基本です。

上記画像では、「Class=”test”」が指定されているHTML要素を指定しており、クラス名の前に「.」を追加して記入します。

プロパティに指定されているcolorというスタイルは、文字の色を変える役割があり、右側の値に任意の色を指定できます。

よく使うCSSプロパティ一覧

CSSで用意されているプロパティの数は、現役のWeb製作者でも覚え切れないほどの数があります。

しかし、その中でもよく使うプロパティの数は限られているので、使用頻度の多いCSSプロパティの特徴と使い方について解説していきます。

フォントや文字色の変更

font-size

font-sizeプロパティを使うと、指定したHTML要素の文字サイズを変更できます。

font-size: 20px;

プロパティの値には、pxや%、remを使って文字サイズを指定できます。

font-weight

font-weightは文字の太さを指定するプロパティです。指定する値の種類は、lightやboldのように太さの名前で指定したり、数値で指定することもできます。

font-weight: bold;//太字を表示
font-weight:500;//太さを数値で表現

数値で指定する場合は、一番細い100から一番太い900まで選ぶことができ、初期値は400です。

font-family

font-familyはフォントの種類を変更できるプロパティで、複数指定できます。

font-familyで指定したフォントの表示は回覧する端末に依存するので、CSSで指定したフォントが相手の端末に入っていないと表示されず、代わりのフォントが表示されます。

もしも指定したフォントが表示されなかったときのために、複数指定できる仕様になっているのです。

 font-family: Arial, Helvetica, sans-serif;

上記コードでは、Arialというフォントを表示させるために記入しています。

もし回覧者の端末でArialが表示できないときは、2番目に記載しているHelveticaというフォントを表示します。

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

text-align

text-alignは、ブロック要素内にある文字の位置を指定できるプロパティです。位置を指定するには、主に下記の値を使います。

text-align: center;
text-align: right;
text-align: left;

text-decoration

text-decorationは、文字にアンダーラインのような装飾を付けたり消したりできるプロパティです。

主にaタグにデフォルトで設定されているアンダーラインを消したり、文字にアンダーラインを加えるときに利用します。

text-decoration: none;//装飾を消す
text-decoration: under-line;//アンダーラインを引く

line-height

line-heightプロパティを使うと、テキストの行間を調節でき、初期値としてnormalという値が設定されています。

line-heightに指定する値は、pxや％表記する方法と数字単体で入力する方法があります。

値に20pxを指定するとテキストの行間は20pxに統一されます。単体だと、1を指定すると文字サイズと同じ行間で表示し、2を指定すると行間が文字サイズの2倍になります。

line-height: 20px;
line-height: 2;

widthとheightプロパティ横幅や高さを指定できる

widthはHTML要素の横幅を調節できるプロパティで、heightは高さを調節できます。初期値は双方ともautoが指定されています。

width：300px//指定した要素の横幅が300pxになる
height：200px//指定した要素の縦幅が200pxになる

paddingとmarginは要素間の余白を調節できる

padding

paddingは、HTML要素内部の余白を調節するときに利用するプロパティです。HTMLで作ったボックスと内部テキストの間に余白を作るときによく利用されます。

paddingに値を指定するときは、左から順に上の余白、右の余白、下の余白、左の余白という順に設定できます。また、上下と左右の余白を一緒に調節する場合、左に上下の値、右に左右の値を同時に指定できます。

たとえば、上下に20pxの空白、左右に30pxの空白を指定する場合は下記のように入力します。

padding:20px 30px;

margin

marginプロパティを使うと、HTML要素外部の余白を調節できます。要素同士の余白を調節したりとWebサイトをレイアウトするときによく利用します。

値の使い方はpaddingプロパティと同じく、左から順に値を入力することで四方の余白を指定できます。

padding:10px 20px 40px 0;

背景を変更する

background-color

background-colorは、指定した要素の背景色を変更できるプロパティです。Webサイト全体の背景から、各ボックスの背景色まで変更できます。

background-color:#2A7CBA;
background-color:blue;

上記コードのように、カラーコードを使ったり単色を指定して表示することもできます。

background-image

background-imageは、指定した要素の背景に画像を挿入するときに使用します。Webサイトのメインビジュアルやボックスの背景に画像を設定するときに利用されます。

画像の指定方法は、background-imageの値に画像のパスを指定することで表示できます。

background-image: url(pic/test.png);

上記のように、urlというメソッド内に画像があるパスを入力します。

レイアウトの調節に欠かせないdisplayプロパティ

displayプロパティを使うと、HTML要素の使用を変更できます。たとえば、ブロック要素であるdivタグをインライン要素にしたり、要素を簡単に横並び表示にできます。

displayプロパティでよく使う値は下記になります。

display: block;
display: inline;
display: inline-block;
display: flex;

CSSプロパティを使いこなして理想のWebサイトを作成しよう

今回は、CSSプロパティの特徴とよく使うCSSプロパティを目的別に紹介してきましたが、いかがでしたでしょうか？

CSSプロパティを使ってHTML要素のスタイルを変更することで、さまざまなデザインが実現できます。

今回紹介したCSSプロパティは、Webサイトを作成する過程で頻繁に利用するものなので、プログラミング初心者の方はぜひ参考にしてみてくださいね！