アクセストレードのWebデザイナーが解説するアフィリイトサイトに役立つ講座第三弾！
せっかくアフィリエイトサイトを運営するなら、少しでもユーザーにとって見やすく伝わりやすいサイトにしていきたいですよね。
見やすく伝わりやすいサイトにするために必要な要素はいくつかありますが、「見た目」もその一つ。Webページの見た目を整え、ユーザビリティを高めるためにはCSSの理解が不可欠。
とはいえ、なかなか詳しく勉強する時間はとれず、ブログやサイトを運営する上で、自信はないけどやむを得ずCSSを触っている…というかたも多いのではないでしょうか？
独学でなんとなく触っているけれど「使いかたは合っているのかな？」というアフィリエイターのみなさんに向けて、CSSの基礎をご紹介します！
この記事を通じて、CSSの基礎を学ぶことによりユーザーに伝わりやすいサイト運営に活かしてもらえると嬉しいです。
Contents
CSSとは
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の頭文字を取った言葉です。 Webページの見た目を装飾するための言語で、HTMLと組み合わせて使用します。
文字やボタンのサイズや色、WebページのレイアウトなどはCSSを使って指定しています。
使いこなせばアニメーションの実装もできますよ。
CSSがどんな役割を担っているのか？
CSSを使用していないページと使用しているページを比較した「アクセストレードのアフィリエイトを始めよう」のページをご覧ください。
どうですか？全然違うサイトのようですよね！
CSSでHTMLを装飾できると、人の目で見てわかりやすいWebページになることが一目瞭然です！
以前アフィリエイトに今日から役立つHTML基礎講座でHTMLには、Webページの意味や構造をコンピューターに伝える役割があるとご紹介しました。
ただ、上記で説明した通りHTMLのみだと、コンピューターにとってはわかりやすくても、人間にとっては見づらくなってしまいます。だから、人間に向けて見やすくするためにCSSという言語で装飾しているというわけです。
また、HTMLは骨組み（構造）・CSSは肉付け（装飾）と例えられることもあります。
HTMLでしっかりと骨格を組み立てて、CSSでわかりやすく見やすいデザイン（肉付け）にすることで、ユーザーに伝わりやすいページを作ることができます。
だからこそHTMLとCSSは切り離して考えないことが大切です。
両方の言語を役割に応じて使い分けて、コンピューターにも人間にも理解しやすいWebページ作りを目指しましょう♪
CSSでHTMLに装飾する方法
CSSでHTMLに装飾する方法は3つあります。
★CSSでHTMLに装飾する3つの方法
- CSSファイルを読み込む
- HTMLファイルにstyleタグで直接埋め込む
- HTMLのタグに直接書く
それぞれの方法を簡単に解説していきますね。
１．CSSファイルを読み込む
特に理由がなければオススメしたいのはCSSファイルを読み込む方法です。
やりかたはとっても簡単で、CSSファイルをHTMLファイルとは別に用意しlinkタグで<head>内に記述しCSSファイルを読み込みます。
<link rel="stylesheet" href="CSSファイルのパスが入ります">
また、HTMLファイルとCSSファイルを別ファイルにするとサイトを運用する上でメリットがあります。
◎メリット
- ひとつのCSSファイルを複数のページに適用できる
- HTMLファイルは修正せずに、CSSファイルを差し替えればデザインが変えられる
この方法は、Webサイト制作において1番よく使われます。また、ほとんどのWordpressテーマはCSSファイルを読み込む方法で作られています。
2.HTMLファイルにstyleタグで直接埋め込む
HTMLファイルにstyleタグで直接埋め込む方法は、上の図のようにHTMLファイルの<head>内にstyleタグを設置し、その中にCSSを記述していく方法です。
この方法は、ページの表示スピードが速くなる一方、管理する上でやや煩雑になるところが難点です。1との違いは、CSSファイルをHTMLと別にするかHTML内に記述するかの差になります。
3．HTMLのタグに直接書く
HTMLのタグに直接書く方法は、インライン記述とも呼ばれます。図のように、HTMLタグ内に「style=”〜”」という記述を入れてCSSを記述していく方法です。
2の方法と同じくページの表示スピードは早くなりますが、1つ1つのHTMLタグにCSSを記述するため、同じ見た目のものを変更する場合でも、それぞれのタグを変更していかなくてはならないという難点があります。
CSSでHTML装飾する方法まとめ
1のCSSファイルを読み込む方法は、表示スピードは2や3に比べるとやや遅くなるものの管理する上でとても便利で普遍的な方法になります。
2のHTMLファイルにstyleタグで直接埋め込む方法や3のHTMLタグに直接書く方法は、CSSファイルを読み込む必要がないため表示スピードが速くなるというメリットがある一方、ページごと管理しなくてはならない、コードが長くなるのでメンテナンスしづらいといった運用上のデメリットもあります。
一度作ってしまったページやサイトの作りを変更するには大きな労力がかかるため、サイト運用する上でどの方法が最適なのかを見極め、作る際には管理しやすい方法を選択することが大切です。
CSSの基本の書きかた
CSSの基本の構文は図のように3つで構成されています。
◎CSSの基本的な構成要素
- セレクタ（どの要素の）
- プロパティ（なにを）
- 値（どうする）
この見本CSSを翻訳すると「h1見出しの幅（width）を100%にする」と書いてあります。
CSSファイルを開くと訳のわからない呪文が書いてあるように見えますが、基本の構文が読み解ければ何を書いてあるのか掴めるようになるので、しっかり覚えましょう！
それでは、基本の構文を構成するセレクタ・プロパティ・値についてそれぞれ説明していきます。
セレクタ（どの要素の）
セレクタには、装飾したい部分のタグや装飾の種類を分ける要素を指定します。
<h1>や<div>などHTMLタグを入れることもできますし、「.class（クラス名）」や「#id（ID名）」をセレクタに指定することも可能です。
?.class（クラス名）/#id（ID名）とは
classやIDはHTMLタグに付ける属性です。簡単に言うとclassやID を使ってHTMLタグに任意の名前を付けることができます。
HTMLタグにclass=”●●（クラス名）”と記載するとクラス名を、id=”●●（ID名）” と記載するとID名を付けられます。
なお、クラス名はひとつのHTMLタグに複数設定することが可能ですが、IDはひとつのHTMLタグにひとつだけ設定できます。
▼.classと#idの例文
<p class="red"></p> <!-- pタグにredというクラス名を付与 --> <p class="red big"></p> <!-- pタグにredとbigというクラス名を付与 --> <p id="red"></p> <!-- pタグにredというID名を付与 -->
HTMLタグに名前を付けておくことで、クラス名やID名に対してCSSを設定することができます。同じクラス名を付けたタグは、同じCSSが効くので見た目を揃えることができて統一感をだせますよ。
ただし、ID名はひとつのページに同じ名前はひとつだけしか設定できないので注意しましょう！
よく使う代表的なセレクタの指定方法を紹介します。
▼h1やdivなどHTMLタグをセレクタに指定する場合の例
h1 {プロパティ: 値;}
div {プロパティ: 値;}
▼class="hoge"などクラス名をセレクタに指定する場合の例
.hoge {プロパティ: 値;}
※先頭の「.（ドット）」がクラス名を表します
▼id="hoge"などID名をセレクタに指定する場合の例
#hoge {プロパティ: 値;}
※先頭の「#（シャープ）」がID名を表します
紹介したセレクタはほんの一部です。
もっと知りたいかたはCSSリファレンスのセレクタをご参照ください。
プロパティ（なにを）/ 値（どうする）
プロパティには、「背景を」「文字のサイズを」などのセレクタで指定した要素の「なにを」を、値には「どうしたいか」を記載します。
プロパティは覚えられないくらいたくさんの種類があります。
いくつか代表的なプロパティをお伝えしつつ、指定する値はプロパティごとに異なりますので、一緒に紹介しておきますね。
◎font-size
文字（フォント）の大きさを指定するプロパティです。
▼数値で文字の大きさを指定した場合の例文
h1 {
font-size: 20px; /* 文字サイズを20pxにする */
}
プロパティが「font-size」、値が「20px」となります。
▼キーワードで文字の大きさを指定した場合の例文
h2{
font-size: medium; /* 文字サイズを標準にする */
}
プロパティが「font-size」、値が「medium」となります。
なお文字のサイズを数値で変更したい場合は「px」などの単位を利用します。
また数値ではなく、「medium」などのキーワードを利用することもできます。
キーワードは、7段階あり「medium」がブラウザの標準フォントサイズを基準とし、1段階ごとに標準の〇倍になると定められています。
| 値の指定方法 | 種類 |
|---|---|
| 数値で指定する場合の単位 | px,em,rem,% |
| キーワードで指定する場合 | xx-small（0.6倍）,x-small（0.75倍）, small（0.89倍）,medium（標準）, large（1.2倍）,x-large（1.5倍）,xx-large（2倍） |
◎font-weight
文字の太さを指定するプロパティです。
▼キーワードで指定する場合の例文
h1 {
font-weight: bold; /* 文字を太字にする */
}
プロパティが「font-weight」、値が「bold」となります。
▼数値で指定する場合の例文
h1 {
font-weight: 700; /* 文字を太字にする */
}
プロパティが「font-weight」、値が「700」となります。
文字の太さも文字の大きさと同様、数値もしくはキーワードで指定することができます。
ただし文字の大きさと異なり数値指定の場合に単位は必要ありません。
数値指定には9種類ありますが9種類もの文字の太さを用意しているフォントは少ないため、太字を指定したい場合には「bold」や「700」で基本的には充分です。
| 値の指定方法 | 種類 |
|---|---|
| キーワードで指定する場合 | normal（標準）,bold（一般的な太字） |
| 数値で指定する場合 | 100,200,300,400（標準）,600,700（一般的な太字）,800,900 |
◎text-align
文字の揃える方向を指定するプロパティです。
▼文字揃えの方向を指定する例文
h1 {
text-align: center; /* 文字を中央揃えにする */
}
プロパティが「text-align」、値が「center」となります。
▼揃えかたの値
- left…左寄せ
- right…右寄せ
- center…中央寄せ
- justify…均等揃え
通常、HTMLの文章は左寄せで表示されます。 ただデザインによっては、タイトルを中央寄せしたい！数字は右揃えに！など見やすいデザインにしたいものですよね。
そんな時に使えるプロパティが「text-align」となります。
◎color
文字の色を指定するプロパティです。
▼カラーネームで指定した場合の例文
h1 {
color: red; /* 文字の色を赤色にする */
}
プロパティが「color」、値が「red」となります。
▼カラーコードで指定する場合の例文
h1 {
color: #FF0000; /* 文字の色を赤色にする */
}
プロパティが「color」、値が「#FF0000」となります。
▼rgbで指定した場合の例文
h1 {
color: rgb(255,145,0) ; /* 文字の色を赤色にする */
}
プロパティが「color」、値が「rgb(255,145,0)」となります。
colorの値は、カラーコード、カラーネーム、rgbの3種類を指定することができます。
カラーネームは、文字色を単語で指定することができるため何色を指定しているのかわかりやすくなります。
カラーコードは16進数の記号で指定し、rgbは、Red（赤）・Green（緑）・Blue（青）の3原色を混ぜた色を指定する方法です。
カラーコードは、rgbの組み合わせをコード化したものなので同じ色を指定することができ、カラーネームにはない色を指定することができます。
また、rgbだと透明度を指定することもできるため透過した文字にしたい時に便利です。
▼rgbで透過した文字色を指定した場合の例文
h1 {
color: rgb(255,145,0,0.6) ; /* 文字の色を赤色にし透明度を60％に指定 */
}
今回紹介したもの以外にもたくさんのプロパティがありますので、わからないプロパティや値があればCSSリファレンスなどを参考に調べてみてください。
プロパティと値はひとつの構文の中に何個も入れられます！
▼構文の中に複数のプロパティと値を入れた例文
h1 {
color: #FF9100; /* 文字の色を#FF9100（オレンジ色）にする */
font-weight: bold; /* 文字の太さを太字にする */
text-align: center; /* 文字を中央揃えにする */
}
上記の例文のように、構文の中には複数個のプロパティと値を記載することができます。
ただし、同じプロパティを重複して入れないように気を付けましょう！
ひとつの構文の中でプロパティが重複するとどうなる？
プロパティが重複すると、後の行に書かれたコードが優先されます。
▼プロパティが重複している例文
h1 {
color: red;
color: orange;
}
例えばこのように、colorをダブって記載したとします。 この場合は、先に書いたcolor: red; を、後ろ書いたcolor: orange; で上書きしてしまうので、h1の文字の色はorangeになります。
このように同じプロパティが重複するとコードが複雑になってしまい修正作業が大変になる恐れがあります。重複は避けて、簡潔できれいなコードを目指しましょう！
便利なコメントアウトも活用しよう
CSSのソースコードの中にメモ書きを残せたらなぁ...と思うことはありませんか？
コメントアウトというテクニックを使えば、ＣＳＳの働きに影響を与えずにメモを書くことができますよ。
例えば「ここから下は追記」や「テキストの装飾です」などのメモ書きを残しておくと、あとからソースコードを見返したときにとても便利！
使いかたはシンプルで、コメントアウトしたい文字を「/*」と「*/」で囲うだけです。
▼メモ書きのコメントアウト例文
h1 {
text-align: center; /* 文字を中央揃えにする */
}
例文の「/* 文字を中央揃えにする */」の部分が「コメントアウト」です。
複数人で作業する場合はもちろん、ページ数が多いサイトなどを個人で管理する場合にも便利ですよ。
また、こんな形で改行を含む複数行でもコメントアウト可能です。
▼現状使わないけど残しておきたいcssのコメントアウト例文
/* h1 {
text-align: center; 文字を中央揃えにする
} */
使わないけれど残しておきたいソースなどをこのようにコメントアウトしておくと便利ですよ。
まとめ
いかがでしたか？
サイトを見やすくするために、CSSを用いた装飾が大きな役割を果たしていることを理解してもらえたかと思います。専門的な内容で少し難しかったかもしれないですが、サイトの運用に少しでも役に立つと嬉しいです。
HTMLの基礎を知っているとさらに理解も深まりますので、よかったら「SEO効果もあり!?アフィリエイトに今日から役立つHTML基礎講座」も読んでみてくださいね。
ご注意ください
- 本記事の内容は、2022/10/20更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら