HTMLでの半角スペースの作り方とは【メンターが回答】
「半角スペースでもCSSで書いた方が良いのでしょうか？」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。HTMLで半角スペースを作る方法についてぜひ理解しておきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。
質問に対して現役のエンジニアが回答していくシリーズだね！
今回はどういう質問でしょうか？
HTMLでの半角スペースの作り方だね！実際に回答してもらった内容を紹介するね！
お願いします！
質問
半角スペースや全角スペースが必要なとき、spanで囲んでCSSで隙間を開けないといけないのでしょうか？
特殊文字や全角スペースを使って開けてしまった方が面倒ではないのですが、どういう書き方が良いのか教えてもらいたいです。
具体例 高橋（スペース）健 CEO:（半角スペース）高橋（スペース）健
メンターからの回答
半角スペースや全角スペースが必要なとき、はたしかに様々ありますね。
正直、仕事の現場でも通常のテキストであれば、普通に半角スペースを入れています。
ただ見出しなど大きいテキストの場合、spanで囲って文字間を詰めたりというのはよくやります。
例えばトップにキャッチコピー的なテキストが入る場合、デザイナーはカーニングを結構シビアに求めてきたりする場合があるので、そのようなときは全文字spanで囲って、位置をかなり細かく詰めるというようなことも行います。グラフィックデザインの文字詰めのような作業になります。
基本自分の場合はデザイナーや案件によるところが大きいので、そこまでしない場合もある、というのが現状です。ですので具体例にあるような、名前の間にスペースを入れるなどは、通常のスペースキーで問題ないかなと思います。
ただ全角スペースを入れることはしないかなと。その場合はspanで囲ってmarginをつけて感覚を取ることが多いです。特殊文字を使う場合は「 」このような表記で空白をとるようですが、実際の現場ではあまり見たことがありません。
厳密にはそうすべき、なのかもしれませんが、HTMLソースがごちゃごちゃして見づらくなるので、みんな使っていないのかもしれないです。
ですので、今回のような場合であればそこまで厳密に気にしなくてもよいと考えています。
特殊文字を使って半角スペースを作る方法
半角スペースを作る場合は、「 」という特殊文字を入力することで実現できます。
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
半角 スペース
</body>
</html>
結果
半角 スペース
以上、HTMLでの半角スペースの作り方について解説しました。
TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。
他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
回答してくれたメンター
| 石津 義隆（いしづよしたかや）
趣味でサイトを作ったりしていたことから、仕事としてWeb制作をやっていきたいと思い、Webデザイナー・マークアップエンジニアに転身。現在はベンチャー企業でWeb制作に携わる。 教育分野にも関心があったことから、テックアカデミーでの業務も並行して行うように。自分自身のつまづいた経験を活かし、わかりやすく指導するように心掛けている。 |
HTMLでの半角スペースの作り方について解説したよ。
どのぐらいまでCSSを使うべきなのか迷いますね。
そうそう。ただ、普通のテキストの空白にCSSは少しやり過ぎのような感じがするね。
わかりました。ありがとうございます！
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。
独学に限界を感じている場合はご検討ください。
