P-0037 HTML でのレイアウト指定の、 CSS での指定との対応表

はじめに

従来の HTML でのレイアウト指定はそのほとんどが CSS で代用可能です。とはいえ HTML と CSS は別物ですから、最初は、特に今まで table などによるレイアウトに慣れ親しんでいた場合などは、戸惑う事も多いかも知れません。

ここでは、これまで HTML のみで行っていたスタイル指定を CSS で置き換えるとどうなるかを表にまとめてみました。 table によるレイアウトを CSS へ移植する際などに参考にしてください。

※ HTML によるレイアウトと CSS によるレイアウトは考え方が根本的に違いますので、単に table によるレイアウトの代用として使うのは推奨できません。まずは CSS を利用しやすい HTML へ移行しましょう。

PageTop

HTML でのスタイル指定と CSS での指定の対応

body の属性

HTML での指定 CSS で置き換える場合 指定例
text 属性 body { color: 色 ; }
link 属性 a:link { color: 色 ; }
vlink 属性 a:visited { color: 色 ; }
alink 属性 a:active { color: 色 ;}
leftmargin, rightmargin, topmargin, bottommargin, marginwidth, marginheight 属性 body 要素に対し padding: 上 右 下 左 body { parring: 10px 10% 2em 30%; }
<body bgproperties="fixed"> body 要素に対し background-attachment: fixed body { background-attachment: fixed; }

PageTop

font 関係

HTML での指定 CSS で置き換える場合 指定例
size 属性, point-size 属性 font-size: 数値 em { font-size: 120%; }
color 属性 color: 色 em { color: blue; }
face 属性 font-family: フォント名又はフォント体系名 em { font-family: "MS UI Gothic","Centuly Gothic",sans-serif; }
font-weight 属性 font-weight: 数値 ; em { font-weight: 600; }
<basefont size="〜" color="〜"> body 要素などに対し font-size: 数値 ; color: 数値 body { font-size: 12pt; color: blue; }

PageTop

文字装飾

HTML での指定 CSS で置き換える場合 指定例
b font-weight: bold; em { font-weight: bold; }
i font-style: italic; em { font-style: italic; }
strike, s text-decoration: line-through; del { text-decoration: line-through; }
u text-decoration: underline; em { text-decoration: underline; }
big, small font-size: larger/smaller strong { font-size: larger; }
sup, sub vertical-align: sup/sub span.Number { vertical-align: sup; }
span.SubTitle { vertical-align: sub; }
tt font-family: monospace code { font-family: monospace; }
nobr, wbr white-space: nowrap/normal th { white-space: nowrap; }
code { white-space: normal; }
blink text-decoration: blink strong { text-decoration: blink; }

PageTop

マージン（余白）

HTML での指定 CSS で置き換える場合 指定例
blockquote, ul, ol, dl, table などによる左右マージン margin-right: 数値 ; margin-left: 数値 p { margin: 0 2em 1em; }

「インデント」とは先頭行の字下げのことです。複数行に渡る左右の余白などは「マージン」と呼びます。

PageTop

align 属性, 文字・ブロックの水平/垂直配置

HTML での指定 CSS で置き換える場合 指定例
<center>,<div align="center"> 等、文字の水平配置 text-align: center/left/right body { text-align: center; }
<center>,<div align="center"> による table の中央配置 table 要素に対し margin-left:auto; margin-right:auto; ( 参考 1, 参考 2) table { margin: 0 auto; }
<div align="right"> による table の右配置 table 要素に対し margin-left:auto; margin-right:0; ( 参考 1, 参考 2) table { margin: 0 0 0 auto; }
align="right/left" (table, img) float: left/right ( 参考 ) img { float: right; }
align="top/middle/bottom" (td, th, img) vertical-align: top/middle/bottom img { vertical-align: top; }

PageTop

テーブル

HTML での指定 CSS で置き換える場合 指定例
cellpadding 属性 td, th 要素に対し padding: 数値 th, td { padding: 10px; }
cellspacing 属性 table 要素に対し border-collapse: separate; border-spacing: 数値 table { border-collapse: separate; border-spacing: 2px; }
width 属性, height 属性 table, td, th 要素に対し width: 数値, height: 数値 table { width: 100%; height: 30em; }
background 属性, bgcolor 属性 table, td, th 要素に対し background: 色 url( 画像の URL) table { background: gray url(./img/bg.jpg); }
bordercolor 属性 table 要素に対し border-color: 色 table { border-color: #6641FF; }
bordercolordark 属性, bordercolorlight 属性 table 要素に対し border-style: solid/inset/outset/groove/ridge
明るい色・暗い色を指定する代わりに、「凹」「凸」などの形で指定。		 table { border: outset blue 2px; }
valign 属性 td, th 要素に対し vertical-align: top/middle/bottom td { vertical-align: middle; }
nowrap 属性 table, td, th 要素に対し white-space: nowrap th { white-space: nowrap; }
frame 属性 table, td, th 要素に対し border-width: 上 右 下 左 table { border-width: 2px 0 0 3px; }
rules 属性 th, td { border-width: 2px 0 0 3px; }

PageTop

テーブルレイアウト、段組

HTML での指定 CSS で置き換える場合 指定例
table による枠線 border: 色 スタイル 太さ ( 参考 ) p { border: red solid thin; }
table による配置 position: absolute/relative, float: left/right, etc. ( 参考 ) div.Menu { float: left; }
div.TitleArea { position: absolute; top: 0; left: 10%; }
div.ContentArea { margin-top: 3em; }

PageTop

その他の要素、属性

HTML での指定 CSS で置き換える場合 指定例
width 属性, height 属性 (table, img, etc.) width: 数値 ; height: 数値 table { width: 100%; height: 30em; }
border 属性 (table, img) border-width: 数値 table { border-width: 10px 1em; }
hspace 属性 (table, img) margin-top: 数値 ; margin-bottom: 数値 table { margin: 1em 0; }
vspace 属性 (table, img) margin-left: 数値 ; margin-right: 数値 table { margin: 0 2em; }
<br clear="all"> clear: left/right/both
ブロック要素にのみ指定可能		 h1 { clear: both; }
<hr width="〜" size="〜" color="〜" noshade="noshade"> hr { width: 幅 ; border-top: 高さ 色 スタイル ; }
CSS 2 による HTML 4 のスタイル定義例では、 hr 要素による水平線は border-top で指定されていることになっており、 Mozilla などはこの指定で解釈します。
スタイル「 solid 」で noshade 、「 inset 」で立体表示に相当。幅は margin による指定でも可（例： width="80%" → margin-left: 10%; margin-right: 10% ）。

PageTop

サンプルとして示した要素について

ここでサンプルとして登場している論理要素についての説明は以下のとおり。

PageTop

B:Back