Jul. 9th,2021
HTMLのスタイリング
“link”要素
“rel”属性の値が“stylesheet”である“link”要素はHTML文書とHTML文書とは別のファイルに記述された外部スタイルシートを読み込みます。外部スタイルシートは複数のHTML文書で共有することができます。
もっとも一般的なスタイルシートの適用方法であり、スタイルシートが長大である場合や同じスタイルシートを複数の文書に適用する場合にはスタイルシートを外部スタイルシートとして記述して“link”要素で読み込むと効率的で管理が容易です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">
<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">
<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">
</head>
<body>
...
“style”要素
“style”要素はHTML文書の文書内にスタイルシートを記述するための要素です。
スタイルシートが短く、他の文書に使用されるものではない場合は“style”要素にスタイルシートを記述するのが手軽です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>黄色いフルーツバナナ - 果物を食べる</title>
<style>
p.sample {
color: rgb(0,0,0);
font-size: 1.5em;
font-family: sans-serif;
text-align: justify;
}
</style>
</head>
<body>
...
“style”属性
“style”属性は要素に直接スタイルシートを記述するための属性です。グローバル属性なのですべての要素に使用することができます。
スタイルの情報が短く、繰り返し使用されるものではない場合には“style”属性にスタイルシートを記述するのが手軽です。
<p style=" background-color: rgb(215,206,202); border-radius: 20px; padding: 20px 10px;">
冬はつとめて<br>
雪の降りたるは、いふべきにもあらず<br>
霜のいと白きも、また さらでもいと寒きに、火など急ぎおこして、炭もてわたるも、いとつきづきし<br>
昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし<br>
</p>
スタイリング要素
1990年代のブラウザ戦争でブラウザがこぞって独自機能を追加していった結果、過去のHTMLには書体や文字の色を変える“font”要素や太字にする“b”要素、イタリック体にする“i”要素などのスタイリングのための要素や属性がありました。しかし、これは文書の意味的な構造を記述するための言語であるHTMLの本来あるべき姿から逸脱しており、スタイリングのための言語であるCSSの仕様が勧告されたことでHTML 4.0では見栄えのための機能は非推奨となりました。
その後、HTML5ではスタイリングのための要素や属性はスタイリングではない別の意味に変更されるか廃止され、文書の意味的な構造のマークアップはHTML、スタイリングはCSSで行うものと明確に分離されました。
| 要素 | 元の意味 | 現行の仕様 |
|---|---|---|
| <basefont> | 基準となるフォント | 廃止 |
| <b> | 太字 | 区別したいテキスト |
| <big> | 大きめの文字 | 廃止 |
| <center> | 中央揃え | 廃止 |
| <font> | フォント | 廃止 |
| <i> | イタリック体 | 質が異なるテキスト |
| <s> | 取り消し線 | 関係性のない内容 |
| <small> | 小さめの文字 | 注釈 |
| <strike> | 取り消し線 | 廃止 |
| <strong> | 強い強調 | 重要性の高いテキスト |
| <u> | 下線 | テキストのラベル |
現行のHTMLの仕様でも推奨されるUAスタイルシートにこれらの要素や属性によって設定されるスタイルが“表現上のヒント(Presentational Hints)”として記載されていますが、CSSでは表現上のヒントを文書に適用するか否かはユーザー・エージェントに任されており、必ずその通りに表示されるとは限りません。
UAスタイルシート
“UAスタイルシート”とは？
一般的なブラウザには要素ごとの既定の表示方法をCSSによって決めた“ユーザー・エージェント(UA)スタイルシート(User agent style sheet)”が実装されています。
HTMLでマークアップしただけで見出しが大きめに表示されたり、段落の前後に1行分の余白が挿入されたりするのはUAスタイルシートで決められているスタイルが適用されているからです。UAスタイルシートがあることによって適切な要素でマークアップされたHTML文書は制作者がスタイルシートを作っていなくても最低限の読みやすさが確保されるようになっています。
HTMLの仕様書ではそれぞれの要素をどのような見た目で表示するべきかについて基本的には定められていませんが、一般的なユーザー・エージェントはCSSに対応していることが期待されており、UAスタイルシートとして推奨されるスタイルが記載されています。
UAスタイルシートと制作者がHTML文書に適用するスタイルシートは優先順位があり、ほとんどの場合は制作者によるスタイルシートが優先され、UAスタイルシートを上書きします。
