Webページをより美しく、そして魅力的にするためには、CSSという技術が欠かせません。
CSSを使うと、文字の色やサイズ、背景画像、レイアウトなど、Webページの見た目を思い通りにカスタマイズすることができます。
本稿では、CSSの意味や基礎、具体的な書き方まで、初心者の方にもわかりやすく解説していきます。
なお、CSSは、HTMLの基礎知識があると理解が進みやすいため、以下の記事も参考にしてください。
![](https://tcd-theme.com/wp-content/uploads/2024/07/what-is-html-300x300.jpg)
自分でWebサイトを作ってみたいと思ったことはありませんか?そのWebサイトの基礎となるのが「HTML」です。 HTMLを学ぶことで、オリジナルのWebページを作成できるようになります。 本稿では、HTMLの基礎知識と基本構造を初心者の方にもわかりやすく解説します。 HTMLと...
目次
CSSとは?
CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページの見た目、つまりデザインを装飾するためのプログラミング言語です。
具体的には、以下のような装飾をCSSで指定することができます。
- テキストの装飾 :フォント、色、サイズ、太字、斜体など
- 背景の設定:色、画像、グラデーションなど
- レイアウト:配置、枠、余白など
HTMLとCSSの関係性
HTMLとCSSは、Webページを作成する上で欠かせない二つの言語です。
HTML(HyperText Markup Language)は、Webページの構造を定義する言語です。見出し、段落、リスト、画像、リンクなどの要素を配置し、ページの骨組みを作ります。
一方で、CSSはWebページの見た目を装飾する言語です。フォント、色、背景、レイアウトなどを設定し、ページのデザインを整えます。
わかりやすく言うと、HTMLは家の骨組み、CSSは家の内装・外装に例えることができます。
HTMLで構造を作ったWebページに、CSSでテキストの装飾、背景の設定、レイアウトなどを加えることで、より魅力的なホームページやブログを作ることができます。
![](https://tcd-theme.com/wp-content/uploads/2024/07/what-is-homepage-300x300.jpg)
「ホームページ」という言葉は身近なものですが、「ウェブサイト」との違いやその種類についてご存じですか? 本稿では、ホームページとは何か、Webサイトとの違い、そして様々な種類のホームページとその役割について、初心者の方にもわかりやすく解説していきます。 ホームページとは? ホー...
メリット
- デザインの一元管理:HTMLからCSSを分けることで、デザインの変更を一括で行うことができる。
- メンテナンス性の向上:HTMLとCSSを分けることで、コードが見やすくなり、メンテナンスが容易になる。
- ブラウザ間の互換性:CSSは、異なるブラウザでもほぼ同じ表示を実現できる。
- レスポンシブデザイン:デザインをスマホやPCなど機器の画面サイズに合わせて自動的に調整できる。
- アニメーションや効果:様々なアニメーションや視覚効果を記述することができる。
- 再利用性:作成したCSSを他のWebページでも再利用することができる。
デメリット
- ブラウザ間の差異:古いブラウザや一部のブラウザでは、うまく表示されない場合がある。
- 学習に時間がかかる:CSSは多くの要素があり、習得するにはある程度の学習コストがかかる。
- 修正に時間がかかる:特に複雑なレイアウトを作成する場合、CSSの記述が複雑になり、修正に時間がかかることがある。
- 読み込み速度の低下リスク:CSSの記述ミスや過度なスタイルの適用は、ページの読み込み速度が低下する場合がある。
CSSの主なバージョン
他のプログラミング言語と同様に、CSSにもバージョンが存在し、新しいバージョンがリリースされるたびに、より多くの機能や表現が可能になっています。
- CSS1(1996年):初代のCSSで、フォント、色、背景などの基本的なスタイル指定を提供。
- CSS2(1998年):表示媒体によって自動的にスタイルシートを変更、音声を読み上げるブラウザや印刷にも対応。
- CSS3(2011年):グラデーション、アニメーション、柔軟なレイアウトなどが可能。
ブラウザは、新しいバージョンのCSSの機能をサポートしている限り、古いバージョンの記述も解釈できるようになっています。
しかし、特定の機能を使いたい場合や、古いブラウザとの互換性を考慮する必要がある場合には、CSSのバージョンを意識する必要があります。
例えば、CSS3の新しい機能を使いたい場合は、その機能がどのブラウザでサポートされているのか確認する必要があります。
CSSの書き方の種類
CSSの書き方の種類は主に3つあります。それぞれ初心者向けにメリット・デメリットも含めて解説します。
インラインスタイル
HTMLタグ内にstyle属性で直接記述する方法です。
<p style="color:red;">この文字は赤色です。</p>
- メリット:特定の要素にだけスタイルを適用したい場合に便利。
- デメリット:HTMLとCSSが混ざり合い、コードが見づらくなる場合がある。
内部スタイルシート
HTMLの<head>
タグ内に<style>
タグを入れて、その中にCSSを記述する方法です。
<head>
<style>
p {
color:green;
}
</style>
</head>
- メリット:複数の要素に同じスタイルを適用したい場合に便利。
- デメリット:HTMLファイルが大きくなる場合がある。
外部スタイルシート
HTMLファイルとは別のCSSファイルを作成し、HTMLの<head>
要素内にある<link>
タグで読み込む方法です。
一般的には、この外部スタイルシートが最も推奨される記述方法です。
<head>
<link rel="stylesheet" href="style.css">
</head>
- メリット:HTMLファイルとCSSファイルを分離できるため、保守性が向上する。
- デメリット:複数のCSSファイルを指定した場合、ファイルの数が多くなる。
CSSの基本的な書き方
CSSは、セレクタ、プロパティ、値の3つで構成されています。
- セレクタ:スタイルを適用したいHTML要素を指定(
h1
〜h6
、p
など) - プロパティ:変更したい要素の属性を指定(色やフォントサイズなど)
- 値:プロパティに設定する値を指定(色名やフォントサイズの数値など)
以下のCSSの例では、p
がセレクタ、color
がプロパティ、blue
が値に該当します。
p {
color:blue;
}
この例を元に、CSSの書き方の手順を解説します。
- セレクタ(
p
など)を指定 - 波カッコ(
{
)を記述して改行 - プロパティ(
color
など)を指定し、コロン(:
)を記述 - 値(
blue
など)を指定し、セミコロン(;
)で記述して改行 - 波カッコ(
}
)で閉じる
セレクタ、プロパティ、値には、様々な種類があります。以下、記述方法と併せて初心者向けに解説します。
セレクタの種類
セレクタとは、スタイルを適用したいHTML要素(h1
〜h6
、 p
など)を指定するためのものです。複数のセレクタを組み合わせて、より詳細な指定を行うこともできます。
CSSには様々な種類のセレクタがあり、それぞれ特徴があります。以下、初心者向けに主なセレクタをご紹介します。
要素セレクタ
要素セレクタとは、HTMLの要素の種類(タグ名)を指定して、その種類の全ての要素に同じスタイルを一気に適用するための方法です。
例えば、全ての段落(p要素)の文字色を青色にしたい場合、要素セレクタを使います。
<p>ここにテキストが入ります。</p>
p {
color: blue;
}
上記のCSSでは、p
というセレクタを使って、全ての段落の文字色を青色に設定しています。
要素セレクタは、HTMLのタグ名(p
、h1
、div
など)をそのままセレクタとして使用します。
クラスセレクタ
クラスセレクタとは、HTMLの要素にクラス属性を追加することで、その要素に特定のスタイルを適用することができます。
このクラス属性の値をクラス名といいます。CSSでは、このクラス名を使って、複数の要素に同じスタイルを一括で設定することができます。
<p class="highlight">ここに強調したいテキストが入ります。</p>
上記のHTMLコードでは、<p>
タグにclass="highlight"
という属性が追加されています。このhighlight
がクラス名です。
.highlight" {
background-color: yellow;
}
上記のCSSコードでは、.highlight
というクラス名を持つ要素の背景色を黄色に設定しています。つまり、HTMLの<p>
タグにclass="highlight"
と指定した部分の背景色が黄色になるということです。
※クラス名は、半角英数字とハイフン(-
)を使って自由に付けることができます。
※CSSの中で、クラス名の前には必ずドット(.
)をつけます。これはクラスセレクタであることを示すための記号です。
IDセレクタ
IDセレクタとは、HTMLの要素にID属性を追加し、固有のID名を付け、スタイルを適用することができます。
<h1 id="page-title">ここにページタイトルが入ります。</h1>
上記のHTMLコードでは、<h1>
タグにid="page-title"
という属性が追加されています。このpage-title
がID名です。
#page-title {
text-align: center;
}
上記のCSSコードでは、#page-title
というIDを持つ要素のテキストを中央揃えにしています。つまり、HTMLの<h1>タ
グにid="page-title"
と指定した部分のテキストが中央に表示されるということです。
※ID名は、ページ内で一度しか使用できません。重複のない固有の名前を付けるようにしましょう。
※CSSの中で、ID名の前には必ずシャープ(#
)をつけます。これは、IDセレクタであることを示すための記号です。
子孫セレクタ
子孫セレクタとは、ある要素の中に含まれる、全ての子孫要素(子要素、孫要素、ひ孫要素など)に、一括でスタイルを適用するためのセレクタです。
<div class="container">
<p>これは子要素です。</p>
<p>これも子要素です。</p>
<div>
<p>これは孫要素です。</p>
</div>
</div>
.container p {
color: blue;
}
上記のCSSでは、.container
というクラスを持つdiv
要素(親要素)に含まれる全てのp
要素(子要素、孫要素)の文字色を青色に設定しています。
- 子要素、孫要素、ひ孫要素など、階層がどれだけ深くても、全ての子孫要素にスタイルが適用されます。
- 子孫セレクタでは、親要素と子孫要素の間を空白で区切ります。
子セレクタ
子セレクタとは、ある要素の直接の子要素にのみスタイルを適用するためのセレクタです。子孫セレクタと違い、孫要素やひ孫要素には適用されません。
以下の例では、コンテンツをグループ化するdiv
要素の直下にあるp
要素のみ青色が適用され、次のp
要素には適用されません。
<div class="container">
<p>これは子要素です。</p>
<p>これも子要素です。</p>
<div>
<p>これは孫要素です。</p>
</div>
</div>
.container > p {
color: blue;
}
上記のCSSでは、.container
というクラスを持つ要素の直接の子要素であるp要素のみ、文字色を青色に設定しています。
つまり、2番目のdiv要素内にあるp要素(孫要素)は、青色になりません。
※子セレクタでは、親要素と子要素の間に>
記号を使用します。
隣接セレクタ
隣接セレクタとは。ある要素の直後に位置する兄弟要素にのみスタイルを適用するためのセレクタです。
<p>これは段落1です。</p>
<p class="highlight">これは段落2です。</p>
<p>これは段落3です。</p>
p + .highlight {
background-color: yellow;
}
上記のCSSでは、p
要素の直後に続く.highlight
というクラスを持つ要素(2番目の段落)にのみ、背景色を黄色に設定しています。
※必ず直接隣り合っている要素にのみスタイルが適用されます。間に他の要素があると適用されません。
※隣接セレクタでは、要素と要素の間に+
記号を使用します。
プロパティの種類
CSSのプロパティとは、HTML要素に色やフォントサイズなど、どのようなスタイルを適用するかを指定するためのものです。
すでにセレクタのコード例でいくつかご紹介していますが、プロパティは値とペアで構成され、以下のように記述します。
p {
color: blue;
font-size: 16px;
font-family: 游ゴシック
}
このCSSの例では、プロパティがcolor
、font-size
、font-family
となり、値がblue
、16px
、游ゴシック
となります。
以下、初心者が知っておきたい主なプロパティをご紹介します。
テキストに関するプロパティ
プロパティ | スタイルの指定 | 主な値 |
---|---|---|
color |
文字の色 | red (色名), #ff0000 (16進数)など |
font-size |
文字の大きさ | px (※1), em (※2)など |
font-family |
フォントの種類 | メイリオ, 游ゴシック , 游明朝 など |
font-weight |
文字の太さ | bold (太字), lighter (少し細く)など |
text-align |
文字の水平方向 | left (左寄せ), center (中央寄せ), right (右寄せ)など |
※1:px(ピクセル)とは、デジタル画像やWebページにおいて、長さやサイズを表す単位の一つです。
※2:em(エム)とは、親要素のフォントサイズを基準とした相対的な長さの単位です。
CSSでテキストの見た目を調整するために使用するプロパティのことを、テキストに関するプロパティと言います。
フォントの種類から文字の色、大きさ、太さ、水平方向の位置などを指定することができます。
ボックスモデルに関するプロパティ
プロパティ | スタイルの指定 | 主な値 |
---|---|---|
margin |
要素の外側の余白 | auto (自動調整), px , em , % など |
border |
要素の周囲の枠線 | solid (実線), dotted (点線)など |
padding |
要素の内側の余白 | px , em , % など |
height |
要素の高さ | px , em , % など |
width |
要素の幅 | px , em , % など |
CSSでWebページを作成する際、全ての要素はボックスとして扱われます。
このボックスは、要素を囲む枠のようなもので、要素の大きさや位置、周囲との関係を決定します。この概念をボックスモデルと呼びます。
このボックスは、margin(マージン)、border(ボーダー)、padding(パディング)、コンテンツ領域(要素)の4つの部分で構成されています。
要素の外側・内側の余白の幅や高さ、要素の周囲の枠線、要素の高さや幅などを指定することができます。
![](https://tcd-theme.com/wp-content/uploads/2023/08/css-border-300x300.jpg)
Webサイトやブログ記事で使用頻度が高い枠線(ボーダー)。 枠線で囲まれたポイントや注意点。 このように一部を強調したり、要点をまとめる際に使うことが多いでしょう。 これほんの少しだけCSSの知識があれば、自由にデザインできるんですよね。色や枠線のタイプもお好みで変更できるので、当記事でご...
その他のプロパティ
プロパティ | スタイルの指定 | 主な値 |
---|---|---|
background-color |
背景色 | red (色名), #ff0000 (16進数)など |
display |
要素の表示方法 | block (※1), inline (※2), inline-block (※3)など |
position |
要素の位置 | static (初期値), relative (相対位置), absolute (絶対位置), fixed (固定位置)など |
※1:単独で一行を占める。幅と高さを自由に指定できる。
※2:周りの文字や他のインライン要素と一緒に一行に並ぶ。幅と高さを直接指定できない。
※3:一行に並べながら、幅と高さを指定できる
その他のプロパティとしては、背景色を変える、要素の表示方法や位置を変えるなど、様々なスタイルを指定できます。
初心者向けに主なプロパティのみご紹介していますが、この他にも様々なプロパティでスタイルを指定することができます。
![](https://tcd-theme.com/wp-content/uploads/2023/07/IMG_1399-300x300.jpeg)
CSSは、Webページの見た目(スタイル)を指定するための言語です。初歩的な内容でいうと、テキストや画像のサイズ、色や配置などを変更できます。極めて高い頻度で使われる言語のひとつですが、実は画像を簡単に加工することもできます。 というわけで今回は、色相反転、ぼかし、モノクロなど。CSSで画像を...
CSSの応用
CSSの基礎をマスターした後は、より高度なテクニックを使って、Webページをより魅力的にすることができます。
ここでは、CSSの応用について、初心者の方にもわかりやすく解説していきます。
レスポンシブデザイン
レスポンシブデザインとは、デバイスの画面サイズに合わせて、Webページのレイアウトや表示内容を調整するデザイン手法のことです。
スマートフォン、タブレット、パソコンなど、様々なデバイスの画面サイズに合わせて、Webページのレイアウトを自動で調整します。
以下、WordPressテーマTCD「SOLARIS」のデモサイトです。
PC、タブレット、スマートフォンのそれぞれの画面で、ウェブサイトの横幅やメニューなどのレイアウトが変化しているのがわかるかと思います。
アニメーション
CSS3のtransitionやanimationプロパティを使うことで、要素に動きをつけたり、インタラクティブな(双方向性のある)要素を作成したりできます。
動きの付いた要素は、ユーザーの注意を引きつけ、より魅力的なWebサイトに仕上げることができます。
以下、WordPressテーマTCD「meets」のデモサイトです。CSSを記述せずに、ウェブサイトのヘッダーにアニメーションの設定をすることができます。
FlexboxとGrid Layout
Flexbox(フレックスボックス)とGrid Layout(グリッドレイアウト)を使うことで、従来よりも簡単に、複雑なレイアウトを構築できます。
レスポンシブデザインと組み合わせることで、様々なデバイスに対応した柔軟なレイアウトを実現できます。
具体的には、多様なレイアウトのカード型デザイン、複雑なヘッダーやフッターなどを作成することができます。
以下、グリッドレイアウトを採用したWordPressテーマTCD「ROCK」のデモサイトです。
左側のデモサイトが3列、右側のデモサイトが4列のグリッドレイアウトになっています。
![](https://tcd-theme.com/wp-content/uploads/2024/04/buy-now-300x300.jpg)
WordPressでオリジナルのボタンを作りたい・・・ユーザーの注意を引いて、クリックしてもらえるような魅力的なボタンが欲しい・・・複雑なコーディングは苦手だから、なるべく簡単に、でもイメージ通りに作りたい・・・ そんな方のために、この記事では、WordPressでCTA※ボタンを自作する方...
CSSとWordPress
世界的に利用者の多いサイト作成ツールのWordPress(ワードプレス)でも、CSSを使ってデザインをカスタマイズすることができます。
当社のWordPressテーマTCDでは、様々な種類のホームページやブログのデザインテンプレートをご提供しています。
そのため、CSSの知識がなくても多機能で美しいウェブサイトを構築することができます。
>> WordPressテーマ一覧 | ワードプレステーマTCD
TCDテーマでは、CSSを記述しなくてもスタイルを適用できる「コンテンツビルダー」「クイックタグ」「スマホフッターバー」などの機能もご提供しています。
また、TCDテーマには、デザインを調整できるCSS(汎用クラス)も内蔵されています。
さらに、学んだCSSを元にTCDテーマをさらにカスタマイズすることもできます。TCDテーマのカスタマイズ方法を解説した「TCD LABO」や、以下の記事も参考にしてみてください。
まとめ
本稿では、CSSの基礎知識から、具体的な書き方までを解説しました。CSSを学ぶことでで、Webデザインの幅は大きく広がるでしょう。
ぜひ、本稿で学んだことを活かして、オリジナルのWebサイトを作成してみてください。
コメント