zzz...
このページは特に何かを詳しく説明したりするのではなく、CSSとはどういったもので、どのような利用法があり、どのような利点があるのかなど、とにかくCSSに対するイメージをしっかりと持って貰うためのページです。要素毎にどうしてそうなるのかを考えるのではなく、こうやってHTMLファイルにCSSを適用させるのかと広い範囲で考えてください。ああそんな事も出来るのかとか、そういう風に使うのかといった感じで軽く見て頂ければ良いと思っています。
zzz...
寝ないで下さい！
CSSを適用させる為のサンプルファイルが必要ですので主要要素を用いたサンプルファイルを作りました。これは特に用意してもらう必要はありませんので、どのようなHTMLが書かれているのかをチェックして下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>CSSを適用する為のサンプルHTMLファイル</title> </head> <body> <h1>h1要素</h1> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <strong> strong要素strong要素strong要素strong要素strong要素strong要素 strong要素strong要素strong要素strong要素 </strong> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> <h2>h2要素</h2> <h3>h3要素</h3> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <em> em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 </em> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> <ul> <li>ul-li要素</li> <li>ul-li要素</li> <li>ul-li要素</li> </ul> <h2>h2要素</h2> <h3>h3要素</h3> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <a href="#"> a要素a要素a要素a要素a要素a要素a要素a要素a要素a要素a要素a要素 a要素a要素a要素a要素a要素a要素a要素a要素 </a> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> <dl> <dt>dt要素</dt> <dd>dd要素</dd> <dt>dt要素</dt> <dd>dd要素</dd> <dt>dt要素</dt> <dd>dd要素</dd> </dl> <h3>h3要素</h3> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <q> q要素q要素q要素q要素q要素q要素q要素q要素q要素q要素 q要素q要素q要素q要素q要素q要素q要素q要素q要素q要素 q要素q要素q要素q要素q要素q要素q要素q要素q要素q要素 q要素q要素q要素q要素q要素q要素q要素q要素q要素q要素 </q> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> <blockquote cite="#"> blockquote要素blockquote要素blockquote要素blockquote要素 blockquote要素blockquote要素blockquote要素blockquote要素 blockquote要素blockquote要素blockquote要素blockquote要素 blockquote要素blockquote要素blockquote要素blockquote要素 blockquote要素blockquote要素blockquote要素blockquote要素 blockquote要素blockquote要素blockquote要素blockquote要素 </blockquote> <ol> <li>ol-li要素</li> <li>ol-li要素</li> <li>ol-li要素</li> </ol> <address> address要素address要素address要素address要素address要素 address要素address要素address要素address要素address要素 address要素address要素address要素address要素address要素 address要素address要素address要素address要素address要素 address要素 </address> </body> </html>
なんですかこれ？
主要各要素を用いた素のHTMLです。ブラウザによって見え方は異なりますが、CSSを適用させない状態ですとこんな感じになります。これはブラウザが勝手に要素を判別して独自に表現しているだけです。
HTMLの記述が全く同じでも、適用させるCSSが違えば見た目は変わるという事を実感して下さい。下記に挙げるページのHTMLは適用するCSSを決める<link rel="stylesheet" type="text/css" href="./css1.css">の部分の記述を除いて全て上記の通りのHTMLです。
これが全部同じHTMLで、CSSが違うだけなのですか？
はいそうです。疑うのならばソースを見てみて下さい。
本当だ！全部同じですね！でもブラウザによって酷い事になってるのも…。
ごめんなさい。あまり推敲していないのでおかしな事になっているかもしれません。
それにこのセンス…。
何か言いましたか！？
幾つかのページで同じデザインを実現したい場合はその都度CSSを書くのではなく、一つのCSSを複数のHTMLに適用する事によって手間が省けます。また、メンテナンスを行う場合にも一つのCSSファイルを書き換えるだけで複数のHTMLファイルのスタイルを同時に変更する事が可能です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./common.css" type="text/css"> <title>CSSを適用する為のサンプルHTMLファイル</title> </head> <body> <h1>h1要素</h1> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <strong> strong要素strong要素strong要素strong要素strong要素strong要素 strong要素strong要素strong要素strong要素 </strong> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./common.css" type="text/css"> <title>CSSを適用する為のサンプルHTMLファイル</title> </head> <body> <h1>h1要素</h1> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <em> em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 </em> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./common.css" type="text/css"> <title>CSSを適用する為のサンプルHTMLファイル</title> </head> <body> <h1>h1要素</h1> <p> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 <strong> strong要素strong要素strong要素strong要素strong要素strong要素 strong要素strong要素strong要素strong要素 </strong> <em> em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 em要素em要素em要素em要素em要素em要素em要素em要素em要素em要素 </em> p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素p要素 p要素p要素p要素p要素p要素p要素p要素p要素 </p> </body> </html>
今度は少しずつ記述の違ったHTMLファイルが三つですか。三つとも<link rel="stylesheet" href="./common.css" type="text/css">で同じCSSファイルを読み込んでるんですね？
もうだいぶどこに何が書かれていているのか、違いは何なのかを判断できるようになりましたね。
上で用意したHTMLファイルに対して commmon.css を書き換えるだけで三つのHTMLファイルのスタイルが同時に変更されます。
ここでは都合により例によって適用させるCSSファイルを変更していますが、実践では適用させるCSSファイルを変更することなく、内容を書き換えるという動作に当たります。
おおっ！CSSを書き換えるだけで三つのHTMLファイルのスタイルが一気に変わりました。これなら模様替えも楽々ですね。
HTMLファイルを弄ることなく見栄えを変更する事が出来るのは説明した通りですが、複数のHTMLファイルに一つのCSSファイルを適用させられる特長を利用すれば、複数のファイルのスタイルを同時に変更する事が可能です。
これって何個でも出来るんですか？一つのCSSファイルを百個のHTMLファイルに適用させるとか？
はい可能です。その場合は一つのCSSファイルを書き換えると、百個のHTMLファイルのスタイルが同時に変更されます。きちんとしたHTMLを書いて、整理されたCSSの書き方をして置けば、Webサイトを改装する時などにとても楽です。是非こういったCSSの利点を最大限に活かせるような使用法を覚えて下さい。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]