30代未経験者がWEBエンジニアになる

30代未経験者が、WEBエンジニアになるまでの奮闘を書いていきます。

HTMLでは半角スペースは1つ分のみ

こんにちは、ぐっちと申します。

今回はアプリ作成中に気が付いた事について書こうと思います。

 フロント部分の作成中に、文字間を広めに取りたいと思いスペースを3つ入れてみた所、どうも思っていた程間隔があかない、思い切ってスペースを10個くらい入れても変わらない。

これは何かあると調べたら、「HTMLでは半角スペースは、1つ分のみ有効でそれ以上は無効になる」という事でした。

 どうやら、コード記述時のインデントのスペースを認識してしまいレイアウトが崩れる事を防止する為に、そういう仕様になっているみたいです。

 

ではどうすれば良いかですが

方法その1:全角スペースを入れる

 半角スペースが無効になるなら、全角スペースを入れればいいじゃないという感じで、全角スペースならいくらでも反映される様です

 

方法その2:特殊文字を使う

   これが半角スペースに当たる特殊文字

<div>Hello &nbsp;&nbsp;World!</div>

こうする事で半角スペース2つ分の隙間があきます。

 

他にも空白を入れる特殊文字があり

  • &ensp; → &nbsp; よりも広めの空白をいれることができる

  • &emsp; → &nbsp; の2倍の広さの空白をいれることができる

  • &thinsp; → &nbsp; よりも更に狭い空白を入れることができる

 

方法その3:CSSで隙間を取る

 隙間をあけたい文字を<span>タグで囲み、CSSでmarginを当てれば自由に隙間を調節できます。

 

文字の隙間をあけるにも色々な方法があり、やはりプログラムは奥が深いなと感心しました。

 

ここまで読んでくださり、ありがとうございました。

 ツイッターで日々の学習をつぶやいています(@Yamaguc45844169