Chapter 17

第二回「HTML/CSS講座::空白文字の扱い」(5.31up!)

shiozumi
shiozumi
2022.05.31に更新

空白文字の扱い方!

このコンテンツ全般、おそらくほんの些細な小技集となるかも知れませんけど、宜しければどうぞ! 又、空白って目に見えないので、テキスト編集は、あまり使いたくないものです。(^^ゞ ソースコードでは、どちらかというとタブの方を多用します。まあ~、エディターでファイルを開いた時のレウアウトの差異をなくすことに拘ると、半角スペースが確実なのですけどね。で、そんなことは置いといて、HTML形式では、空白を特殊文字を使って表現できるので、そちらがお勧めですね。勿論、空白でスペースをいれるのでもOKですが、、、PHPやJSなどのプログラムが絡んでくる場合は、自分なりの仕様統一は、しっかりして置いた方がいいかな? そんなことを書いている私も実際には、入り乱れていまっているのも事実ですけど・・・ (;^ω^)

動画解説 Vol.1

https://youtu.be/bOJx-beCqNA

HTML特殊文字コード表(お勧めサイト)

http://www.shurey.com/js/labo/character.html
  ・・・通常の半角スペースと同じサイズの空白。
  ・・・それより少し広めの空白。
  ・・・さらに広めの空白。
  ・・・「 」よりも狭い(細い)空白です。

参考サイトは、こちらを!

https://qiita.com/a-takano/items/b4b6eb29dc04970010c4

動画解説 Vol.2

https://youtu.be/5fdUiAlVos0

特殊記号の指定方法は2種類あります!

文字実体参照
(&キーワード;)
数値文字参照
(&#10進コード;)
数値文字参照
(&#x16進コード;)
< < <
< < <

動画解説 Vol.3

https://youtu.be/cbU6_bhUfiI

半角スペースの参考サイト!

https://webliker.info/03847/

ぷちまとめ

半角スペース2個を入れても、1個しか有効にならないその理由が、少しは理解できてきたと思いますが、みなさんは、いかがでしょうか? プログラミングもそうですけど、まずは、実際に自分で入力してみて、ブラウザーで、確認するところからですね。(^^ゞ 慌てずに、じっくり学習して行きましょう!