W-0037 HTML でのレイアウト指定の、 CSS での指定との対応表
- 2001/2/2
※ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。
はじめに
従来の HTML でのレイアウト指定はそのほとんどが CSS で代用可能です。とはいえ HTML と CSS は別物ですから、最初は、特に今まで table などによるレイアウトに慣れ親しんでいた場合などは、戸惑う事も多いかも知れません。
ここでは、これまで HTML のみで行っていたスタイル指定を CSS で置き換えるとどうなるかを表にまとめてみました。 table によるレイアウトを CSS へ移植する際などに参考にしてください。
※ HTML によるレイアウトと CSS によるレイアウトは考え方が根本的に違いますので、単に table によるレイアウトの代用として使うのは推奨できません。まずは CSS を利用しやすい HTML へ移行しましょう。
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; } |
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; } |
文字装飾
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; } |
マージン(余白)
HTML での指定 | CSS で置き換える場合 | 指定例 |
---|---|---|
blockquote, ul, ol, dl, table などによる左右マージン | margin-right: 数値 ; margin-left: 数値 |
p { margin: 0 2em 1em; } |
「インデント」とは先頭行の字下げのことです。複数行に渡る左右の余白などは「マージン」と呼びます。
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; } |
テーブル
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; } |
テーブルレイアウト、段組
HTML での指定 | CSS で置き換える場合 | 指定例 |
---|---|---|
table による枠線 | border: 色 スタイル 太さ
( 参考 )
|
p { border: red solid thin; } |
table による配置 | position: absolute/relative, float: left/right, etc.
( 参考 )
|
div.Menu { float: left; }
|
その他の要素、属性
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% )。 |
サンプルとして示した要素について
ここでサンプルとして登場している論理要素についての説明は以下のとおり。
- インライン要素
- em
- 強調
- strong
- より強い強調
- code
- プログラム等のソースコード
- del
- 削除された語句
- img
- 埋め込み画像
- span
- 汎用インライン要素
- ブロックレベル要素
- body
- 本文
- h1 〜 h6
- 見出し
- p
- 段落
- table
- 表
- th
- 表の見出しセル
- td
- 表のセル
- div
- 汎用ブロックレベル要素