CSS
CSSをタグの中に埋め込む
<span style="color: #38755d; font-size: 200%">木賊色</span>
CSSをHTMLヘッダの中に埋め込む
<head>
<style>
.red { color: #ff0000; }
.green { color: #008800; }
.blue { color: #4444ff; }
.white { color: #ffffff; }
.big { font-size: 125%; }
.sup { font-size: 75%; vertical-align: 40%; }
.sub { font-size: 75%; vertical-align: -25%; }
.underline { text-decoration: underline; }
.clear { clear: both; }
p.center { text-align: center; }
a img { border: none; }
/* コメント */
</style>
<!-- コメント -->
</head>
CSSを別ファイルで用意する
<head>
<link rel="stylesheet" href="./foo.css" type="text/css">
</head>
ページ全体の文字の大きさを指定
<body style="font-size: 200%">
マージンとパディングの設定
<div style="margin: /* 要素の枠の外側 */ 8px; padding: /* 要素の枠の内側 */ 4px ">
センタリング
<div style="text-align: center"><!-- テキストだけでなく画像などのインライン要素にも -->
<img src="centered.jpeg" alt="centering"><br>
テキストや画像<br>
</div>
<div style="text-align: center">
<table>
<tr><td>センタリング1</td><td>センタリング2</td>
<tr><td>センタ3</td><td>センタ4</td>
</table>
</div>
表のセンタリング
<table style="background-color: #ededed; width: 1024px; margin: auto">
表の中の個々の要素の左寄せ、センタリング、右寄せ
<tr><td>設定なし 設定なし 設定なし</td></tr>
<tr><td style="text-align: left">左寄せ</td></tr>
<tr><td style="text-align: center">センタリング</td></tr>
<tr><td style="text-align: right">右寄せ</td></tr>
<tr><td style="vertical-align: top">上へ</td></tr>
<tr><td style="vertical-align: bottom">下へ</td></tr>
テキストに下線
テキストに<span style="text-decoration: underline">下線</span>を引く<br>
テキストを着色
テキストを<span style="color: red">赤色</span>に<br>
表の中の個々のセルに着色
<td style="background-color: yellow">foo</td>
テキストの回り込みを解除
<img src="foo.png" alt="foo" style="float: right; border: 1px black solid">
<br style="clear: right">
<br style="clear: left">
<br style="clear: both">
<div style="clear: left"></div>
<p style="clear: right"><br></p>
ページの中央に枠を作ってその中に書き込む
body { background: #e7e7e7; }
div { background: #ffffff; width: 800px; padding: 40px; text-align: text-left;
border: 1px solid #bcbcbc; margin: 80px auto; line-height: 200%; }
表のサイズを指定
table { width: 640px; }
表のの枠線
table, ht, td { border: none; } /* 枠線を付けない */
table { border: solid 1px #dcdcdc; } /* 表だけに枠線 */
画像の周囲に線
<img src="foo.jpeg" alt="枠で囲む"
style="border: solid 2px green">
<img src="foo.jpeg" alt="上下に線"
style="border-top: solid 12px blue; border-bottom: solid 8px lime">
画像を隙間なく配置
<img src="foo.png" alt="no space" style="float: left; vertical-align: middle">
フォームの枠やボタンの大きさを指定
<input type="text" name="organism" style="font-size: 2em">
<input type="submit" value="Submit" style="font-size: 2em">
リストの行間
<li style="padding: 8px 0">foo</li>