CSS

馬鹿の一つ覚え: CSS

CSS

CSSをHTMLヘッダの中に書き込む

HTML5
<head>
  <style type="text/css">
    .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; }
    a img      { border: none; }
  </style>
</head>

CSSを別ファイルで用意する

HTML5
<head>
  <link rel="stylesheet" href="./glires.css" type="text/css" />
</head>

センタリング

HTML5
<div style="text-align: center">
<table>
<tr><td>センタリング1</td><td>センタリング2</td>
<tr><td>センタ3</td><td>センタ4</td>
</table>
</div>

表のセンタリング

HTML5
<table style="margin: auto">

表の中の個々の要素の左寄せ、センタリング、右寄せ

HTML5
<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>

テキストに下線

HTML5
テキストに<span style="text-decoration: underline">下線</span>を引く<br>

表の中の個々のセルに着色

HTML5
<td style="background-color: yellow">foo</td>

floatで設定したテキストの回り込みを解除

HTML5
<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">