最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア
CSSとは？書き方の基本とアニメーション、デザイン例を紹介

CSSとは？書き方の基本とアニメーション、デザイン例を紹介

最終更新日：

CMS・サイト制作Webデザイン

SHARE
FacebookTwitterLineHatenaShare

ホームページ（Webサイト）を作成するにあたって、できれば見栄えの良いデザインにしたいと考えるのは自然なことでしょう。となれば、HTML（このマークアップ言語のみで作成できるページは白背景に黒文字といった簡素なものに限られる）の知識だけでなく、フォントサイズの調整やレイアウトなどに対して細かく指定できるCSSへの理解も必要です。
本記事では、CSSについてたっぷり解説。書き方の基本からプロパティの設定、アニメーションの付与、参考にしたいデザイン例等々に至るまで、幅広く具体的に紹介します。

CSSとは？

CSSとは何か検索！

そもそもCSSとは何でしょう？

CSSは、「Cascading Style Sheet」の頭文字をとった略称です。文書の見た目を装飾するための言語として機能します。
HTMLで規定されるページの構造に対して、サイトの表示スタイル（デザイン）を指定することができるため、スタイルシートとも呼ばれます。

CSSの役割

繰り返しお伝えしている通り、HTMLで作ったテキストなどに対して、色、配置をコントロールできるのがCSSの特長であり役割です。文字に限らず、背景色やボタン配置の変更もできます。また、マウスカーソルを置く位置に合わせてアニメーションの作動も実現可能です。

CSSの主な要素と書き方

CSSで使用する主な要素は3つです。
まずは、セレクター。調整対象であるHTMLのタグを指定する要素です。
そして、指定されたHTMLタグ内のどの部分を調整するのか、プロパティで示します。
3つ目が値です。調整度合いを指定します。

それでは、具体的に例を挙げましょう。
見出しに当たるh1タグの文字の大きさを40ピクセルにする場合は以下の通りです。

「h1」がセレクター、文字の大きさを規定するプロパティは「font-size」、その値は「40px」で表します。
CSSの形式で記述するとh1{font-size:40px;}です。
指定内容を囲む“｛｝”は宣言ブロックといいます。また、“:”でプロパティと値を区切り、一つの設定を終止するのに用いるのが“;”です。場合によっては複数のプロパティを記述することもあります。たとえば、文字色を赤に変えることも追加したい場合の書き方はh1{font-size:40px; color:red;}となります（“color”がプロパティに当たり、“red”が値に該当します）。

CSSの定義を反映させる方法

CSSの定義を反映させてサイトにデザインを適用する方法は大きく二つ挙げられます。
まずは、CSSファイルを作成しHTMLから読み込ませるやり方です。
手順は以下の通り。
あらかじめ拡張子が「.css」のファイルを準備します。仮にファイル名を「sample.css」としましょう。
そのうえで、HTMLファイル内でタグを付与します。それがです。HTML文書の中にこの1行を追加します。なお、タグ内に記述するようにしてください。
上記の方法によって、「sample.css」のファイルを参照する（読み込む）よう指定でき、そこで書かれた定義がHTMLにて適用されることになります。

一方で、HTMLファイルの中で直接CSSを記述することも可能です。この方法では、HTMLの<style>タグの中にCSSの定義を書き込むことで成立します。
前述のh1{font-size:40px; color:red;}をHTML内に記述する場合は以下の通りです。

<style type=””text/css””> h1 { font-size:40px; color:red; } </style>

記述位置は、前者同様にタグ内でお願いします。
一見、CSS用のファイルを作らずに済み手っ取り早く思えるかもしれません。しかし、この使い方はおそらく少数派でしょう。というのは、他のページと同じ変更を施す際に一ページずつ適用する方が、実際のところ面倒だからです。一括で調整を図る機会が断然多いことを考えると、確かにこちらの方法はあまりおすすめしづらく感じます。

CSSファイルの作成と保存

CSSファイルはtext形式のファイルです。従ってHTMLなどと同じように通常のテキストエディタを使用して作成することができます。ただし、保存の際には注意が必要です。たとえばWindowsのメモ帳はデフォルトの拡張子が「.txt」のため、そのまま保存してしまってはCSSが機能しないことになります。初心者によくあるミスです。CSSファイルの拡張子は「.css」であることを知っておきましょう。
また、文字コードの選択も気を付けた方がいいです。「UTF-8」以外で保存すると文字化けが起きる可能性があります。その他、ファイル名の記載は半角英数字にしましょう。
上記全ておさえておくべき基礎知識です。

まさに書き方の基本！頻繁に使用されるCSSのプロパティ

まさに書き方の基本！頻繁に使用されるCSSのプロパティ

頻繁に使用されるCSSのプロパティが分かれば、基本的な部分はある程度自力で対処することも可能でしょう。
以下、確実に知っておきたい主要なプロパティをピックアップします。

文字の装飾

テキストの見栄え、すなわち字面の良さは視認性を高めることはもちろん、読み手に与える印象にも大きく影響します。文字においてCSSでできることはサイズの大小、太さ、斜体変換、色、影、フォントタイプ……等々の調整です。

まず、サイズのプロパティは「font-size」を用います（値における単位は、デジタル画像を構成する最小かつ環境に左右されない「px」や、基本設定（親要素）に対して相対的に表現される「em」が使われます）。

太さのプロパティは「font-weight」です。値の範囲は100、200、300、……900の9段階。boldと設定した場合は700の太さを表します。Lighterを使えば相対的に1段階細く、bolderであれば1段階太くできるなど簡単に調整することも可能です。

斜体変換などを行いたいなら、「font-style」のプロパティを使いましょう。なお、値はそれぞれ標準体がnormal、イタリック体がitalic、斜体がobliqueです。

色に対するプロパティは「color」です。値はred、blue、black、greenといった色名もしくは#000000などのカラーコードを使用します。

文字に影を付けるプロパティは「text-shadow」です。プロパティに対して複数の値を指定できます（それぞれ半角スペースで区切りましょう）。
「text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;」の形式に当てはめれば反映可能です。

フォントタイプを変更するためには「font-family」プロパティを使用します。
CSSの設定では複数のフォントを指定することが可能です。フォントの種類を,（カンマ）で区切って、先に記載した順番で適用されます。ブラウザによっては、和名だと識別できないことがあります。英語表記のフォント名も併せて指定するようにしましょう。

指定方法説明
フォント名フォントの名前を記述。日本語や名前にスペースが含まれる場合は、シングルクォーテーション（’）あるいはダブルクォーテーション（”）で囲って指定。
キーワードserif（明朝タイプ）、sans-serif（ゴシックタイプ）、cursive（筆記体）、fantasy（装飾系）、monospace（等幅）から指定。

h1 { font-family: serif; } h2 { font-family: “ヒラギノ丸ゴ Pro W4″,”Hiragino Maru Gothic Pro”, sans-serif; }

ユーザーのデバイスにインストールされているフォントでしかWebサイトに表示できなかった以前とは異なり、今はWebサーバー上にあるWebフォントの技術のおかげで、ユーザー環境に無いフォントも対応可能です。それゆえ、この部分を調整するケースも多いでしょう。

Webフォントの実装方法

Googleが提供する無料のWebフォントサービス「Google Fonts」を実装するとしましょう。

まず「Google Fonts」のWebサイトにアクセスしてください。そこで使いたいフォントを探します。

使用するタイプが決まれば、そのフォントページの画面右上にある「SELECT THIS FONT」のボタンを押しましょう。

続けて出てくる画面下にある黒い帯も同様にクリックし、次ページの「Embed Font」部分に表示されるコード（<link href=”https://fonts.googleapis.com/css?family=使用するフォントタイプ” rel=”stylesheet”>）をHTMLファイルの<head>内に記述してください。

「Specify in CSS」部分にあるコードは、CSSファイル内のフォントを適用させたい要素に対して記述。仮に<h1>タグであれば、h1{font-family: 使用するフォントタイプ, sans-serif;}のように指定します。

テキスト回りの調整

行間や文字間隔、配置などテキスト周り全体を整えるプロパティも知っておいた方がいいでしょう。

行間のプロパティは「line-height」です。値に使われるnormalはブラウザ基準。単位無しの数字は指定のフォントサイズとの比率です。

文字間隔のプロパティには「letter-spacing」を使います。初期設定の値はこちらもnormalです。具体的に指定する際の単位はpxでも問題ありませんが、相対的な比率を表すemの場合、フォントサイズに応じて字間を変えてくれます。

文字や画像の水平方向の位置を調整するプロパティが「vartical-align」です。値には文字を上端に揃えるtop、中央に揃えるmiddle、下端に揃えるbottomがあります。

文字の背景色のプロパティは「background」です。なお、ページ全体の背景を彩る場合は、「background-color」を使います。加えて、画像を背景にするプロパティは「background-image」です。このとき、値には画像が格納されているURLを記述します。

テキストを揃えるプロパティが「text-align」です。値には左揃えのleft、右揃えのright、中央揃えのcenter、両端揃えのjustifyがあります。

余白

サイト全体を見やすくするためには余白が有効です。
主に「margin」と「padding」の2種類のプロパティを使って整えます。
前提として、それぞれが該当する領域への正しい認識が大事です。
まず要素をボックス（四角い箱）と考えましょう。
「margin」は、対象のボックスから他のボックスまでの距離です。
「padding」は、対象のボックスの縁からコンテンツ（テキストや画像などのリソース）までの距離に当たります。
また、「margin」と「padding」の間の枠線は「border」と呼ばれ、対象ボックスの横幅は「width」、高さが「height」です。

要素の外側の余白「margin」

「margin」では要素の四辺に「margin-top」「margin-bottom」「margin-left」「margin-right」（順に上、下、左、右）といった指定方法があります。値は、それぞれの距離です（「auto」を指定すると関連するプロパティの値が自動的に設定されます）。
具体的には以下の形式で書きます（半角スペースで区切り、上下左右の余白を「margin」のみで一括指定することも可能です）。

div { background: カラーコード; margin-top: 距離px; margin-left: auto; }

要素の内側の余白「padding」

「margin」同様に四辺全て指定できます。各プロパティは「padding-top」「padding-bottom」「padding-left」「padding-right」です。
具体的には以下の形式で書きます（半角スペースで区切り、上下左右の余白を「padding」のみで一括指定することも可能です）。

div { background: カラーコード; padding-bottom: 距離px; padding-right: auto; }

線を引く

特定の範囲を罫線で囲みたいときには「border」を使うと便利です。値は1本線を意味するsolidに加えて半角スペースで区切りながらpx単位の数値などで指定します。たとえば「border: solid 3px」とすることで範囲を簡単に3pxの太さの線で囲むことが可能です。

囲み範囲の角に丸みを持たせたい場合は「border-radius」をプロパティとして使います。

文章の区切りに一本だけ横線を引きたければ、範囲の下側の境界線を定義する「border-bottom」のプロパティを用いてください。

リストの装飾

リスト項目の先頭に表示されるマーク（リストマーカー）の見栄えを変更したいなら、「list-style-type」を使いましょう。
<ul>タグや<ol>タグ内で記述します。
実は値が多いのもポイントです。以下、羅列します。なお、括弧内は表示されるデザインの説明です。

none（リストマーカーを非表示）
disc（黒丸）
circle（白丸）
square（黒四角）
decimal（数字）
decimal-leading-zero（数字）
lower-roman（小文字のローマ数字）
upper-roman（大文字のローマ数字）
lower-alpha（小文字のアルファベット）
upper- alpha（大文字のアルファベット）
cjk-ideographic（漢数字）
hiragana（ひらがな）
katakana（カタカナ）

また、「list-style-position」では、リストマーカーの位置をボックスの外側（値はoutside）か内側（値はinside）か指定できます。
加えて、「list-style-image」をプロパティとして使うと、リストマーカーに画像を指定することが可能です（値には画像ファイルの画像URLを記述します）。

おさえておきたいCSSの便利な使い方

おさえておきたいCSSの便利な使い方


CSSを扱う際、当然、可能な限り効率よく、そして都合よく適用したいものです。
本章では、制作過程において知っておくと便利な使い方をいくつかピックアップ。
これまでお困りだったシチュエーションでの解決策や、願望をかなえるヒントがあるかもしれません。
要チェック！

classとidを使用した指定方法

サイト制作の途中、ページ内で同じタグを複数使用したいけれども装飾はそれぞれ変えたいといった場面が出てくるでしょう。
その際、対象箇所へclass（クラス）やid（ID）を指定することで、デザインの部分変更が可能になります。

classはタグにつける名前を表す属性です。まず、HTMLファイルでタグにこのクラスを追記し、任意の名称を記述しましょう。一方で、CSSファイルにはピリオド（.）と指定のクラス名、適用させたいスタイルを書きます（HTMLのclass属性にはピリオドは必要ありません）。
たとえば、<p>タグの色を一部、全体とは異なる青にしたいときもあるでしょう。この場合、クラス名を仮に「blue」とすれば、HTMLファイルでは、<p class=”blue”>をその箇所にて記述し、CSSファイルでは.blue｛color： 青のカラーコード;｝と追記することで反映できます。

idでも同様です。こちらは、ピリオドではなくハッシュ（＃）を用います。ID名が「blue」なら、<p id=”blue”>をHTMLファイルに、CSSファイルには＃blue｛color： 青のカラーコード;｝を追記すればOKです。

なお、タグ別に分けたい場合は、CSSファイルの方で、ピリオドやハッシュの前にh1やpをつけるようにしてください（p.blue、h1＃blueなど）。

CSSグリッド

タイル型のレイアウトを組む際には、CSSグリッド（Chrome、Safari、Firefox、Edgeに対応。Internet Explorerで使用する場合は独自記述が必要）の書き方を知っておきましょう。

たとえば、6個のボックスを水平方向に3つずつ2列に並べる場合、まず、HTMLファイルでは、親要素のクラス名「container」の<div>タグと、その中に子要素として「item」と付いたクラスの<div>タグを6つ作成します。

CSSファイルに用いるプロパティは「display」です。
.container{display: grid;}と記述してください。（併せて宣言ボックスを追加し、「item」の背景色（background）や内側の余白（padding）も指定しましょう）。

次に、「grid-template-columns」のプロパティを使い横並びの設定を行います。item（ボックス=グリッドアイテム）の横幅もここで指定。grid-template-columns: 幅px 幅px 幅px;といった具合に1列に並べる分だけ半角スペースで区切りそれぞれ数値を記述します。ちなみに、pxではなく、比率を表す「fr」を用いると（grid-template-columns: 1fr 1fr 1fr;のように指定）、画面に合わせた伸縮（自動調整）が可能です。これによってコンテナー内の右側に外観バランスの悪いスペースが生まれることを防げます。

さらには各ボックス間の余白を「gap」のプロパティで指定しましょう（gap: 幅px）。

最後に高さ調整です。プロパティは「grid-template-rows」を用います。
「grid-template-columns」同様、必要な数（行）だけ半角スペースで区切りそれぞれ指定すればOKです（grid-template-rows: 幅px 幅px;）。

デフォルトCSSのリセット

ブラウザごとにデフォルトのCSSは異なります。そう、余白やフォントサイズなどブラウザによって見え方が変わってきてしまうのです。
つまり、ブラウザ間の表示統一のためにはCSSをリセットしなければなりません。
では、どうすればよいのでしょうか。
その方法は大きく分けて2種類です。全てをリセットするタイプ（ファイル）とデフォルトのスタイルを生かしてブラウザ間の最小限の誤差だけをなくすタイプ（ファイル）です。
前者で使うファイルの一例が「destyle.css」です。後者であれば「ress.css」「Normalize.css」などが挙げられます。
HTMLファイルの「head」内にて、ファイルをダウンロードあるいはWeb上に公開されているURLを直接記述すれば適用可能です。

CSSで対応できるアニメーション

CSSで対応できるアニメーション

CSSが可能にする表現はやり方次第でさまざまです。とりわけ、アニメーションなどの凝った動きは最たる例といえるでしょう。本章では、初心者でも知っておきたいアニメーションについていくつか紹介します。

テキストが一文字ずつ浮かび上がるアニメーション

対象テキストに当たる親要素（.titleなど）にdisplay: flex;を指定します。
文字はそれぞれ<span>で括り、一文字ずつ移動させるために「transform」のプロパティを使用。文字の上端がはみ出ないよう移動幅はtransform: translate(0, 105%);といった具合にやや大きめに設けることもポイントです。続けて「transition」で動きの加減速（イージング）を指定します。
加えて、各文字が途切れず流れるためには秒数指定が必要です。子要素のnth-childを加えて「transition-delay」を用います。以下、具体的な実装例です。

.title span {
display: block;
transform: translate(0, 105%);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.title.-visible span {
transform: translate(0, 0);
}

.title span:nth-child(2) {
transition-delay: 0.06s;
}

マウスホバーでボタンの中心が広がるアニメーション

通常時はa要素、ホバー時に広がる部分は:afterで作成します。
親となるaはblock要素の真円にして、position: relative;を指定。併せて幅と高さ、まわりにボーダーを設けるなどします。
:afterでは親と同じ大きさの真円でabsoluteを用いて中央に配置（topとleftを50%で始点を中心に移動させ、transformのtranslate(-50%, -50%)で:after自身の幅と高さ50%分を戻します）。
ホバー前はscale(0, 0)で大きさを0%に指定。
ホバー後にscale(1.1, 1.1)になるように設定することで、大きさ0%から110%に拡大するアニメーションが実装されます。
具体的には以下の通りです。

a {
box-sizing: border-box;
display: block;
position: relative;
width: 100px;
height: 100px;
border: solid 6px #000;
border-radius: 50%;
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
}

a:after {
content: “”;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0, 0);
transition: transform ease 0.4s;
}

a:hover:after {
transform: translate(-50%, -50%) scale(1.1, 1.1);
}

a:before {
content: “”;
position: absolute;
z-index: 10;
top: 55%;
left: 50%;
width: 20px;
height: 20px;
border-style: solid;
border-color: #000;
border-width: 6px 0 0 6px;
transform: translate(-50%, -50%) rotate(45deg);
transition: border-color ease 0.1s;
}

a:hover:before {
border-color: #fff;
}

CSSを書くうえで参考にしたいデザイン例

CSSを書くうえで参考にしたいデザイン例

あらゆるサイトをリサーチするなかで思わず真似したくなる印象的なデザインは多々あります。
以下、紹介するサイトはいずれも参考になり得るものばかりです。
それぞれ使われている意匠やテクニックに注目しながら、自身の制作にもうまく取り入れてみてください。

配色の妙が光るデザイン例

Thomson Safaris – Wildlife Safaris, East Africa

メインカラーのブラウンを使ってサファリの雰囲気を創出。写真との組み合わせもばっちりです。

Best mobile app, web development and ui ux design agency in USA

ブルーとホワイトのコントラストに洗練を感じます。
視認性の高さもピカイチ！
また、ホバーで絶妙な動きを付与するなど遊び心さえ見受けられます。スタイリッシュかつユーモラスなデザインです。

余白を巧みに使ったデザイン例

Music – Apple（日本）

非常にシンプル。だからこそ、製品（画像）の魅力が伝わりやすくコピーの訴求力も高いのだと考えます。
無駄を削ぎ余白を贅沢に使ったきわめてシックなデザインです。

小島国際法律事務所

余白が映え、上質かつ落ち着いた雰囲気が湛える素晴らしいサイトです。
テキストブロックにおける「margin」と「padding」の使い方もまさしくお手本にしたいデザインといえます。

コーディング初心者がCSSを書く練習に使える主なサービス

コーディング初心者がCSSを書く練習に使える主なサービス

ソースコードの動きをすぐに確かめたいときに便利なサービス（プレイグラウンド）を紹介します。
コーディング初心者は練習用にぜひ活用してみてください。

CodePen

定番のサービスが「CodePen」です。
外観の魅力もさることながら、人気のデモ「Pens」やWebプロジェクトのビルドとデプロイを可能とするオンラインIDE（統合開発環境、Integrated Development Environment）など機能面も充実しています。

CSS Deck

「CSS Deck」は、バリエーション豊富な機能が人気を博すプレイグラウンドです。HTMLやJavaScriptでも使えます。シンプルで分かりやすくユーザビリティの高さがうかがえます。

CSSをこれから学びはじめる方々へ

CSSをこれから学びはじめる方々へ

見栄えの良いホームページ（Webサイト）を作成するにはHTMLに加えCSSの知識が不可欠です。さらに述べると、ここでは登場しないJavaScriptやPHPについても最低限の理解が求められます。それ以前に配色やレイアウト、タイポグラフィといったデザイン自体の基礎もおさえておかなければならないでしょう。
他方、CSSに限ってさえ、慣れないうちは実践的な素養を身につけるのに苦労します。ある程度の要領を得るには努力必至です。
これから学びはじめる人は、基本を疎かにせず向上心を持って好奇心を絶やさず取り組んでみてください。
あらゆる制作物に触れ、都度技術をインプットし、コツコツと経験を重ねることが王道であり実は一番の近道だと考えます。その最中、拙稿が少しでもお役に立てれば幸いです。

SHARE
FacebookTwitterLineHatenaShare

この記事を書いた人

ヒゴ

ヒゴ

この人が書いた記事をもっと読む

無知、無能、無粋、無才、無点法……。SEOやアクセス解析に腐心しつつも、それらはまるで逃げ水のように追いかけては遠く離れ、ようやく掴んだと思った矢先にはシビアな現実を突きつけられる有様です。あるいはライターとして名を連ねることに気後れしながら、日曜大工のスタンスで恣意的かつ箸にも棒にもかからない駄文をまき散らしています。隠し切れない底意地の悪さ。鼻持ちならない言い回し多数。どうかご容赦ください。

RELATED 関連記事

関連記事をもっと見る

RECOMMENDED おすすめの記事

RANKING ランキング

  • WEEKLY
  • MONTHLY

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT