このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

スタイリング

記事Jul. 9th,2021
HTML文書の見栄えやレイアウトの方法を指定するスタイリングとUAスタイルシートについて。

HTMLのスタイリング

HTMLの見栄えやレイアウトを変える方法

HTMLは文書の意味的な構造を記述するためのマークアップ言語なのでそれぞれの要素の見栄えやレイアウトを決める役割は基本的にはありません。一般的に、ほとんどのウェブページは“CSS(Cascading Style Sheets)”によって記述された“スタイルシート(Style Sheets)”をHTML文書に適用することで要素の見栄えやどのようにレイアウトされるべきかが指定されています。

HTML文書にCSSによるスタイルを適用する方法は以下の3通りがあります。

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スタイルシートを上書きします。

HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク