第一回「HTML と CSS 実際に触ってみよう」
ホームページ内で、簡単にスペースを空けて調整したい場合に、知っておくと便利な方法を紹介します。
基本はCSSでしっかりと定義して、<div>～</div>などで括って行うのがセオリーですが、
急いでいるときに、少しスペースが欲しいだけなのに、、、と面倒な場面もあるものですよね？
そんなときに、スペースを使って間隔を設定する方法を紹介します。
例えば、他にもこんな方法が考えられますが…。
・半角スペースを複数入力するのは？
これは、1個分のスペースしかカウントされません。
・全角スペースを複数入力するのは？
入力した数のスペースはカウントされますが、文字を整えるのが、微妙に上手くいかないこともあります。
そして何より、インチキ臭～い気持ちになります。（笑）
そこで、ただスペースで間隔を取りたい場合に使えるのが、こちらです。
<span style="margin-right: 18px;"></span>
18pxの数値を小さくすれば間隔が詰まり、大きくすれば間隔が開きます。
参考例として、表示で実現したいのがこれとした場合、
（例）
あいうえお
かきくけこ
さしすせそ
次のようにソースに書きます。
あいうえお<br>
<span style="margin-right: 19px;"></span>かきくけこ<br>
<span style="margin-right: 38px;"></span>さしすせそ
<br> は改行を指定しています。
なお、白紙にこれだけを書き、html でプレビューした場合、Google Chrome は文字化けしませんが、Internet Explorer では文字化けします。
HTML5の宣言や文字コードの指定も入れて書くと、次のようになります。
こちらは文字コードを指定しているので、Internet Explorer でも文字化けしません。
[ test.html ]
------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
あいうえお<br>
<span style="margin-right: 19px;"></span>かきくけこ<br>
<span style="margin-right: 38px;"></span>さしすせそ
</body>
</html>
------------------------------------
お困りのことがあれば、私にご相談ください。
このようなコラムが、少しでも皆さんのお役に立てば幸いです。
