CODING

[HTML] 特殊文字で空白スペース

投稿日:


どうも、べ〜やんです。

今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。





空白スペース


htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつの空白スペースとして使用されます。

日本語入力での全角スペースはそのまま使用されますが、これは非推奨な方法なので使用しない方がいいでしょう。

また、今回は特殊文字を使った方法を紹介しますが、大きな空白スペースなどはCSSで設定する様にしましょう。


特殊文字


空白スペースを挿入する特殊文字は、nbsp emsp thinspなどがあり&;で挟んで記述します。

  1. nbspは半角スペースより少し広いスペースで改行を禁止する効果があります。
  2. emspは全角スペースと同じ大きさのスペース
  3. thinspnbspよりも少し小さいスペース

半角スペースを使用した場合と特殊文字を使用した場合では、改行の位置が変わるので使い分けていきます。

See the Pen NWWoEeV by beeyan (@orientado) on CodePen.


おわりに


今回は、特殊文字を使って空白スペースを挿入する方法を紹介しました。

日本語の文章だと使用する機会は少ないと思いますし、CSSでmarginなどを使った方が簡単な場合も多いと思うのでそれほど使わないかもしれませんね。



-CODING
-, ,

執筆者:


comment

関連記事

[CSS] 自動ナンバリングする方法

どうも、べ〜やんです。 今回は、counterを使って自動でナンバリングする方法を紹介します。 自動ナンバリング 見出しなどに番号をつけて表示する場合に、手動で入力すると面倒ですし途中で順番が変わった …

[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …