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

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

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

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

コラム

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

2021年4月5日 公開 / 2021年8月21日更新

テーマ:ホームページ制作関連

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

コラムキーワード: 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>
------------------------------------

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

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

この記事を書いたプロ

田中義治

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

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

Share

関連するコラム

田中義治プロへの
お問い合わせ

マイベストプロを見た
と言うとスムーズです

お電話での
お問い合わせ
088-655-5268

 

FAX:088-655-5279

勧誘を目的とした営業行為の上記電話番号によるお問合せはお断りしております。

田中義治

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

担当田中義治(たなかよしはる)

地図・アクセス

  1. マイベストプロ TOP
  2. マイベストプロ徳島
  3. 徳島のビジネス
  4. 徳島のホームページ制作
  5. 田中義治
  6. コラム一覧
  7. ホームページで、簡単にスペースの空白をあける方法

© My Best Pro