misaこんにちは、ウェブデザインパレットのmisaです。
Webサイトを閲覧していると、見やすく読みやすいレイアウトや思わず目を引くようなデザインに出くわすことがあります。実は、こうしたWebサイトの見た目やデザインは、「CSS（Cascading Style Sheets）」と呼ばれるプログラミング言語によってつくられています。
HTMLがWebページの構造や内容を定義するのに対し、CSSはその内容をどのように表示するかを指定します。
CSSを理解すれば、シンプルなデザインから個性的なデザインまで、様々なデザインのWebサイトを思い通りにつくることができます。
本記事では、CSSとは何か、具体的な書き方、CSSを書く上で知っておくべきことなど、CSSの基礎知識を初心者の方にも分かりやすく解説します。
CSSとは？
CSSは、HTMLで書かれたWebページの見た目やレイアウトを装飾するためのプログラミング言語です。
CSSは「スタイルシート」とも呼ばれます。
CSSを適用することで、Webサイトに色やフォント、余白、配置などを与え、サイトを見やすく整えたり、オリジナリティを演出することができます。
HTMLはWebページの骨格を構築する言語ですが、CSSがなければ、単調で味気ない見た目になってしまいます。
CSSは、魅力的なWebサイトを作り上げるために欠かせない存在なのです。
misaCSSを使えるようになると、自分の思い通りのデザインが作れるようになって楽しいですよ♪
CSSができること
CSSでできることは、とても様々です。具体的には、以下のようなことが可能です。
文字の装飾
フォントの種類、大きさ、太さ、色、行間などを変更することができます。
<p>ウェブデザインパレット</p>p {
font-family: 'メイリオ', sans-serif;/*フォントの種類*/
font-size: 24px;/*フォントの大きさ*/
font-weight: bold;/*フォントの太さ*/
color: orange;/*フォントの色*/
line-height:2.5;/*行間*/
}
背景の装飾
背景色、画像、模様などを設定することができます。
<p>ウェブデザインパレット</p>p {
background-color:#FDFCB8;/*背景色*/
}
配置とレイアウト
要素の位置、並び方、余白などを調整することができます。
<div class="wrap">
<p>ウェブデザインパレット</p>
<p>ウェブデザインパレット</p>
<p>ウェブデザインパレット</p>
</div>.wrap {
display:flex;/*要素のレイアウト*/
gap:40px;/*余白*/
}ウェブデザインパレット
ウェブデザインパレット
ウェブデザインパレット
ブロック要素の装飾
見出し、段落、リストなどのブロック要素を装飾することができます。
<h1>見出し</h1>
<p>段落</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>h1 {
font-size: 24px;/*フォントの大きさ*/
font-weight: bold;/*フォントの太さ*/
border-bottom: dashed 1px orange;/*下線*/
}
p {
background-color:#FDFCB8;/*背景色*/
}
ul{
list-style: square;/*リストスタイル*/
}
特殊効果
影、ぼかし、アニメーションなどの特殊効果を適用することができます。
<p class="shadow">影</p>
<p class="blur">ぼかし</p>
<p class="animation">アニメーション</p>.shadow {
font-size: 24px;
text-shadow: 1px 1px 2px pink;
}
.blur {
filter: blur(1px);
}
.animation {
animation: 3s ease-in 1s infinite reverse both running slidein;
}
@keyframes slidein {
from {
margin-left: 0%
}
to {
margin-left: 60%
}
}影
ぼかし
アニメーション
メディアクエリ
画面サイズやデバイスに応じて、異なるスタイルを適用することができます。
<p class="pc-only">パソコンのみ表示されます</p>
<p class="sp-only">モバイルのみ表示されます</p>/* 画面幅768px以上はpc-onlyのみ表示 */
.pc-only {
display: block;
}
.sp-only {
display: none;
}
/* 画面幅768pxまではsp-onlyのみ表示 */
@media screen and (max-width: 768px) {
.pc-only {
display: none;
}
.sp-only {
display: block;
}
}パソコンのみ表示されます
モバイルのみ表示されます
これらの機能を組み合わせることで、様々なデザインのWebサイトを生み出すことができます。
CSSの基本的な書き方
CSSの構成要素
CSSは、セレクタ、プロパティ、値の3つの要素で構成されています。
セレクタ
セレクタは、どのHTML要素にスタイルを適用するかを指定する部分です。
タグ名やid名、class名を書きます。
例：h1、p、#header、.btnなど
プロパティ
プロパティは、変更したいCSSのスタイル項目（フォントサイズ、色、余白など）を指定します。
例：font-size、color、background-color、margin、paddingなど
値
値は、プロパティに設定する具体的なスタイルの内容を指定します。
例：16px、#ff0000、redなど
これらの要素を組み合わせて、CSSのルールを記述します。
セレクタ {
プロパティ1: 値1;
プロパティ2: 値2;
}
h1 {
font-size: 24px;
color: blue;
}この例では、h1要素に対して、フォントサイズを24px、色を青色に設定するルールを記述しています。
セレクタは先頭に書き、プロパティと値は{ }で囲います。
プロパティと値の間には:(コロン)を書きます。
値の後には;(セミコロン)を書きます。
セレクタの種類と書き方
セレクタにはいくつかの種類があります。 今回はその中でも基本的なセレクタである、 タイプセレクタとクラスセレクタ、IDセレクタの3つのセレクタについて解説します。
1. タイプセレクタ
タイプセレクタは、要素セレクタとも呼ばれ、 指定されたHTML要素にスタイルを適用します。
セレクタ部分に、スタイルを適用したい要素名を記述します。
p {
color: red;
}上記の例では、HTML文書内のすべての<p>タグに対してcolor: red;が指定されます。
2. クラスセレクタ
クラスセレクタはHTMLの 特定のclass属性に指定された要素に対してスタイルを適用します。
セレクタ部分に、クラスセレクタであることを表す.(ドット)を記述し、それに続けてクラス名を書きます。
.example {
background-color: yellow;
}上記の例では、.exampleというクラス名を持つ要素に対してbackground-color: yellow;が指定されます。
3. IDセレクタ
IDセレクタはHTMLの 特定のid属性に指定された要素に対してスタイルを適用します。
セレクタ部分に、IDセレクタであることを表す#(ハッシュ)を記述し、それに続けてID名を書きます。
#heading {
font-weight: bold;
}上記の例では、#headingというID名を持つ要素に対してfont-weight: bold;が指定されます。
CSSを書く場所
CSSの記述場所は、主に以下の3通りがあります。
1. 外部ファイル
外部ファイルのCSSから読み込む方法です。
CSSファイル（スタイルシート）を別に作り、HTMLファイルから読み込みます。
最も一般的な方法で、複数のHTMLファイルに共通のデザインを適用したい場合に最適です。
メリット
- 複数のHTMLファイルに共通のデザインを適用できる
- コードのメンテナンス性・可読性が向上
- デザイン変更時の修正箇所が少なく済む
デメリット
- 大きなCSSファイルを読み込む場合は、ページの表示速度が遅くなる場合がある
記述方法
- テキストエディタで
.css拡張子のファイルを作成します - そのファイルの中にCSSコードを記述します
- HTMLファイルの
<head>内に<link>タグを使って読み込みます
<head>
<link rel="stylesheet" href="style.css">
</head>2. headタグ内
HTMLファイルごとに個別デザインを適用したい場合に適しています。
メリット
- 適用したいページに特化したCSSを書くことができる
- 外部ファイルを読み込まなくてよい
デメリット
- 複数のHTMLファイルに同じデザインを適用したい場合は不向き
記述方法
- HTMLファイルの
<head>内に<style>タグを作成します <style>タグ内にCSSコードを記述します
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>3. インライン
特定の要素のみデザインを変更したい場合に有効です。
メリット
- 変更したい要素にスタイルを直接書き込める
- 部分的なデザイン変更であれば、手軽に記述できる
デメリット
- コード量が多くなるとメンテナンス性が悪化する
- 複数個所を変更したい場合に手間がかかる
記述方法
- デザインを変更したいHTMLタグに
style属性を追加します ""内にCSSコードを記述します
<h1 style="color: orange; font-size: 24px;">ウェブデザインパレット</p>
<p style="color: black; font-size: 16px;">テキスト</p>CSSの記述場所は、デザインの適用範囲やメンテナンス性などを考慮して適切なものを選ぶことが重要です。
CSS適用の優先順位
CSSの適用優先順位には4つの主要なルールがあります。
以下で、それぞれのルールについて詳しく説明します。
1. 後から読み込まれたCSSスタイルが優先
同じ要素に対して複数のCSSスタイルが指定されている場合、後から読み込まれたスタイルが優先されます。
以下の例では、最後に読み込まれた font-size: 10px が適用されます。
p {
font-size: 15px;
font-size: 20px;
font-size: 10px;
}2. インラインで記述されたCSSスタイルが優先
CSSを記述する方法には、外部ファイル、headタグ内、インラインの3つのパターンがありますが、重複があった場合はインライン形式が最優先されます。
例えば、以下の例ではインライン形式で記述された font-size: 15px が適用されます。
<head>
<link rel="stylesheet" href="style1.css"><!-- 外部ファイル1 -->
<!-- headタグ内 -->
<style>
h2 {
font-size: 30px;
}
</style>
<link rel="stylesheet" href="style2.css"><!-- 外部ファイル2 -->
</head>
<body>
<h2 style="font-size: 15px;">タイトル</h2><!-- インライン -->
</body>/* style1.css */
h2 {
font-size: 20px;
}
/* style2.css */
h2 {
font-size: 40px;
}優先順位は インライン ＞ headタグ内 ＞ 外部ファイル1 (style1.css) ＞ 外部ファイル2 (style2.css) となります。
3. 詳細度の高いものが優先
CSSはセレクタの書き方によって詳細度が異なり、詳細度が高いものが優先されます。
詳細度は「idセレクタ ＞ classセレクタ ＞ タイプセレクタ」の順に評価されます。
詳細度が同じ場合は、後から書かれたスタイルが適用されます。
/* 詳細度が異なる例 */
#example { /* idセレクタ */
color: blue;
}
.example { /* classセレクタ */
color: red;
}
p { /* タイプセレクタ */
color: green;
}4. !important指定が最優先
!important 指定を用いると、他の全てのルールを無視して強制的に最優先されます。
以下の例では、 color: #ff0000 !important が適用されます。
p {
color: #ff0000 !important;
color: #0000ff;
}
まとめ
CSSをマスターできれば、Webサイトのデザインを自由自在に操ることができます。
まずは基礎知識を理解して、それから様々なテクニックを身につけることで、より魅力的で洗練されたWebサイトを作り上げることができます。
なお、CSSは日々進化しています。新しい技術やトレンドを積極的に学び、取り入れていくことがWebデザイナーにとって大切です。これからも一緒に学んでいきましょう＾＾
HTMLについての記事もぜひご覧ください👇
では、また～✨
