マイベストプロ徳島
田中義治

広い視野とIT技術を駆使し事業成長をサポートするプロ

田中義治(たなかよしはる) / ITコンシェルジュ

株式会社ハルシステムコンピューター

コラム

ホームページで、簡単にスペースの空白をあける方法

2021年4月5日 公開 / 2021年4月6日更新

テーマ:IT関連

コラムカテゴリ:ビジネス

コラムキーワード: ITマネジメント業務効率化 ツール業務効率化 手法

ホームページ内で、簡単にスペースを空けて調整したい場合に、知っておくと便利な方法を紹介します。

基本は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>
------------------------------------

お困りのことがあれば、私にご相談ください。

このようなコラムが、少しでも皆さんのお役に立てば幸いです。

━━━━━━━━━━━━━━━━━━━━━━━━━━
◆ インターネットサービスで、あなたをフルサポート ◆
株式会社ハルシステムコンピューター
HP: https://halsc.com
人材ミスマッチ予防診断: https://hexaco.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━

この記事を書いたプロ

田中義治

広い視野とIT技術を駆使し事業成長をサポートするプロ

田中義治(株式会社ハルシステムコンピューター)

Share

関連するコラム