スタイルの読み込み | CSS電光石火

更新情報
  • 08/10/15 ｢デザイン-ヘッダ｣追加
  • 08/09/29 ｢フッタの作成｣追加
  • 08/09/29 ｢メイン-右カラム｣追加
  • 08/09/29 ｢メイン-サイドバー｣追加
  • 08/09/29 ｢ヘッダの作成｣追加
  • 08/09/28 ｢要素の中央寄せ｣追加
  • 08/09/26 ｢スタイルの読み込み｣追加
  • 08/09/26 ｢float｣追加
  • 08/09/26 ｢ブロックとインライン｣追加
  • 08/09/23 ｢widthとheight｣追加
  • 08/09/23 ｢marginとpadding｣追加
  • 08/09/23 ブラウザ対応アイコン追加
  • 08/09/23 ｢スタイルの読み込み｣追加
  • 08/09/19 ｢DOCTYPE｣追加
  • 08/09/19 ｢開始前に｣追加
  • 08/09/18 ｢始めに｣修正
  • 08/09/18 ｢始めに｣追加
  • 08/09/18 サイトオープン

スタイルの読み込み

  • htmlとbody

  •  

現在ez-htmlを開いて学習をされている事と思いますが、開始されてまもなく、html、というタグとbodyというタグが存在しているのがお分かり頂けると思います。
それらの要素（開始タグと終了タグを囲んだもの）は実のところ他の要素と殆ど同じように扱う事が出来ます。
大抵初心者の方はこのbodyの中身にタグをマークアップしてゆけばよい、と考えがちですが、それ以前にhtmlタグから編集する事も可能なのです。
例えば、有名な「ブラウザのデフォルトスタイル・リセット」などもこれに当たります。

  •  
  • <body style="margin:0;">
      マージンリセット
    </body>
  •  

上記と同じように表記し、保存した後にFirefoxブラウザで確認して見てください。
すると、style="margin:0;"を表記する前と後では隙間に若干の差が現れたはずです。
既にお分かりの通り、指定する前のほうが隙間が開いており、指定後には隙間が閉じています。
このように、CSSはタグならば、ありとあらゆるものが指定できる事を覚えておいてください。

  • プロパティ

  •  

プロパティと値 それでは、CSSの各部名称について表記したいと思います。
先ほどの実習で、margin:0;という表記を書きましたが、これはbodyのマージンを0ピクセルにしてください、という意味になります。前についているstyle=""は今からスタイルシートを指定しますよ、という命令だと思えばほぼ間違いないでしょう（※厳密には、style属性といいます）。
ところで、CSSの各部位には名称があります。今回使ったこのmargin:0;に関して言えば、左端のmargin部分がプロパティ、右の部分が値と呼びます。

  • インラインスタイル

  •  

さきほど示した<body style="margin:0;">ですが、この手法によるスタイル指定方法をインラインCSS、インラインスタイルと呼びます。正確な名称はありませんが、簡単に説明すると「直接開始タグに指定するCSS」のことを指します。
この手法は主に、該当ページでしかそのCSSを使わない、あるいは、ページをまたがって指定が続いているが、短すぎて文書構造とCSSを分離する必要性が無い、といった場合に使用します。

  • スタイル要素による指定

  •  
  •  
  • 										
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>スタイルの指定方法</title>
 </head>
 <body style="margin:0;">
 </body>
</html>
  •  

現在、上記の赤で示されたコードとなっているはずです。しかしながらこの手法では、要素一つ一つにしかスタイルを指定できません。この問題を解決するにはどうすればよいでしょうか。

  •  
  • 										
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>スタイルの指定方法</title>
  <style type="text/css">
   body{
    margin:0;
   }
  </style>
 </head>
 <body>
 テスト表示
 </body>
</html>
  •  

インラインスタイルの弱点を回避するためには、上記のようにスタイルタグ<style type="text/css">を作成し、その中にスタイルを記述してゆきます。この手法の利点は、同じ要素や、同じ属性に対して一括指定が可能であるという点です。例えば、以下のような事も可能です。

  •  
  • 										
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>スタイルの指定方法</title>
  <style type="text/css">
   body,
   div{
    margin:20px;
   }
  </style>
 </head>
 <body>
  <div>テスト</div>
 </body>
</html>
  •  

違う要素に同じ指定を一括して指定する場合は、上記のように「,」カンマで区切ります。カンマ後は改行しても構いませんし、改行しなくても構いません。

  • スタイルを別ファイルからリンクする

  •  

通常、WEBページは数多くのファイルから成り立っており、一番多いファイルが画像、次に多いのがhtmlとなるはずです。
したがって、わざわざスタイルをファイルごとに編集していては、幾ら時間があっても足りません。特に100Pを越すような大規模WEBサイトの場合これらの修正は致命的なロスとなります。
プログラムに詳しい方だと、「そういったものは全てPerlかPHPで書き出して一括管理してしまえばよい」という事になるのでしょうが、これではせっかくの静的htmlの資源を活かした事にはなりません。
なぜなら、CSSにはちゃんと一元管理するための方法論が用意されているからです。以下にその方法を示します。

  •  
  • 										
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>スタイルの指定方法</title>
  <style type="text/css">
   body,
   div{
    margin:20px;
   }
  </style>
 </head>
 <body>
  <div>テスト</div>
 </body>
</html>
  •  

CSS作成まず、上記の<link rel="stylesheet" type="text/css" href="style.css" />を追加してください。このlinkタグは必ず、<head>～</head>内に存在しなければなりませんので、ご注意ください。そして、追加後に灰色のstyle要素をマウスで反転選択、右クリックから切り取り、その後消してください。
次に、右のスクリーンショットにあるように、画面左上の▼を押し、CSSをクリックしてください（※メモ帳の方は空白ファイルを新たに開くだけでも構いません）。すると、何も書かれていない空白のファイルが出現するはずですから、そこにコピーしていた<style>から始まる内容を貼り付けましょう。
その後、<style>と</style>だけ消してください。
次に、ペーストが終了したら、このファイルを左上のメニューからファイル　＞　名前をつけて保存します（スクリーンショットにある(F)からたどれます）。名前はstyle.cssとしてください。
保存したCSSファイルは現在編集中のhtmlと同一の場所へと置いてください。

スタイルを貼り付けた時の状態
 

スタイルを貼り付けた時の状態

同一フォルダに置く
 

同一フォルダに置く

 

  • ブラウザプレビュー

  •  

さて、これまでブラウザでのプレビューを行いませんでした。もしかすると、既にダウンロードしたFirefox3にて確認を行った人もいらっしゃるかもしれません。あるいは、IE6・IE7でのプレビューを行った人もいらっしゃるかもしれません。
Firefox3をお勧めした理由は、IE6/7の表示がWEB標準からかけ離れていて正しくない、という点と、強力なデバッグツールを備えている、という点の二点です。色々書いても混乱すると思いますので、先ほどあげたコードをひとまずプレビューしてみたいと思います。Firefox3は前項で既にインストール済みでしょうか？
もしインストール済みであれば、Firefox3を起動して、保存したファイルをFirefoxへとドラッグ・アンド・ドロップで投げ入れて見てください。Firefox3を既定のブラウザに設定した人であれば、保存したファイルをダブル・クリックするだけでFirefoxが起動するはずです。

ドラッグ・アンド・ドロップ
 

ドラック･アンド･ドロップでファイルを読み込ませる。この方法でなくとも、ファイルが関連付けされている場合はファイルをダブルクリックするだけで起動可能。

 

なお、上図の場合、htmlファイルがindex.htmlとなっていますが、もし他の保存名にしている場合、上記に習ってindex.htmlとしてください。詳しくは省きますが、サーバーにアップロードした際に、index.htmlがなければ、読み込まないサーバも存在するからです。
さて、無事読み込みは完了したでしょうか。別ファイルからCSSの読み込みが成功し、divとbodyにそれぞれmarginが20px分指定されている場合は、下図のような表示となるはずです。

マージンの隙間
 

divとbodyにmarginがそれぞれ20px（ピクセル）確保され、計40px分の隙間が外へと向かって開く。

 

  • プロパティ

  •  

さて、ここまでできた時点で、やや前後しますが、一旦話しを戻します。先ほどプロパティと値の事について書きましたが、これではどの要素（タグ）にプロパティを指定しているのか分かりません。そこで出てくる概念がセレクタです。

  •  
  • 										

body,
div{
 margin:20px;
}
  •  

上記コードを見てもらえば分かりますが、このコードのbody,divに当たる部分がセレクタと呼ばれるもので、どの要素（タグ）に対してプロパティ指定を行っているか、という命令となります。ここにbodyがあればbodyに対する指定になりますし、ここにdivがあればdivへの指定となります。当然、両者が指定されている上のケースですと、両方への指定となします。

なお、ここで初めて閉じタグの無いタグ、<xxx />が出現しました。これは、通常<xxx></xxx>とするところを閉じタグを省略して書いてしまおうというものです。タグの終端に「/」が入っているのがお分かりいただけると思います。
したがって、<xxx></xxx>と<xxx />は同一表記と捕らえても構いません。

DOCTYPE宣言