「ホームページを作りたい！」

「Wordpressやブログをカスタマイズしたい！」

そんな時に欠かせないのが文字や要素をカスタマイズするCSSプロパティです。

しかし、いきなり全てのCSSプロパティを覚えて使いこなすのは中々難しいですよね…

そこで今回は実際によく使うCSSプロパティのみをカテゴリ別に厳選してみました！

コピペでそのまま使えるコード例もありますので、ぜひ活用してみてください。

あわせて読みたい

【初心者必見】CSSとは？CSSの書き方と基本をわかりやすく解説！ Web制作に欠かせない｢CSS｣。言葉は知っていても、どのようなものか知らない人も多いのではないでしょうか。 この記事ではCSSの基礎知識やHTMLとの違いに加えて、CSSの書…

よく使うCSSプロパティ【フォント系】

「color:」フォントの色

「color:」は文字の色を変えるCSSプロパティです。

色はカラーネーム（red,blue）やカラーコード（#FFFFFF）のほか、rgbaで指定することも可能です。rgbaで指定した場合は透明度を変えることもできます。

プロパティ名が「font-color:」ではないことと、要素の色は変えられないことに注意が必要です。

colorプロパティを使ったCSSコード例

colorプロパティのCSSには主に3つの指定方法があります。

以下は、赤色を指定する場合の例です。

/* カラーネームで指定 */
color: red;

/* カラーコードで指定 */
color: #FF0000;

/* RGBで指定 */
color: rgb(255, 0, 0)

なお、記述例にある緑色のテキストはコメントアウトです。 /* ここがコメントアウトです */ のようにスラッシュとアスタリスクで挟むことで、コードの一部を実行されないように無効化し、メモや説明を書き加えるために記述します。

RGBカラーの不透明度を設定するCSSコード例

/* 不透明度100%（完全に見える） */
color: rgba(255, 0, 0, 1.0);

/* 不透明度50%（半透明） */
color: rgba(255, 0, 0, 0.5);

/* 不透明度0%（完全に透明） */
color: rgba(255, 0, 0, 0.0);

「font-size:」フォントの大きさ

「font-size:」プロパティでは文字の大きさを設定することができます。

フォントの大きさはpxを使って値を直接指定する方法と、%やem、vwなどを使って相対的に指定する方法があります。

単位により特性が異なるため、条件にあわせて使い分けられるようにしましょう。

font-sizeプロパティを使ったCSSコード例

/* pxで指定 */
font-size: 16px;

/* emで指定 */
font-size: 1.2em;

「px」は サイズを絶対値指定するもので、例のように16pxと指定すれば必ず16pxになります。

一方、「em」は他の要素に比例して数値が決まるもので、基準となる親要素のサイズ「何文字分」として、数値が変動します。

例えば、親要素のフォントサイズが10pxで、子要素のフォントサイズに1.2emを指定すると、10pxの1.2文字分＝12pxとなるわけです。

「font-weight:」フォントの太さ

「font-weight:」プロパティでは文字の太さを指定することができます。

太くしたい文字に対して、プロパティに「font-weight: bold;」を、値に「bold」を入れる使い方が最も一般的です。

その他、フォントの種類によっては値部分に「100～900」の数値を入れて、細かく太さを設定することも可能です。

font-weightプロパティを使ったCSSコード例

/* 太字にする（キーワード指定） */
font-weight: bold;

 /* 太字にする（数値指定。boldと同じ意味の700） */
font-weight: 700;

「font-family:」フォントの種類

「font-family:」プロパティでは、文字の種類の設定が可能です。

ゴシック体は「sans-serif」、明朝体は「serif」と設定する以外に、フォント名を直接記載し設定することもできます。

また、Webフォントを組み合わせれば更に豊富な種類の字体を使用できるようになります。

font-familyプロパティを使ったCSSコード例

/* ゴシック体 */
font-family: sans-serif;

/* 明朝体 */
font-family: serif;

「font:」フォント関連を一括で指定

ここまでの文字関連の設定を一括で行えるCSSプロパティが「font:」です。

文字のサイズ（font-size）と文字の種類（font-family）の記載が必須となり、それ以外の数値は任意です。

あらゆる設定を1行で完結できるため、覚えておくととても便利なプロパティと言えるでしょう。

colorプロパティの値は設定できませんので注意してください。

fontプロパティを使ったCSSコード例

/* 太字 16px ゴシック体 */
font: bold 16px sans-serif;

よく使うCSSプロパティ【テキスト系】

「line-height:」行の高さ

文章の行の高さを設定したい時に使うのが「line-height:」プロパティです。

行の高さは1を基準に、1.1以上で広め、0.9以下で狭めと文字の上下の余白を指定することができます。

この数値以外にも「px」「em」「%」などでの指定も可能です。

line-heightを使ったCSSコード例

/* 行間を狭くする（行の高さを0.8倍に） */
line-height: 0.8;

/* 行の高さをフォントサイズの2倍に設定（相対単位em） */
line-height: 2em;

「letter-spacing:」文字の間隔

文字同士の間隔を指定したい場合は「letter-spacing:」プロパティを使用します。

「px」や「em」などの単位を使った指定が可能です。

文字の間隔は相対的に指定した方が使い勝手がいいため、「em」での設定がおすすめです。

letter-spacingを使ったCSSコード例

/* 文字の間隔を1ピクセル空ける（絶対単位） */
letter-spacing: 1px;

/* 文字の間隔をフォントサイズの0.1倍空ける（相対単位） */
letter-spacing: 0.1em;

「text-align:」横方向の文字位置

「text-align:」プロパティを使えば、文字を左右中央のどれに寄せるかを設定することができます。

初期値は左寄せ（left）になっていますが、見出しなどでは中央寄せ（center）を使うことも多いです。

また、折り返しのある文章の右側を綺麗に揃える「justify」の設定も覚えておくと便利かもしれません。

text-alignを使ったCSSコード例

/* 左寄せ */
text-align: left;

/* 右寄せ */
text-align: right;

/* 中央寄せ */
text-align: center;

/* 両端揃え */
text-align: justify;

「vertical-align:」縦方向の文字位置

「vertical-align:」プロパティはテキストや画像の縦方向の文字位置を指定します。

先ほどの「text-align:」に比べると使用頻度は低くなりますが、たとえばテーブルセル内の要素の縦位置を変えたい場合によく使います。

インラインやテーブル要素にのみ適用し、ブロック要素などには適用しないので注意が必要です。

vertical-alignを使ったCSSコード例

/* ベースラインを揃える */
vertical-align: baseline;

/* 上寄せ */
vertical-align: top;

/* 中央寄せ */
vertical-align: middle;

/* 下寄せ */
vertical-align: bottom;

よく使うCSSプロパティ【サイズ系】

「width:」横幅

要素の横幅を指定するのが「width:」プロパティです。

サイズを固定したい場合は「px」、相対的に設定したい場合は「%」や「vw」などの単位があります。

また、幅を指定したくない場合は「auto」に設定することで横幅が自動的に決まります。

widthを使ったCSSコード例

/* 幅を600ピクセルに固定する */
width: 600px;

/* 親要素の幅いっぱいに広がる */
width: 100%;

/* ビューポート（画面の幅）の50%の幅に設定する */
width: 50vw;

「height:」縦幅

要素の縦幅を指定するのが「height:」プロパティです。

基本的な使い方は横幅を決める「width:」プロパティと同じです。

また、widthとheightのどちらもインライン要素には使えないので注意してください。

heightを使ったCSSコード例

/* 高さを200ピクセルに固定 */
height: 200px;

/* ビューポート（画面の高さ）の10%の高さに設定 */
height: 10vh;

/* コンテンツの高さに応じて自動的に変化 */
height: auto;

max-,min-で縦横幅の最大or最小値を指定

widthとheightプロパティは、「max-width:」「min-height:」のように記載すると最小値または最大値の指定も可能です。

たとえば「max-width: 600px;」と指定すれば、要素が600pxより大きくなることはありません。

「width:100%;」などの%単位と一緒に設定すると「要素を画面横幅100%に表示するが600pxより大きくしない」という設定が可能になります。

「min-width:」「min-height:」の場合は逆に要素が指定サイズより小さくなることはありません。

レスポンシブ設定で画面サイズに合わせ要素を見やすく表示したい時などによく使う設定なので、覚えておくと便利です。

よく使うCSSプロパティ【余白系】

「padding:」要素の内側の余白

要素の内側の余白を設定したい場合に使うのが「padding:」プロパティです。

「padding: 10px;」と設定すれば、要素の内側の4辺全てに10pxの余白ができます。

単位は「px」「%」「vw」「vh」などが使用できます。

また、「padding-left:」「padding-top:」などと記載すれば1辺のみの余白が設定できます。

他にも「padding: 0 10px 10px 0;」など1つのプロパティで異なる設定をまとめることも可能です。

paddingを使ったCSSコード例

/* 上下左右に20pxのパディング */
padding: 20px;

/* 上下に10px、左右に0pxのパディング */
padding: 10px 0;

/* 左側に5pxのパディング */
padding-left: 5px;

「margin:」要素の外側の余白

要素の外側の余白を設定するCSSプロパティが「margin:」です。

基本的にはpaddingと使い方も使える単位も同じです。

隣接する要素のｍargin同士が重なるとmarginの相殺という現象が起こるため注意してください。

marginを使ったCSSコード例

/* 上下左右に20pxのマージン */
margin: 20px;

/* 上下に10px、左右に0pxのマージン */
margin: 10px 0;

/* 上側に5pxのマージン */
margin-top: 5px;

paddingとmarginの区別

「paddingとmarginの使い分けが難しい」という話をよく耳にします。

paddingは要素の内側に余白を作り、marginは外側に余白を作ります。

基本的に余白と干渉させたい他の要素が要素内にある場合はpadding、要素の外にある場合はmarginという感覚で使い分けるとよいでしょう。

「box-sizing:」要素のサイズの計算方法

仕組みがわかりにくいものの重要なCSSプロパティがこの「box-sizing:」です。

これはpadding、margin、borderなどで設定した数値を、要素の元の高さ（height）や幅（width）に含めるかを指定するプロパティです。

値には「content-box;」か「border-box;」が入ります。

content-box;

content-box;は、要素のwidthとheightにborderとpaddingのサイズを含みません。

そのかわり、外側に足される仕組みです。

なお、box-sizingプロパティの初期値で何も指定しない限りは、自動的にこの値が設定されます。

border-box;

border-box;は、要素のwidthとheightにborderとpaddingのサイズを含みます。

レイアウトの計算を簡単にするために、全要素に一括でこの値を設定するのが主流です。

content-box;とborder-box;の比較例

上記で2つの違いを説明しましたが、実際にどう作用するのか分かりづらいかと思いますので、ここで具体例を見てみましょう。

width: 500px、height: 400px、padding: 120pxの要素があるとして、実際のサイズは上図のように異なります。

このようにcontent-boxを設定した時は、widthなどで設定したサイズにpaddingなどの数値が更に加算されます。

border-boxの時はwidthで設定した数値が優先され、それより要素の大きさが膨らむことはありません。

このbox-sizingの設定を意識しないと思っていたサイズと異なる形で書き出されてしまいますので、必ず意識するようにしましょう。

よく使うCSSプロパティ【枠線系】

「border-width:」枠線の太さ

枠線の太さを設定するCSSプロパティが「border-width:」です。

要素に「border-width: 1px;」と設定すれば、要素の4辺に1px幅の枠線が表示されます。

「border-width-right:」のように書けば1辺ずつ値を設定することも可能です。

border-widthを使ったCSSコード例

/* 枠線の太さを4ピクセルに設定する */
border-width: 4px;

「border-color:」枠線の色

枠線の色を設定する場合は「border-color:」のプロパティを使います。

色の種類はredなどのカラーネームの他、カラーコードやRGBなどでの指定が可能です。

border-colorを使ったCSSコード例

/* 枠線の色を黒に設定（キーワード指定） */
border-color: black;

/* 枠線の色を黒に設定（16進数指定） */
border-color: #000;

「border-style:」枠線のスタイル

枠線の種類を設定できるCSSプロパティは「border-style:」です。

初期値がnone（非表示）のため、このborder-styleを設定しないと枠線が表示されないので注意してください。

最もスタンダードな直線は「border-style: solid;」で設定ができます。

その他、ドット線やダッシュ線、二重線などの設定も可能です。

border-styleを使ったCSSコード例

/* 線なし */
border-style: none;

/* 直線 */
border-style: solid;

/* ドット線 */
border-style: dotted;

/* ダッシュ線 */
border-style: dashed;

/* 二重線 */
border-style: double;

「border:」枠線関連を一括で指定

これまでの枠線設定は「border:」プロパティで一括指定することが可能です。

特にborderプロパティは個別に書くより一括指定の方が使い勝手もいいかと思います。

形を覚えて使いこなせるようにしておくといいでしょう。

borderを使ったCSSコード例

/* 1ピクセルの太さで、実線（solid）、色は黒（#000）の枠線 */
border: 1px solid #000;

「border-radius:」角の丸さ

要素の角の丸さを指定したい場合は「border-radius:」のCSSプロパティを使用します。

単位は「px」や「%」などが使えます。

また「border-radius: 10px 0;」のように角ごとに設定を変えることも可能です。

他にも「border-radius: 50%;」と指定すると円を作ることもでき、デザインに便利なCSSプロパティです。

border-radiusを使ったCSSコード例

/* 左上5px 右上5px 右下0px 左下0px */
border-radius: 5px 5px 0 0;

/* 円形を作成 */
border-radius: 50%;

よく使うCSSプロパティ【背景系】

「background-color:」背景の色

「background-color:」プロパティでは、背景の色を設定できます。

これも他の色指定のCSSコードと同様に、カラーネームやカラーコード、RGBが使用可能です。

また、RGBAで記載すれば色の数値の他に不透明度の設定も行えます。

background-colorを使ったCSSコード例

/* 背景色を青に設定 */
background-color: blue;

/* 背景色を赤（16進数指定）に設定 */
background-color: #FF0000;

/* 背景色を不透明度50%の黄色に設定 */
background-color: rgba(255, 255, 0, 0.5);

「background-image:」背景の画像

「background-image:」プロパティでは背景画像の設定を行います。

「background-image: url(img.jpg);」のように書き、カッコ内には背景に使用したい写真や模様の画像のURLを設定します。

background-imageを使ったCSSコード例

/* 背景画像を指定（imgフォルダ内のsample.jpg） */
background-image: url(img/sample.jpg);

「background-repeat:」背景の繰り返し

背景の繰り返し設定をするCSSプロパティが「background-repeat:」です。

繰り返す場合は「background-repeat: repeat;」、繰り返さない場合は「background-repeat: no-repeat;」となります。

また、repeat-xを使用すれば横方向のみ、repeat-yを使用すれば縦方向のみのリピートが可能です。

背景が柄模様の場合はrepeat設定にすることで、要素いっぱいに模様を敷き詰めることができるようになります。

background-imageを使ったCSSコード例

/* 背景画像を横・縦方向に繰り返す（デフォルト） */
background-repeat: repeat;

/* 背景画像を繰り返さない */
background-repeat: no-repeat;

/* 背景画像を縦方向のみに繰り返す */
background-repeat: repeat-y;

「background-position:」背景の位置

背景画像の位置設定を行うCSSプロパティが「background-position:」です。

「top」「left」「center」などのワード設定の他、「px」「%」での設定も可能です。

画面いっぱいの背景ではなくワンポイント画像を背景に入れたい場合、このbackground-positionを使うと細かく配置ができます。

background-positionを使ったCSSコード例

/* 背景画像を左上（top left）に配置する */
background-position: top left;

/* 背景画像を左から10px、上から50pxの位置に配置する */
background-position: 10px 50px;

「background:」背景関連を一括で指定

「background:」プロパティを使えば、背景関連の設定を一括で行うことができます。

他の一括設定のプロパティに比べ記述が複雑なのですが、CSSをすっきりまとめたい場合には使用してみてください。

backgroundを使ったCSSコード例

/* 背景画像を指定し、繰り返さず、中央に配置し、画像サイズを要素内に収まるように調整 */
background: url(img/bg.jpg) no-repeat center / contain;

よく使うCSSプロパティ【要素系】

「display: none;」要素を非表示に

要素を非表示にできるCSSプロパティが「display: none;」です。

対象の要素は存在しないことになるため、次の要素があれば詰めて表示されます。

レスポンシブ対応の時によく使います。

display: none;を使ったCSSコード例

下記は、 sampleという要素を非表示にするコード例です。

.sample {
  color: white; /* テキストの色を白 */
  background: #E26363; /* 背景色を赤系 */
  display: none; /* 要素を完全に非表示 */
}

「display: inline;」テキスト等に適した要素

HTMLのタグに指定されている要素を、インライン要素に変えることができるのが「display: inline;」です。

インライン要素は、テキストの一部として表示される要素のことを指し、ブロック要素の対になるものとして扱われています。

主にテキスト内で使われる要素（リンクを表す<a>や、特定の部分にスタイルを適用させる<span>など）に適用され、隣接するインライン要素は自動的に横並びになります。

なお、インライン要素は「widthやheightを指定できない」「上下のmarginとpaddingが設定できない」など制限があるので注意してください。

display: inline;を使ったCSSコード例

本来はブロック要素である<p>をインライン要素として表示する例を紹介します。

例）sampleというクラス名の要素に「display: inline;、文字を白、背景を#E26363」の指示を記述

<p class="sample">おはようございます。</p>
<p class="sample">こんにちは。</p>

.sample{
display: inline; /* 要素をインライン要素として表示 */
color: white; /* テキストの色を白 */
background:#E26363; /* 背景色を赤系 */
}

見え方

おはようございます。 こんにちは。

<p>は本来ブロック要素なので、display: inline;を指示しなければ「おはようございます。」と「こんにちは。」が改行されて縦に並ぶ形で表示されます。

しかし、例のようにdisplay: inline;を指示することで、横並びになりました。

「display: block;」ブロック型の要素

要素を強制的にブロック型に変更するCSSプロパティが「display: block;」で、先ほど紹介した「display: inline;」と対になるものです。

例えば、<span>や<a>といったインライン要素（横並びになる）をブロック要素にすることで、改行させたり幅・高さを指定したり、ボタンとして見せたい時によく使います。

また、widthやheight（幅と高さ）、上下左右のmarginとpadding（余白）なども設定可能です。

display: block;を使ったCSSコード例

本来はインラインボックスである<a>をブロック要素として表示する例を紹介します。

<a href="URL" class="sample">リンクＡ</a>
<a href="URL" class="sample">リンクＢ</a>
<a href="URL" class="sample">リンクＣ</a>

まずは、CSSにdisplay: block;を指示しないままだと、どんな見た目になるのかを確認しましょう。

display: block;なしの見え方

リンクＡ リンクＢ リンクＣ

<a>はインラインボックスなので、横並びで表示されていますね。

つづいて、CSSにdisplay: block;を指示すると…

.sample{
display:block; /* 要素をブロック要素として表示 */
}

display: block;ありの見え方

リンクＡ
リンクＢ
リンクＣ

改行が入り、縦並びになりました。この他にも、幅や高さ、余白や背景などを設定すれば、よりボタンらしい見た目になるでしょう。

「display: inline-block;」インラインとブロックの両方の性質を持つ要素

インラインとブロックのいいところ取りの要素に設定できるのが「inline-block」プロパティです。

ブロック要素のように「横幅と縦幅」「上下左右の余白」の設定ができつつ、インライン要素のように「自動的に横並び」になるため、Webサイトのメニューバーなどのボタンを横並びにしたい時によく使われます。

display: inline-block;を使ったCSSコード例

display: inline-block;を使って、下記のような横並び3つのボタンを作成していきます。

<div class="sample">
　<div class="box">ボックス1</div>
　<div class="box">ボックス2</div>
　<div class="box">ボックス3</div>
</div>

/* sampleという要素内を中央寄せにするためのスタイル */
.sample {
text-align: center;
}

/* boxという要素のスタイル */
.box {
  display: inline-block; /* 横並びにする */
  width: 150px;
  height: 50px;
  margin: 5px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 50px; /* テキストを縦中央に配置 */
  border-radius: 8px;
}

見た目

このように、display: inline-block; を使うことで、要素を横並びにしつつ、ブロックレベル要素のように幅や高さを設定することができます。

「display: flex;」レイアウトに適した要素

display:flex;は、指定した要素をflexboxにできるCSSプロパティです。

flexboxとは、CSSで要素をレイアウトするための手法で、要素を縦や横に並べたり、要素間の幅や高さ、余白などを調整したりすることができます。そのため、レスポンシブデザインの作成にも非常に適しています。

基本的には親要素に指定するものであり、その親要素に含まれる子要素はすべて自動的にflexboxとなります。

また、これまで「display: block;」では複雑なCSS記述が必要だったり崩れやすかった設定が、このflexを使うことで簡単に設定できます。

独特の記載が多いflexですが、これからWebデザインをするなら必ず覚えておきたいCSSプロパティのひとつでしょう。

display: flex;を使ったCSSコード例

display: flex;を使って、アイテム1～3をボタンのような見た目にし、中央揃えにしていきます。

<div class="sample">
　<div class="item">アイテム1</div>
　<div class="item">アイテム2</div>
　<div class="item">アイテム3</div>
</div>

/* sampleという要素のスタイル */
 .sample {
display: flex; /* フレックスボックスレイアウトを適用 */ 
justify-content: center; /* 水平方向に中央寄せ */
align-items: center; /* 垂直方向に中央寄せ */
height: 100vh; /* ビューポートの高さ全体を確保 */
background-color: #4CAF50; /* 背景色 */
} 

見た目

よく使うCSSプロパティ【位置系】

「position:」要素の位置

要素の位置を設定するCSSプロパティが「position:」です。

「position: relative;」を設定すると、「top:」や「left:」などのプロパティを使い要素の位置を動かすことができます。

「position: absolute;」を設定すると、その要素は他の要素と干渉せず絶対値の設定になります。

見た目としては独立して浮いた状態です。

周りの要素の位置とは関係なく要素を置きたい時によく使用します。

また、「position: fixed;」や「position: sticky;」はスクロールしても要素が画面上に固定されたままになる設定です。

メニューバーや常時固定のアイコンをつけたい時などに使うと便利です。

positionを使ったCSSコード例

/* 相対位置：通常の位置を基準にずらす */
position: relative;

/* 絶対位置：最も近いposition付き親要素を基準に配置 */
position: absolute;

/* 固定位置：画面（ビューポート）に固定表示 */
position: fixed;

/* スティッキー位置：スクロール位置に応じて親要素内で固定 */
position: sticky;

「float:」要素の浮動化

「float:」プロパティを使うと、要素を浮動させることができます。

ブロック要素は基本的に縦並びになりますが、「float: left;」を使うとインライン要素のように横並びにすることが可能です。

また画像の横に文字を回り込ませることもできるので、プロフィールや記事のサムネイルのコーディングにも活躍します。

floatを使ったCSSコード例

/* 要素を左に寄せて、横並びのレイアウトを作る */
float: left;

/* 要素を右に寄せて、横並びのレイアウトを作る */
float: right;

「z-index:」要素の重なり順

「z-index:」は複数の要素の重なり順を設定するCSSプロパティです。

数値が大きいほど前、小さいほど後ろになります。

使いこなせれば縦横のみでなく、奥行のあるレイアウトが可能になります。

z-indexを使ったCSSコード例

/* .box1の重なり順を1に設定（.box2より背面） */
.box1 {
  z-index: 1;
}

/* .box2の重なり順を2に設定（.box1より前面） */
.box2 {
  z-index: 2;
}

この場合、example2がexample1より前になります。

「overflow:」はみ出た子要素の扱い

「oveflow:」プロパティでは、親要素より大きい子要素の処理を指定します。

「overflow: hidden;」と設定すると、親要素からはみ出る部分は表示されなくなります。

「overflow: scroll;」の場合は要素内でスクロールできるようになります。

overflowを使ったCSSコード例

/* はみ出した部分もそのまま表示する（デフォルト） */
overflow: visible;

/* はみ出した部分を隠して表示しない */
overflow: hidden;

/* はみ出した部分をスクロールバーで表示可能にする */
overflow: scroll;

よく使うCSSプロパティ【表示系】

「opacity:」要素の透明度

「opacity:」は要素の透明度を設定するプロパティです。

「opacity: 0;」は透明で、数値を上げるとだんだん濃くなります。

最大値は「opacity: 1;」です。

たとえばhover時の設定で「opacity: 0.7;」と設定すれば、カーソルを合わせた要素をやや薄くし動きをつけることができます。

opacityを使ったCSSコード例

/* 要素を完全に透明にする（見えなくなるがスペースは残る） */
opacity: 0;

「visibility:」要素の表示の有無

「visibility:」プロパティは要素の表示の有無を設定します。

要素を表示したくない場合は「visibility: hidden;」と書きます。

「display: none;」は要素自体を消しますが、「visibility: hidden;」の場合は要素の見た目だけが透明になり形自体は残った状態になります。

visibilityを使ったCSSコード例

/* 要素を非表示にするが、レイアウト上のスペースは残す */
visibility: hidden;

よく使うCSSプロパティ【アニメーション系】

「transition-property:」アニメーションの適用先

「transition-property:」はアニメーションを適用したい要素を指定するCSSプロパティです。

「transition-property: background-color;」と設定した場合、背景色にのみアニメーションが適用されます。

全ての要素にアニメーションを適用したい場合は「transition-property: all;」と書きます。

transition-propertyを使ったCSSコード例

/* すべてのプロパティの変化をトランジション（アニメーション）させる */
transition-property: all;

/* 背景色（background-color）の変化のみトランジションさせる */
transition-property: background-color;

/* 文字色（color）と幅（width）の変化のみトランジションさせる */
transition-property: color, width;

「transition-duration:」アニメーションの時間

アニメーションを動かす時間を設定する場合は「transition-duration:」のプロパティを使います。

「transition-duration: .4s;」だと0.4秒かけてアニメーションが動きます。

transition-durationを使ったCSSコード例

/* トランジション（変化）の継続時間を0.4秒に設定 */
transition-duration: 0.4s;

「transition-delay:」アニメーションの遅延時間

「transition-delay:」プロパティではアニメーションの遅延時間を指定できます。

「transition-delay: 1s;」の場合は、動作してから1秒後にアニメーションが開始します。

transition-delayを使ったCSSコード例

/* トランジションの開始を1秒遅らせる */
transition-delay: 1s;

「transition-timing-function:」アニメーションの変化の種類

「transition-timing-function:」プロパティではアニメーションの変化の種類を設定します。

アニメーションが一直線に進む「liner」、開始と終了付近の動きがなめらかになる「ease」

他にも「ease-in」や「ease-in-out」など様々な設定が可能です。

transition-timing-function:を使ったCSSコード例

/* トランジションの動きを直線的にする */
transition-timing-function: linear;

/* トランジションの動きを緩やかに開始・終了させる（デフォルト） */
transition-timing-function: ease;

/* トランジションをゆっくり開始し、速く終了させる */
transition-timing-function: ease-in;

/* トランジションをゆっくり開始し、ゆっくり終了させる */
transition-timing-function: ease-in-out;

「transition:」アニメーション関連を一括で指定

「transition:」プロパティを使えばアニメーション関連の設定が一括で行えます。

時間に関する数値は先に記述した方がtransition-delay、後の方がtransition-durationとなります。

transition:を使ったCSSコード例

/* 背景色の変化を0.4秒かけて、easeの動きで、0.2秒後に開始するトランジション */
transition: background-color 0.4s ease 0.2s;

また、以下のようにカンマで区切って記載すれば複数のプロパティの設定を同時に行えます。

複数のプロパティを一括で設定するCSSコード例

/* 背景色と文字色をそれぞれ0.5秒かけて変化させるトランジション */
transition: background-color 0.5s, color 0.5s;

さいごに

見慣れない単語も多く苦手意識を持ってしまいがちなCSSプロパティですが、実際に使う時は大体コピペでOK！

まずはどんな種類のCSSプロパティがあるかを知り、調べながら実際に使ってみることが早期習得への近道です。

ホームページ制作やWordpressのカスタマイズでお悩みの場合は、ぜひI-SEEDまでお気軽にご相談ください。