Skip to Main Content

★HTML/CSSによる文書の作成とデザイン: CSSの基本構造

ホームページやブログのデザインはHTMLという言語によって記述されています。もしあなたがブログを作る機会があったら使える知識がここにあるかも?

CSSとは

CSSとはCascading Style Sheetsの略で、HTML文書の見た目を装飾するための言語です。いつもアクセスしている綺麗なデザインのWebページの読み込みがやたらと遅くて、途中で読み込み停止ボタンをクリックしてみたら無地背景に文字だけのページになってしまった、そういう経験がある人もいるのではないでしょうか。それはCSSファイルの読み込みに失敗してしまったためでしょう。CSSはそれだけWebページのデザインを支配します。CSSをマスターしてアクセス数が伸びる魅力的なWebページにしていきましょう!

目次

カラーコードについて

CSSで色を指定する時、

赤ならred

青ならblue

黒ならblack

のように色の名前(カラーネーム)で指定することができます。

青系の色もsteelblueroyalblue

navymediumblueskyblue

など様々ですが、覚えるのは大変です。

 

もう一つの指定方法は色を6桁の16進数(0~F)で表現するカラーコードです。

赤なら #ff0000

青なら #0000ff

黒なら #000000

のように頭にシャープ(#)を付けて指定します。

 

カラーコードも感覚的には掴めるかもしれませんが、やはり覚えられるものではありません。

WEB色見本などカラーネームやカラーコードが掲載されているwebページを適宜利用しましょう。

CSSの記述場所

CSSをどのように記述していくか、まずはその場所を決める必要があります。CSSはスタイルシートの名の通り、一つのシート(ブロック)として埋め込まれます。埋め込む場所は以下の3種類です。

① cssファイルを外部リンクで指定(head内に<link>で読み込む)

② ページ単位(head内)で指定(head内に<style>~</style>で適用)

③ html内の各タグへ個別に指定(style属性で部分的に適用)

①はHTMLファイルとは別に作成したCSSファイル(.css)を読み込ませる手法で、複数のHTMLに同じCSSファイルを読み込ませることができます。また、修正する際も一つのCSSファイルを修正すれば全てのHTMLファイルに反映されるので、CSSファイルを「自分のスタイル」として一括で管理ができます。さらに、URLを指定すれば公開されているスタイルシートを利用することもできます。

②はHMTLの<head>内にCSSを記述する手法です。特定のページ内だけCSSを反映させたい、異なるデザインを適用したい時に便利です。HTMLの<head>内に<style>タグを追加して、その中にCSSを記述していきます。本ガイドは主にこの手法で例を記述しています。

③はHTMLのタグ内に直接CSSを書き込む方法です。タグ内にstyle属性を使用してCSSを記述することで、特定のタグ内にだけCSSを反映させます。より詳細に編集したいテキスト部分を指定するためにインライン要素(特定の部分を対象として編集する)として要素タグ内に記述します。フォントサイズや文字色を少しだけ変更する際におすすめです。