Webサイトを作成するうえで、CSSはとても役立つ言語です。以前はHTMLタグでWebサイトの見た目を装飾していましたが、今ではさらに見栄えを良くするためにCSSを使います。Webサイト制作をする際には、CSSのスキルは必須といえるでしょう。
そこで今回はCSSの概要と基本的な使い方、高頻度で使われているCSSのプロパティを紹介します。CSS初心者の方でもすぐに実践できるよう、CSSファイルの作成方法やHTMLファイルに読み込む方法をソース付きで解説しますので、ぜひ参考にしてください。
目次
ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案
・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談～ご紹介まで完全無料
CSSの役目について
CSS（カスケーディングスタイルシート）とは、Webサイトのスタイルを指定するための言語です。HTMLやXMLなどで記述されたWebサイトの体裁や見栄えを表現するために用いられます。例えば、文字の色や大きさ、背景の色、要素を表示する位置などはCSSで設定します。
一方で、Webサイトを制作に使用するHTMLやCSS、JavaScriptは1つのテキストファイルにまとめて書くことも可能なため、役割の違いがわかりづらい言語です。ここではCSSでできることや、HTML・CSS・JavaScriptの関係性、CSSでできることなどを詳しく解説していきます。
●CSSでできること
CSSはWebサイトの見た目を整えることができます。複数のページに1つひとつデザインを指定してしまうと設定や変更する際に手間がかかりますが、CSSファイルをうまく利用すると複数のページのデザインを一括で設定・変更可能です。
ここではCSSでできることをさらに詳しく解説します。
デザインを一括で変更できる
CSSは1つのCSSファイルで複数のページにデザインを設定できます。CSSファイルを編集することで、設定したすべてのページのデザインを一括で変更することも可能です。
設定方法も難しいものではありません。例えば「sample.css」という名前のCSSファイルを用意して、HTMLファイルに「sample.css」を読み込む設定をするだけで、デザインを適用できます。
デザインを一括で変更できる記述方法は「外部参照」といわれています。後述の「CSSの基本的な使い方」で詳しく解説します。
デザインの微調整ができる
CSSでは様々な要素の微調整ができます。例えば、文字や画像の表示位置を左寄せにしたり、中央寄せにしたりなどの調整はもちろん、ピクセル単位で表示位置を微調整することも可能です。
長い文章を表示する場合、そのまま表示すると読みにくい見た目になりますが、CSSでは文章の行間や文字の間隔を読みやすい見た目に微調整できます。
メディアごとに表示スタイルを変更できる
Webサイトを閲覧するユーザーが使っている端末の種類は、PCやスマートフォン、タブレットなど様々です。PC用のWebサイトをスマートフォンで閲覧した場合、画像が切れてしまったり横スクロールが出てしまったりして見づらい可能性もあるでしょう。
またPC1つでもモニターのサイズが異なりますし、スマートフォンの機種ごとに画面サイズも異なります。すべてに対応するのは難しいことだといえるでしょう。
しかしCSSにはMedia Queriesという機能があります。1つのソースで異なる画面サイズを持つデバイスにごとに、表示するデザインを変更させるレスポンシブ対応が可能です。
●HTML・CSS・JavaScriptの関係性
HTMLとCSS、JavaScriptはWebサイト制作に使います。HTMLとは、見出しや文章、表、ヘッダー情報など、ページの文書構造を形作るための言語です。ページを作成する際には必ず用いられます。
タグ（<タグ>～</タグ>）と呼ばれる目印でページの構成要素を記述するのが基本の書き方です。例えば、ページのタイトルであれば「<title>Webページのタイトル</title>」、別のページへリンクをつける際は「<a href=”URL”>別ページはこちら</a>」というように文章をタグで囲って書きます。
一方のCSSは、HTMLで記述したタグの見栄えを整える役割です。例えば「<a href=”URL”>別ページはこちら</a>」だけでは、テキストに下線が付いただけのリンクが表示されますが、CSSを利用することでリンクボタンにしたり、色を変更したりできます。
CSSとHTMLは役割が異なりますが、密接な関係性があるため両方の書き方を覚える必要があるでしょう。
見栄えだけであればCSSとHTMLを覚えれば十分ですが、動きをつけたい場合はJavaScriptも覚えることが大切です。例えばCSSとHTMLで作ったリンクボタンに、マウスカーソルが乗ったら色が変わるようにしたり、凹んだように見せたりなどのアニメーションを追加することができます。その他にもJavaScriptでできることは多彩です。
Webサイトを作るうえで、HTMLとCSS、JavaScriptはどれも外せない言語といえます。
CSSの基本的な使い方
これまでの解説でCSSとは何なのか理解できたかと思います。次は実際にCSSファイルを作ってみましょう。CSSファイルの作成や編集はテキストエディタで行えるため、事前に準備するものはありません。
●CSSファイルを作成する
まずテキストエディタを開きます。Windowsに標準搭載されている「メモ帳」でも構いません。テキストエディタで以下のようにCSSを記述してみましょう。
.main{
width: 100%; /* 幅指定 */
background-color: #000; /* 背景色指定(黒色) */
text-align: center; /* テキスト表示位置指定(中央寄せ) */
}
.text{
font-size:30px; /* 文字サイズ指定 */
color: #fff; /* 色指定(白色) */
}
入力が終わったらファイル名を「style.css」、保存先をデスクトップにして保存します。CSSファイルは拡張子を「.css」にすることで、コンピュータがCSSファイルと判断してくれます。これでCSSファイルの作成が完了です。
●CSSをHTMLファイルに読み込ませる
次に、先ほど作成したCSSファイルをHTMLファイルに読み込ませます。HTMLファイルもテキストエディタで作成可能です。テキストファイルを新規作成して次のHTMLタグを記述してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset=”urf-8″>
<link rel=”stylesheet” href=”style.css”>
<title>スタイルシートを体験</title>
</head>
<body>
<div class=”main”>
<span class=”text”>スタイルシートとHTMLを作成してみました！</span>
</div>
</body>
</html>
入力が終わったらファイル名「index.html」で保存します。保存場所はCSSファイルと同じくデスクトップにしてください。
完了したら、デスクトップの「index.html」をダブルクリックしてみましょう。ブラウザが開き、黒色を背景にした「スタイルシートとHTMLを作成してみました！」の白色の大きな文字が中央に表示されたら成功です。
以上がCSSの基本的な使い方です。CSSをHTMLファイルに読み込ませる記述方法は、他にもあります。次の項目で紹介します。
CSSはどこに記述すれば良いのか
CSSの基本的な使い方を紹介しましたが、CSSを読み込ませる方法は他にもあります。Webサイト制作では前項の「CSSの基本的な使い方」で紹介した方法をメインに使いますが、他の書き方を利用する場面がありますので、覚えておきましょう。
●インライン形式
インライン形式とは、HTMLのタグの中に直接CSSを書く方法です。例えば、前項の「CSSの基本的な使い方」で紹介した方法をインライン形式にすると以下のようになります。
<div style=”width: 100%;background-color: #000;text-align: center;”>
<span style=”font-size:30px;color: #fff;”>スタイルシートとHTMLを作成してみました！</span>
</div>
HTMLタグの中に「style=””」を記述して、スタイルを指定します。HTMLの各要素に直接CSSを記述するため、初心者でもわかりやすい方法といえます。
しかし共通のCSSを編集する場合は、すべてのページを更新しなければなりません。インライン形式の利用は、Webサイト制作の途中の確認用に使うのがおすすめです。
●ヘッダー埋め込み形式
ヘッダー埋め込み形式とは、HTMLタグのhead要素内にスタイルを書く方法です。先ほど作成したテキストをヘッダー埋め込み形式で記述すると以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset=”urf-8″>
<title>スタイルシートを体験</title>
<style>
.main{
width: 100%;
background-color: #000;
text-align: center;
}
.text{
font-size:30px;
color: #fff;
}
</style>
</head>
<body>
<div class=”main”>
<div class=”main”>
<span class=”text”>スタイルシートとHTMLを作成してみました！</span>
</div>
</body>
</html>
<head>～</head>の中に、CSSを書くための「<style>～</style>」を追加します。CSSファイルは不要ですが、そのページだけしか装飾が適用されないというデメリットがあります。
インライン形式と同じく、全ページ共通のスタイルを変更する場合は、すべてのページを更新しなければなりません。ヘッダー埋め込み形式の利用は、1つのページだけ適用したいデザインがある場合のみ使うと良いでしょう。
●外部参照
外部参照とは、HTMLファイルにlink要素でCSSファイルを参照する方法です。link要素の書き方は以下の通りですが、詳しい書き方は前項の「CSSの基本的な使い方」を参考にしてください。
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
デザインの変更をする際は、CSSファイルを更新するだけですべてのWebページに反映されます。更新効率が高いため、Webサイトの制作は外部参照を使うことがほとんどです。外部参照を積極的に使うことをおすすめします。
役に立つCSS基本プロパティを紹介
CSSのプロパティとは、装飾やデザインの内容のことです。例えば、色を指定するCSSの「h1{color: #fff;}」であれば、「color」がプロパティになります。ここではよく利用されるCSSのプロパティを紹介します。
●color
文字の色を指定するためのプロパティです。カラーコード、RGB値などで色を指定します。
h1{
color: red; /* 赤色 */
color: #ff0000; /* 赤色 */
color: rgb(255,0,0); /* 赤色 */
}
●font-size
文字サイズを指定するプロパティです。px、em、rem、%などで文字のサイズを指定します。
h1 {
font-size: 20px;
font-size: 1.3em;
font-size: 1.2rem;
font-size: 140%;
}
●text-align
文字の行揃えや均等割付を指定するプロパティです。left（左揃え）、center（中央揃え）、right（右揃え）、justify（均等割付）で指定します。
h1 {
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
}
●background-color
背景色を指定するプロパティです。文字の色(color)と同じく、カラーコードやRGB値などで色を指定します。
h1 {
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
}
●text-decoration
文字の装飾方法を指定するプロパティです。none（装飾なし）、line-through（取り消し線）、overline（上線）、underline（下線）、blink（点滅）の値を指定できます。半角スペースで値を区切ることで複数指定も可能です。
h1 {
text-decoration: none;
text-decoration: line-through;
text-decoration: overline underline blink;
}
「CSSデザインテンプレート」サイトも活用しよう
「CSSデザインテンプレート」サイトとは、CSSのみでデザインが構成されているテンプレートを配布しているサイトのことです。個人向けはもちろん、企業やビジネス、飲食店向けなどジャンルも豊富に用意されています。
1からHTMLやCSSを使用してWebサイトを制作しなくても良いため、作業時間を短縮することが可能です。またテンプレートのHTMLファイルやCSSファイルを見ることで、どのようにWebサイトが作られているか学ぶこともできます。
CSS初心者のうちは「CSSデザインテンプレート」サイトを積極的に活用しましょう。
まとめ
CSSはWebサイトの装飾のために使われる言語です。Webサイトの制作を行う方は、HTMLと一緒に覚えるべきでしょう。CSSを記述する場所は3種類ありますが、基本的にWebサイトで利用するのは外部参照です。まずは外部参照でスタイルを指定する方法を身につけるようにしましょう。
またCSSの勉強をはじめたばかりのときは「CSSデザインテンプレート」のサイトを活用するのもおすすめです。作業時間を短縮するメリットはもちろん、教材として参考になるためCSSのスキルを早く身につけることができるでしょう。
ホームページ制作会社選びはプロにお任せ完全無料で全国5000社以上からご提案
・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談～ご紹介まで完全無料
■ホームページ制作に関連した記事
 |
|
 |
