Javascript Patchworker - インフォメーション

サンプルソース

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 02 <html><head> 03 <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> 04 <title>WELCOME TO MY HOMEPAGE!</title> 05 <style type="text/css">  </style> 09 <link rel="stylesheet" type="text/css" href="style.css"> 10 </head><body> 11 <p style="margin-left:40px;"> 12 <a href="main.html">リンク</a>に<span class="inpact">マウス</span>を乗せると<br> 13 文字色が変わります</p> 14 </body></html>

CSSの基本

HTML文書にCSSを記述するには以下の3つの方法があります。

style属性を使用

　共通属性であるstyle属性を使用すると、簡単にスタイルシートを設定することが出来ます。
ほんの1，2行程度のスタイルであればこの方法を使ったほうが簡単です。（記述方法は11行目を参照）

<style>タグを使用

　同じ設定を複数の要素に記述するのは非常に手間のかかる作業ですし、何行ものスタイルの場合はソースが見にくくなります。
そこで<style>～</style>をヘッダに記述し、その中にスタイルシートを記述することで、スタイルの設定をより簡単に出来ます。
この場合は以下のようにしてスタイルを記述します。

タグ名 { 属性 : 値; } タグ名, タグ名 { 属性 : 値; } #ID名 { 属性 : 値; } タグ名#ID名 { 属性 : 値; } /*タグ名の中のID名のみ適用*/ .クラス名 { 属性 : 値;} タグ名.クラス名 { 属性 : 値; } /*タグ名の中のクラス名にのみ適用*/
　また、スタイルの中身はコメントアウトするのが一般的です。スタイルシート未対応のブラウザでは、この部分がディスプレイに出力されてしまうためです。
　また、/*～*/はスタイルシートでのコメントを表しています。

外部からCSSを読み込み

　スタイルシートだけ別に記述したファイル（*.css）を用意し、それを以下のタグで読み込む方法があります。

<link rel="stylesheet" type"text/css" href="ファイル名.css">

*.cssファイルの記述方法はstyleタグと一緒です。（もちろん<style>タグやでのコメントアウトは必要ありません）
ヘッダ部に記述するのと違い、どんなスタイルを設定しているのか直接的には分からない、また複数のドキュメントに同じスタイルを設定できるため、一般的な設定方法となっています。

<div>と<span>

　HTMLにはスタイルシートを設定するためのタグとして<div>と<span>があります。（設定方法は最初に紹介した方法）この２つの違いは、<div>はブロックレベル要素、<span>はインラインレベル要素だということです。
　また<div>には、非推奨ですがalign属性がついています。

前のページ　　次のページ

 TOPページに戻る