HTMLでは半角スペースは１つ分のみ
こんにちは、ぐっちと申します。
今回はアプリ作成中に気が付いた事について書こうと思います。
フロント部分の作成中に、文字間を広めに取りたいと思いスペースを３つ入れてみた所、どうも思っていた程間隔があかない、思い切ってスペースを１０個くらい入れても変わらない。
これは何かあると調べたら、「HTMLでは半角スペースは、１つ分のみ有効でそれ以上は無効になる」という事でした。
どうやら、コード記述時のインデントのスペースを認識してしまいレイアウトが崩れる事を防止する為に、そういう仕様になっているみたいです。
ではどうすれば良いかですが
方法その１：全角スペースを入れる
半角スペースが無効になるなら、全角スペースを入れればいいじゃないという感じで、全角スペースならいくらでも反映される様です
方法その２：特殊文字を使う
これが半角スペースに当たる特殊文字で
<div>Hello World!</div>
こうする事で半角スペース２つ分の隙間があきます。
他にも空白を入れる特殊文字があり
-
 → よりも広めの空白をいれることができる -
 → の２倍の広さの空白をいれることができる -
 → よりも更に狭い空白を入れることができる
方法その３：CSSで隙間を取る
隙間をあけたい文字を<span>タグで囲み、CSSでmarginを当てれば自由に隙間を調節できます。
文字の隙間をあけるにも色々な方法があり、やはりプログラムは奥が深いなと感心しました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています（@Yamaguc45844169）
