Webサイトを作ろう! 【 12 】スタイルシート(CSS)の解説

    icon-clock-o読了時間:約22分36秒

前回まででWebサイト作成手順について一通りのご説明をしてきました。
思いついたらまた書き足すかもしれませんが、一応今回がシリーズの最終回ということで、
サイトを見栄え良くしてくれるCSSの記述について簡単にご説明いたします。

前回までの記事はこちら

Webサイトを作ろう!
【 1 】レンタルサーバーとドメイン
【 2 】必要なソフトを準備する
【 3 】ページの構成を考える
【 4 】テーマカラーを決める
【 5 】トップページと画像を用意
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
【 6 】トップページの一例
【 7 】HTMLソースコードの解説①
【 8 】HTMLソースコードの解説②
【 9 】複数ページを作る
【 10 】横並びメニューをCSSで作る
【 11 】縦並びメニューをCSSで作る

 目次 

CSSとは

基本的なCSSの書き方

CSSファイルをhtmlファイルに呼び出して使う
  ∟CSSファイルを作る
  ∟CSSファイルをアップロードする
  ∟htmlファイルを編集する
  ∟htmlファイルをアップロードする

文字フォントに関するCSS
  ∟文字の色
  ∟文字の大きさ
  ∟文字のフォント(書体)
  ∟文字の行間幅(インデント)
  ∟文字フォントのまとめ

余白 マージンとパディング

画像に関するCSS
  ∟画像に関するCSS
  ∟まず画像を準備
  ∟枠をつける
  ∟角を丸くする
  ∟影をつける

その他の知っておくと便利なCSS
  ∟全ての要素に対する指定 *
  ∟画像を囲む線を消す
  ∟CSSでテキスト強調

CSSとは

カスケーディング・スタイル・シート、略してCSS。

CSSでレイアウトや装飾を記述し、htmlファイルに適用させれば
そこにあるテキストの内容や段落構成そのものは全く変わりないのですが
ブラウザ上で表示される見かけはかなり違ってきます。

女性でいうお化粧みたいなものですね。
人様の目に触れるなら少しでも綺麗でいたいの・・・(。・ × ・)
それならカスケーディングなスタイルシートであなたのサイトも簡単キレイ!!(広告風)な感じです。

こうして見ていただくとCSSの有り無しでかなり見た目が変わるのがお分かりいただけると思います。
CSS使用前後

基本的なCSSの書き方

例としてこれは p (=段落) のテキスト(文字)に対して
color (=色) を #00ffff(アクアブルー) に変える、というCSSです。

細かく見ていくと一応それぞれの部位に名称が付いているのですが、
普段使うことも無いのであんまり覚える必要はありません。
こんな感じかーというのが分かればそれでOKです。
CSSの仕組み
このように、基本のCSSは
 ・スタイルを指定する場所(段落、ヘッダー、フッター、メイン、決められたボックス内など)
 ・指定したい項目(高さ、幅、サイズ、色、余白など)
 ・その細かい設定(ピクセル、%、カラーコード、指定する画像など)
以上を組み合わせることで出来ています。

コード記述について補足

ご説明の際にコードを記述している枠の、右上にあるアイコンを押していただくとコピーが簡単です。
クレヨンの機能
① 行番号のON/OFF・・・枠の左端にふられた行番号の表示を隠すことができます。
② ハイライト表示のON/OFF・・・コードの色分けをなくします。
③ コピー・・・これを押すと全文が選択された状態になるので、
        あとはいつもどおり右クリックしてコピーできます。
④ 新しいウインドウでコードを開く・・・別窓にコードを表示させます。
                    コード全体をまとめて見たい時などに便利。
⑤ コードの種類・・・html、CSS、C#など、コードの種類を表示しています。ここはクリックできません。

CSSファイルをhtmlファイルに呼び出して使う

詳しくは 【 11 】縦並びメニューをCSSで作る でもご説明していますので合わせてご覧ください。
ここでは一例として先ほど上で使った段落タグ(p)をCSSファイルにして使ってみます。

CSSファイルを作る

まずテキストエディタ(メモ帳やTeraPadなど)を起動して、CSSコードを記述します。

この例ではTeraPadを使用しています。

TeraPadでコード記述

ちなみに記述の最後に[EOF]というのがくっついていますが、
これはテキストエディタが End Of File 、ここが記述の終点だよーと
分かりやすくしてくれているだけですので気にしなくて大丈夫です。

また、一行目に文字コードを Shift_JIS で宣言しています。
基本的にWindowsやMacのOSをお使いであれば Shift_JIS の宣言でほぼ問題ないと思いますが、
使用しているソフトや使用環境により最適な文字コードは異なりますのでご注意ください。

記述が済んだら【 ファイル 】メニューから【 名前を付けて保存 】を選択してCSSファイルとして保存します。
保存先のフォルダはサイト用の他のデータと同じ場所にしてください。
CSSファイルとして保存
ファイルの名称は『 index.css 』、『 main.css 』など、ご自分の分かりやすい名前にしてください。
htmlファイルの名前が『 index.html 』だから、合わせて『 index.css 』にしよう、というのでもいいですし、
他のhtmlファイルにも同じCSSファイルを使いまわしたいから『 usual.css 』にしよう、とかでもOKです。
ここではとりあえず『 main.css 』として保存しています。

CSSファイルをアップロードする

ファイルを作り終わったら、忘れずにFTPソフトでサーバー上にアップロードしましょう。

htmlファイルを編集する

今度は『 main.css 』ファイルをhtmlファイルに適用するために呼び出しを行います。
htmlファイルのヘッダ情報 <head>と</head>の間に以下のタグを記述、保存します。

htmlファイルをアップロードする

編集し終わった『 index.html 』ファイルも忘れずにアップロードしてください。
これでWeb上で『 index.html 』ページを見れば、CSSによる装飾がされた状態で表示されます。

文字フォントに関するCSS

さて、上では単純に文字の色を変えるだけのCSSでした。
でも実際にサイトを作っていくと、文字のサイズ、フォント、行間の幅などなど
色々な要素を変更したくなると思います。
そんな複数のスタイルを記述する時の書き方を簡単にご説明します。

さっきのCSSが適用された状態がこちら。
文字色アクア
見づらい・・・(; ・`д・´)
これはいかん、ということで文字色を変え、更にサイズなどの要素も追加することにします。

文字の色

最近ではWebサイトにおいて真っ白(#ffffff)の背景に
真っ黒(#000000)の文字、というのは避けるべきだと言われています。
パソコンのモニタ上で真っ白に光っているところにコントラストの激しい黒があると目に優しくないためです。

そこで、文字を真っ黒にしたいなら背景に薄い色を付ける、
逆に背景を真っ白にしたいなら文字は真っ黒を避ける、といったような
対策をとっているサイトも増えてきました。
例えば弊社のサイトも、一見すると文字は真っ黒に見えるかもしれませんが
実は 暗い灰色(#333333) にしてあります。
Appleのサイト などがグレーを上手く使ったサイトとして有名ですね。

ちょっと濃いくらいの灰色(#666666)ならテキスト表示はこんな感じ。
文字色グレー

サイトの雰囲気によっては焦げ茶(#663300)や紺色(#000033)もいいですね。
文字色焦げ茶
文字色紺

文字の大きさ

文字サイズは px(ピクセル)で指定することもあるのですが、
Internet Explorerではピクセル指定が無視されてしまうことがあるので最近は%で指定することが多いようです。

何を基準にしたパーセンテージかと言うと、その環境で基準とされているサイズ。
WindowsやMac OSといったOS。
Internet Explorer、Google Chrome、Firefox、Safari、Operaといったブラウザ。
そのひとが使っている環境によって表示される文字の大きさも変わってきますから
どんなひとにも同じ大きさで文字を見せるというのは結構難しいことです。
そのあたりは今のところは深く考えないことにして、
大体誰のパソコンやスマホでも同じ大きさで表示してくれたらいいな、88%とかそのへんで・・・
という割とぼんやりした設定をしておきます。

まずページ全体のフォントサイズを指定してます。

それを踏まえて、段落内のフォントサイズはこれ!と決めるのがこちら。

文字のフォント(書体)

Web制作や印刷における文字のフォントとは書体を指します。
ワープロ時代から変わらず存在する明朝体やゴシック体などが皆さんご存知のフォントの代表ではないでしょうか。
特にフォント指定しなくても、閲覧者の使用している環境によって
それぞれ最適と思われるフォントが表示されるのですが、
どうせなら皆にこのフォントで見てほしい、日本語に合ったフォントで表示したほうが見やすいし・・・ということで
皆さんフォントの指定も行うのが普通です。

基本的にこれ書いておけば大丈夫、と言われているフォントがこちら。

一番にヒラギノ角ゴ Pro W3、それがダメならメイリオで、更にそれもダメならOsakaで・・・というように
表示したいフォントを優先順に並べて記述します。
日本語と英字の両方で記述があるフォントは、日本語の指定を理解してくれない
外国生まれ外国育ちのブラウザ(Appleのサファリとか)の旧バージョンに歩み寄るために記述しています。

最近では女の子の手書き文字のような可愛い丸文字のフォントなんかもあったりするのですが、
残念なことに世界規格で標準対応しているフォントではないので、そういった特殊なフォントを使う際には
「そのフォントをインストールしているお仲間さんにだけ、そのフォントで見えればいいや」 という
開き直りが必要です。

文字の行間幅(インデント)

line-height を指定することによって行の高さを設定することができます。
これによって行と行の隙間に余裕を作ることができるので、
行間が詰まってて読みづらい、といったような問題を解決することができます。

文字フォントのまとめ

それではこれまでの項目を踏まえてCSSを適用してみましょう。
まずhtmlタグはこちら。

記述するCSSはこちら。

上記それぞれをファイルに記述してアップロード後にWeb上で表示したのがこの状態です。
CSS適用状態の文字
この他にも様々な要素を設定することができます。

余白 マージンとパディング

CSSを記述しているとしょっちゅうお世話になるのが
margin(マージン)と padding(パディング) という2種類の余白です。
次項の画像装飾でも margin と padding を使いますので、ここで先にご説明しておきます。
余白の説明
margin が外側、 padding が内側と考えていただくと分かりやすいかもしれません。

例えばこの項の見出しを例に見ていただくと
それぞれの余白設定はこのようになっています。
見出しの余白

CSSの記述としては以下のとおり。

私は個別に記述したほうが後で見返した時に分かりやすいので一つずつ記述していますが、
より簡素にまとめて記述する方法もあります。
上のマージンとパディングをひとまとめに記述するとこうなります。

すっきりするけど私はとっさにどれが上だか左だか分からなくなっちゃうんですよね・・・(。・ × ・)
上・右・下・左、つまり上から時計回りの順番になってるので、
それを忘れない自信がある方はまとめて書いた方が便利かもしれません。

ちなみに余白の幅を揃える場合は更に簡単に記述することができます。

画像に関するCSS

サイトやブログに写真やイラストを載せたいとき。
枠をつけてカッコよくしてみたり、角をとって可愛くしてみたりとどうせなら見栄え良くしたいものです。
見かけの問題だけでなく 「 この画像はここに配置したい! 」 といった
サイトのレイアウトとしても画像の扱いは大切ですね。
そんなときにもCSSによるスタイル設定が役立ちます。

画像の装飾について色々なパターンを記載しておきますので
ご参考の上、お好みの大きさやカラーでお試しください ∪o・ェ・o∪ノ

まず画像を準備

写真やイラストを用意してFTPソフトでアップロードしましょう。
パソコンの中ではなく、Webサーバー上にある状態にしておかないと
サイトの中で表示させることができません。

素材やサイズ変更については
画像編集ソフト・素材サイト商用利用OKな無料素材 も合わせてご覧ください。

枠をつける

画像を線で囲んで写真風の枠にします。
画像01

CSS記述

html記述

ポイント①

背景色(background-color)を変えればまた違った雰囲気に。
画像02

ポイント②

画像の大きさ 幅(width)と高さ(height)は画像の大きさに合わせて変更してください。
特に指定をしなければ元の画像そのままの大きさになります。
また、元の画像の縦横比率を無視して幅と高さを決めてしまうと、
画像が伸び縮みしておかしなことになったりします。
例えば幅2:高さ1の画像を、幅3:高さ2とCSSで指定すると幅の縮尺が変わってぎゅっと狭くなった状態に。
元の画像と縮尺を合わせるように気をつけましょう。

ポイント③

クラス名を『 borderimage 』や『 roundimage 』としていますが、
これは私が適当に決めたものですので、お好みの名称に変更していただいて構いません。
呼び出したいときにすぐ記述できるよう、ご自分の覚えやすい名前にするのが一番です。

角を丸くする

画像03

CSS記述

html記述

ポイント①

border-radius の値を調節すると角丸の半径を変更することができます。
角丸02

スラッシュの前が水平方向の半径、スラッシュの後ろが垂直方向の半径、
それぞれの数値が左上・右上・右下・左下に対応しています。

ポイント②

これを応用すると、画像を完全な円形にすることも可能です。
円形

画像の幅(width)と高さ(height)を揃えて正方形にして、半径(border-radius)をそれに合わせます。

円形にする場合は最初から正方形の画像を作っておくと良いですね。

影をつける

画像に影を付けて立体的に見せるCSSです。
画像04

CSS記述

html記述

ポイント①

shadowの●●pxの数値を変えることで影の幅の太さなどを変更できます。

0px 0px 6px 3px という4つの数値は、左からそれぞれ
・水平方向への影(正の値で右、負の値で左へ)
・垂直方向への影(正の値で下、負の値で上へ)
・ぼかし(正の値のみ。値が大きいとぼかしが強くなり、0にするとくっきりした影になる)
・影の広がり(正の値で全方向に広くなり、負の値で小さくなる)
を決めるものです。

ポイント②

画像の幅を50%に設定しています。
これはbodyの幅を100%とするもので、今回bodyを800pxにしてあったので画像の幅が400pxになっています。
また、画像の高さもそれに合わせて自動調節されています。

ポイント③

display: inline-block; を指定しておくことによって
複数の画像を横に並べていった際のレイアウトが崩れないようにしています。

ポイント④

最後の2行はそれぞれのブラウザにCSSを読み取ってもらうためのものです。
各ブラウザによってCSSへの対応度合いや見え方が違うために
それぞれへの指示が別途必要になることがあります。
 ⇒ブラウザの違いについて

更にInternet Explorerのバージョン8以前に対応させるためには特殊な記述が必要になってくるのですが
バージョン8以下のInternet Explorerを使っているのは、何らかの事情があって8のままで留まっている方か、
Windows XP を使っている方くらいかと思うので、ここでは記述を省いています。

ポイント⑤

影の色指定については、上記のようにカラーコードで指定しても良いですし、
RGBAのカラーモデルで指定することもできます。
RGBAはそれぞれred(赤)・green(緑)・blue(青)・alpha(透明度)の値です。
こちらのほうが透明度まで指定できて便利に思えますが、ブラウザによっては
RGBAを全く理解してくれずに色味さえも無視して影を全く表示してくれないこともあるので
カラーコードのほうが無難かな・・・?という気がします。

例えばこんな感じで。

上のCSSを適用させたものがこちら。
画像07

淡い色の設定にするとペットや風景の写真も可愛らしく装飾することができますね。

その他の知っておくと便利なCSS (随時更新)

サイトを作っていると、テキストや画像の調整以外にもページ全体やリスト部分など
CSSを適用させたい箇所が色々と出てくると思います。
そこで基本的にこういうのは使うんじゃないかなーと思うCSSをご紹介します。
こちらは思いついた時に追加していきます。

全ての要素に対する指定

コメ印に似たこの記号『 * 』。
アスタリスク(星印)というものなのですが、これを指定すれば
ページ内の全ての要素に対してスタイルを適用することができます。
 (全称セレクタと呼ばれていますが、覚える必要はあんまりありません。

これは特にhtmlファイル側で呼び出す必要がなく、このまま単品でCSSとして適用されます。

画像を囲む線を消す

画像にリンクを貼ると、ブラウザによっては画像を囲む枠線が表示されます。
でもデザイン的に線は表示したくない、という時に使うCSSです。
リンク画像の枠線

CSS記述

html記述

CSSでテキスト強調

CSSを使えば、強調したい箇所を太字にするだけではなく、カラーやサイズも変更することが出来ます。
テキスト強調

CSS記述

html記述

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket