前回まででWebサイト作成手順について一通りのご説明をしてきました。
思いついたらまた書き足すかもしれませんが、一応今回がシリーズの最終回ということで、サイトを見栄え良くしてくれるCSSの記述について簡単にご説明いたします。
CSSとは
カスケーディング・スタイル・シート、略してCSS。
CSSでレイアウトや装飾を記述し、htmlファイルに適用させれば、そこにあるテキストの内容や段落構成そのものは全く変わりないのですが、ブラウザ上で表示される見かけはかなり違ってきます。
女性でいうお化粧みたいなものですね。
人様の目に触れるなら少しでも綺麗でいたいの…それならカスケーディングなスタイルシートであなたのサイトも簡単キレイ！！（広告風）な感じです。
こうして見ていただくとCSSの有り無しでかなり見た目が変わるのがお分かりいただけると思います。
基本的なCSSの書き方
例としてこれは p（＝段落） のテキスト（文字）に対してcolor（＝色） を #00ffff（アクアブルー） に変える、というCSSです。
p { color: #00ffff }
細かく見ていくと一応それぞれの部位に名称が付いているのですが、普段使うことも無いのであんまり覚える必要はありません。
こんな感じかーというのが分かればそれでOKです。
このように、基本のCSSは
・スタイルを指定する場所（段落、ヘッダー、フッター、メイン、決められたボックス内など）
・指定したい項目（高さ、幅、サイズ、色、余白など）
・その細かい設定（ピクセル、％、カラーコード、指定する画像など）
以上を組み合わせることで出来ています。
CSSファイルをhtmlファイルに呼び出して使う
詳しくは 【 １１ 】縦並びメニューをCSSで作る でもご説明していますので合わせてご覧ください。
ここでは一例として先ほど上で使った段落タグ（p）をCSSファイルにして使ってみます。
CSSファイルを作る
まずテキストエディタ（メモ帳やTeraPadなど）を起動して、CSSコードを記述します。
@charset “shift_jis”;
p { color: #00ffff }
この例ではTeraPadを使用しています。
ちなみに記述の最後に[EOF]というのがくっついていますが、これはテキストエディタがEnd Of File、ここが記述の終点だよーと分かりやすくしてくれているだけですので気にしなくて大丈夫です。
また、一行目に文字コードを Shift_JIS で宣言しています。
基本的にWindowsやMacのOSをお使いであれば Shift_JIS の宣言でほぼ問題ないと思いますが、使用しているソフトや使用環境により最適な文字コードは異なりますのでご注意ください。
記述が済んだら【 ファイル 】メニューから【 名前を付けて保存 】を選択して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>の間に以下のタグを記述、保存します。
<head>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</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％とか92％とかそのへんで…という割とぼんやりした設定をしておきます。
まずページ全体のフォントサイズを指定してます。
body { font-size: 100%; }
それを踏まえて、段落内のフォントサイズはこれ！と決めるのがこちら。
p { font-size: 88% }
文字のフォント（書体）
Web制作や印刷における文字のフォントとは書体を指します。
ワープロ時代から変わらず存在する明朝体やゴシック体などが皆さんご存知のフォントの代表ではないでしょうか。
特にフォント指定しなくても、閲覧者の使用している環境によってそれぞれ最適と思われるフォントが表示されるのですが、どうせなら皆にこのフォントで見てほしい、日本語に合ったフォントで表示したほうが見やすいし…ということで皆さんフォントの指定も行うのが普通です。
基本的にこれ書いておけば大丈夫、と言われているフォントがこちら。
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
一番にヒラギノ角ゴ Pro W3、それがダメならメイリオで、更にそれもダメならOsakaで…というように表示したいフォントを優先順に並べて記述します。
日本語と英字の両方で記述があるフォントは、日本語の指定を理解してくれない外国生まれ外国育ちのブラウザ（Appleのサファリとか）の旧バージョンに歩み寄るために記述しています。
最近では女の子の手書き文字のような可愛い丸文字のフォントなんかもあったりするのですが、残念なことに世界規格で標準対応しているフォントではないので、そういった特殊なフォントを使う際には「そのフォントをインストールしているお仲間さんにだけ、そのフォントで見えればいいや」という開き直りが必要です。
文字の行間幅（インデント）
line-height を指定することによって行の高さを設定することができます。
これによって行と行の隙間に余裕を作ることができるので、行間が詰まってて読みづらい、といったような問題を解決することができます。
文字フォントのまとめ
それではこれまでの項目を踏まえてCSSを適用してみましょう。
まずhtmlタグはこちら。
<p>形状・メーカーを問わず、液晶画面修理、HDDやSSDの交換、DVDドライブの交換、</p>
<p>マザーボード修理など幅広くパソコン修理に対応いたします。</p>
記述するCSSはこちら。
p {
font-size: 88%;
text-indent: 40px;
line-height: 30px;
color: #666666;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
}
上記それぞれをファイルに記述してアップロード後にWeb上で表示したのがこの状態です。
この他にも様々な要素を設定することができます。
余白 マージンとパディング
CSSを記述しているとしょっちゅうお世話になるのがmargin（マージン）と padding（パディング）という2種類の余白です。
次項の画像装飾でも margin と padding を使いますので、ここで先にご説明しておきます。
margin が外側、 padding が内側と考えていただくと分かりやすいかもしれません。
例えばこの項の見出しを例に見ていただくと、それぞれの余白設定はこのようになっています。
CSSの記述としては以下のとおり。
h2 {
margin-top: 60px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 15px;
}
私は個別に記述したほうが後で見返した時に分かりやすいので一つずつ記述していますが、より簡素にまとめて記述する方法もあります。
上のマージンとパディングをひとまとめに記述するとこうなります。
h2 {
margin: 60px 0px 30px 0px;
padding: 5px 0px 5px 15px;
}
すっきりするけど私はとっさにどれが上だか左だか分からなくなっちゃうんですよね…。
上・右・下・左、つまり上から時計回りの順番になってるので、それを忘れない自信がある方はまとめて書いた方が便利かもしれません。
ちなみに余白の幅を揃える場合は更に簡単に記述することができます。
/* 上下左右のマージンを0px（余白無し）に */
margin: 0px;/* 上下左右のパディングを20pxに */
padding: 20px;/* 上下を15px、左右を20pxに */
margin: 15px 20px;/* 上を10px、左右を20px、下を30pxに */
margin:10px 20px 30px;
画像に関するCSS
サイトやブログに写真やイラストを載せたいとき。
枠をつけてカッコよくしてみたり、角をとって可愛くしてみたりとどうせなら見栄え良くしたいものです。
見かけの問題だけでなく「この画像はここに配置したい！」といったサイトのレイアウトとしても画像の扱いは大切ですね。
そんなときにもCSSによるスタイル設定が役立ちます。
画像の装飾について色々なパターンを記載しておきますのでご参考の上、お好みの大きさやカラーでお試しください。
まず画像を準備
写真やイラストを用意してFTPソフトでアップロードしましょう。
パソコンの中ではなく、Webサーバー上にある状態にしておかないとサイトの中で表示させることができません。
素材やサイズ変更については
画像編集ソフト・素材サイト、商用利用OKな無料素材 も合わせてご覧ください。
枠をつける
画像を線で囲んで写真風の枠にします。
.borderimage {
width: 300px;
height: 200px;
margin-top:15px;
margin-bottom:10px;
margin-right:0px;
margin-left:5px;
display: inline-block;
border:1px solid #696969;
padding:5px;
background-color:#ffffff;
}
<img src=”画像のURL” alt=”画像のタイトル” class=”borderimage”>
ポイント①
背景色（background-color）を変えればまた違った雰囲気に。
ポイント②
画像の大きさ 幅（width）と高さ（height）は画像の大きさに合わせて変更してください。
特に指定をしなければ元の画像そのままの大きさになります。
また、元の画像の縦横比率を無視して幅と高さを決めてしまうと、画像が伸び縮みしておかしなことになったりします。
例えば幅2：高さ1の画像を、幅3：高さ2とCSSで指定すると幅の縮尺が変わってぎゅっと狭くなった状態に。
元の画像と縮尺を合わせるように気をつけましょう。
ポイント③
クラス名を『 borderimage 』や『 roundimage 』としていますが、これは私が適当に決めたものですので、お好みの名称に変更していただいて構いません。
呼び出したいときにすぐ記述できるよう、ご自分の覚えやすい名前にするのが一番です。
角を丸くする
.roundimage {
width: 300px;
height: 200px;
margin-top:15px;
margin-bottom:10px;
margin-right:0px;
margin-left:5px;
border-radius: 20px 20px 20px 20px;
}
<img src=”画像のURL” alt=”画像のタイトル” class=”roundimage”>
ポイント①
border-radius の値を調節すると角丸の半径を変更することができます。
スラッシュの前が水平方向の半径、スラッシュの後ろが垂直方向の半径、それぞれの数値が左上・右上・右下・左下に対応しています。
.roundimage {
width: 300px;
height: 200px;
margin-top:15px;
margin-bottom:10px;
margin-right:0px;
margin-left:5px;
border-radius: 100px 20px 100px 20px / 100px 20px 100px 20px;
}
/* 水平方向/垂直方向の半径の値 左上・右上・右下・左下 */
ポイント②
これを応用すると、画像を完全な円形にすることも可能です。
画像の幅（width）と高さ（height）を揃えて正方形にして、半径（border-radius）をそれに合わせます。
.roundimage {
width: 200px;
height: 200px;
margin-top:15px;
margin-bottom:10px;
margin-right:0px;
margin-left:5px;
border-radius: 100px / 100px;
}
円形にする場合は最初から正方形の画像を作っておくと良いですね。
影をつける
画像に影を付けて立体的に見せるCSSです。
.shadowimage {
width: 50%;
margin-top:5px;
margin-bottom:20px;
margin-right:0px;
margin-left:20px;
display: inline-block;
box-shadow: 0px 0px 6px 3px #a39da0;
-webkit-box-shadow: 0px 0px 6px 3px #a39da0; /* Safari,Google Chrome用 */
-moz-box-shadow: 0px 0px 6px 3px #a39da0; /* Firefox用 */
}
<img src=”画像のURL” alt=”画像のタイトル” class=”shadowimage”>
ポイント①
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を全く理解してくれずに色味さえも無視して影を全く表示してくれないこともあるのでカラーコードのほうが無難かな？という気がします。
例えばこんな感じで。
.shadowcolor {
width: 300px;
margin-top:5px;
margin-bottom:20px;
margin-right:0px;
margin-left:20px;
display: inline-block;
box-shadow: -12px 11px 0px 0px rgba(255, 190, 192, 1);
-webkit-box-shadow: -12px 11px 0px 0px rgba(255, 190, 192, 1);
-moz-box-shadow: -12px 11px 0px 0px rgba(255, 190, 192, 1);
}.shadowcolor2 {
width: 300px;
margin-top:5px;
margin-bottom:20px;
margin-right:0px;
margin-left:20px;
display: inline-block;
border-radius: 20px 20px 20px 20px;
box-shadow: 0px 0px 26px 18px rgba(159, 163, 113, 0.43);
-webkit-box-shadow: 0px 0px 26px 18px rgba(159, 163, 113, 0.43);
-moz-box-shadow: 0px 0px 26px 18px rgba(159, 163, 113, 0.43);
}
上のCSSを適用させたものがこちら。
淡い色の設定にするとペットや風景の写真も可愛らしく装飾することができますね。
その他の知っておくと便利なCSS （随時更新）
サイトを作っていると、テキストや画像の調整以外にもページ全体やリスト部分などCSSを適用させたい箇所が色々と出てくると思います。
そこで基本的にこういうのは使うんじゃないかなーと思うCSSをご紹介します。
こちらは思いついた時に追加していきます。
全ての要素に対する指定
コメ印に似たこの記号『 ＊ 』。
アスタリスク（星印）というものなのですが、これを指定すればページ内の全ての要素に対してスタイルを適用することができます。
（全称セレクタと呼ばれていますが、覚える必要はあんまりありません）
* {
margin : auto;
padding: 0px;
font-size: 100%;
}
これは特にhtmlファイル側で呼び出す必要がなく、このまま単品でCSSとして適用されます。
画像を囲む線を消す
画像にリンクを貼ると、ブラウザによっては画像を囲む枠線が表示されます。
でもデザイン的に線は表示したくない、という時に使うCSSです。
.no_border {
border-style:none;
}
<a href=”リンクのURL” rel=”external”><img src=”画像のURL” alt=”画像の名前” width=”●●px” height=”●●px” class=”no_border” ></a>
CSSでテキスト強調
CSSを使えば、強調したい箇所を太字にするだけではなく、カラーやサイズも変更することが出来ます。
strong {
font-weight: bold;
color: #ff1493;
font-size: 120%;
}
<strong>特に強調したい箇所</strong>
Webサイトを作ろう！：シリーズ記事
【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート（CSS）の解説（この記事です）
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望
