スタイルに関するHTMLタグ
スポンサード リンク
HTML 4.01では、見栄えに関する設定をHTMLドキュメントから個別のスタイルシートへ移動することができます。
スタイルに関するHTMLタグのサンプル
スタイルを備えたHTMLのサンプル
<head>セクション内に記述されたスタイル情報を備えたHTMLドキュメントをデモンストレーションします。
下線の無いリンクのサンプル
style属性を使用して下線の無いリンクを作る方法をデモンストレーションします。
外部スタイルシートのサンプル
外部スタイルシートにリンクするために<link>タグを使用する方法をデモンストレーションします。
どうやってスタイルを適用させるのか？
ブラウザがスタイルシートを読み込むと、スタイルシートの内容に従ってHTMLドキュメントを表示します。スタイルシートを挿入するには次の3つの方法があります。
外部スタイルシート
多くのページに同じスタイルを適用する場合、外部スタイルシートが理想的です。外部スタイルシートを使うことで、1つのファイルの変更だけで全Webサイトの見栄えを変更することができます。各ページは<link>タグを使用して、スタイルシートにリンクさせなければいけません。<link>タグは<head>セクション内に記述します。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部スタイルシート
単独のHTMLドキュメントにそのドキュメント独自のスタイルを適用する場合、内部スタイルシートが理想的です。<style>タグを<head>セクション内に記述し、内部スタイルシートを定義します。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>インラインスタイル
独自のスタイルを単独の要素に適用させる場合、インラインスタイルが理想的です。
インラインスタイルを使用するためには、適切なタグの中でstyle属性を使用します。style属性にはどんなCSSプロパティも含むことができます。以下のHTMLコードは、テキストの色と段落の左側余白を設定しています。
<p style="color: red; margin-left: 20px">
これは段落です。
</p>スタイルに関するHTMLタグ一覧表
| タグ | 説明 |
|---|---|
| <style> | スタイルシートを定義します |
| <link> | 外部ファイルの参照を定義します |
| <div> | ブロックレベルを定義します |
| <span> | インラインを定義します |
| <font> | 非推奨。代わりにスタイルシートを使用します |
| <basefont> | 非推奨。代わりにスタイルシートを使用します |
| <center> | 非推奨。代わりにスタイルシートを使用します |
スポンサード リンク