[WEB・ブログ]HTML ソースの改行を半角スペースにしない方法

こんな書き方があったとは。

「 HTML ソース中での改行が半角スペースとして表示される」問題

前々から気にはなってたんだけど、気にしないふりをしていたことで、今回ふとググってみたら解決法が見付かった。教えてください!htmlソースの改行についてに書いてあったのでシェアしてみる。日付が2007年って書いてあるけど気にしないw

「 HTML ソース中での改行→半角スペース」問題

これは何かというと、 HTML ソース中でタグを複数並べることはよくあると思うんだけど、そのときにソース中の改行の部分でいらない半角スペースが表示されて、うぎゃー!ぴったし並ばずに隙間がー!な事態に陥る問題ですよと。

文字で読んでも分かりにくいので、実際に複数並べた img タグdisplay:inline; で並べた li タグで見てみよう。

タグを普通に並べてみる

<img width="32" height="32" alt="dummy1" src="http://dummyimage.com/32x32/000/fff.png&text=1" />
<img width="32" height="32" alt="dummy2" src="http://dummyimage.com/32x32/000/fff.png&text=2" />
<img width="32" height="32" alt="dummy3" src="http://dummyimage.com/32x32/000/fff.png&text=3" />
<img width="32" height="32" alt="dummy4" src="http://dummyimage.com/32x32/000/fff.png&text=4" />
<img width="32" height="32" alt="dummy5" src="http://dummyimage.com/32x32/000/fff.png&text=5" />
dummy1 dummy2 dummy3 dummy4 dummy5
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

まずは、至って普通の並べ方。ここではスタイルを省略して書いてないけど、さっき書いた通り li タグには display:inline; を適用してる。見やすさのために border もね。

要素の間には、ソース中の改行が半角スペースとして現れているのが見えると思う。(と言いつつ、ブラウザによっては空白なしで表示されるものがあったりして。)

ぴったし並べたいときにこの空白は邪魔すぎる

<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

場合によっては、このように改行なしで書くという方法もありだけど、さすがに img タグのような1個あたりの文字数が多いものを4個も5個も連続して書くというのは勘弁ですね。

タグ内で改行してみる

それでは、解決法その1。
タグ「後」の改行が表示されるんだったら、タグ「中」で改行してしまえ、という方法。

  <img width="32" height="32" alt="dummy1" src="http://dummyimage.com/32x32/000/fff.png&text=1"
/><img width="32" height="32" alt="dummy2" src="http://dummyimage.com/32x32/000/fff.png&text=2"
/><img width="32" height="32" alt="dummy3" src="http://dummyimage.com/32x32/000/fff.png&text=3"
/><img width="32" height="32" alt="dummy4" src="http://dummyimage.com/32x32/000/fff.png&text=4"
/><img width
="32" height=
"32" alt="dummy
5"
src="http://dummyimage.com/32x32/000/fff.png&text=5" />
dummy1dummy2dummy3dummy4dummy
5
<ul>
     <li>1</li
    ><li>2</li
    ><li>3</li
    ><li>4</li
    ><li>5</li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

改行の位置は、属性の前後や、はたまた属性の区切り前後、属性値の中と、…つまり、タグ名の後ろ <img{この間}/> ならどこでもいい模様。

ただ、アレだよね、アレ、アレ。

見にくい

改行をコメントアウトしてみる

そして、解決法その2。
改行なんてコメントアウトしてしまえ、という方法。

   <img width="32" height="32" alt="dummy1" src="http://dummyimage.com/32x32/000/fff.png&text=1" /><!--
--><img width="32" height="32" alt="dummy2" src="http://dummyimage.com/32x32/000/fff.png&text=2" /><!--
--><img width="32" height="32" alt="dummy3" src="http://dummyimage.com/32x32/000/fff.png&text=3" /><!--
--><img width="32" height="32" alt="dummy4" src="http://dummyimage.com/32x32/000/fff.png&text=4" /><!--
--><img width="32" height="32" alt="dummy5" src="http://dummyimage.com/32x32/000/fff.png&text=5" />
dummy1dummy2dummy3dummy4dummy5
<ul>
       <li>1</li><!--
    --><li>2</li><!--
    --><li>3</li><!--
    --><li>4</li><!--
    --><li>5</li>
</ul>
  • 1
  • 2
  • 3
  • 4
  • 5

実は、この美しさを見てこの記事を書くことを決めたんだけど、改行をコメントアウトなんて全く思いつかなかった。

タグが複数行に渡ることもないし、インデントも崩れないので、素ん晴らしいね。

場合によりけりで、どちらも使っていきましょう

…もしかして、みんな知ってたことだったかな? sima は知らなかった。

まぁこれで、例えば、メニューやらボタンやら何やらをつくって、きれいに並べたいときなんかにいらん空白に悩まされずに済むと。

これから使っていこうかいな。

あと、記事中のダミー画像は Dynamic Dummy Image Generator のサービスを使わせてもらった。Thanks ですよ。

記事書くの超絶サボってた!

これ書こう! → 後で書く → 書くのめんどくさいな → 書かない。なことが多いんだよね。文章書くの苦手ですw

HTML ソースの改行を半角スペースにしない方法へのコメント一覧

edvakfのコメント

僕の中での決定版はこれです。
http://web.g.hatena.ne.jp/vantguarde/20090416/1239807689
http://web.g.hatena.ne.jp/vantguarde/20090416/1239808429

simaのコメント

なるほど。更にそのような書き方もあるのですね!とても参考になりました。
いろいろな書き方があっておもしろいなぁー。

okのコメント

すごく助かりました!素晴らしい記事をありがとうございます!

HTML ソースの改行を半角スペースにしない方法へのコメントを書く

コメント : 3件

HTML ソースの改行を半角スペースにしない方法への言及をする

埋め込みリンクタグ
<a target="_blank" href="http://f-u.seesaa.net/article/205028062.html">HTML ソースの改行を半角スペースにしない方法 : full of universe</a>
トラックバック URL
http://blog.seesaa.jp/tb/205028062
承認したトラックバックのみ表示される

トラックバック : 0件

プロフィール

sima

ガジェット大好き。おもしろアイテム大好き。いろいろとまぁ物欲を刺激するモノが多いけど、なかなか手に入れることができないでいる。いつかは自分の部屋を、自分が気に入ったモノだけで埋め尽くしたいものだなぁ。…あっ、これ将来の夢ね。

Twitter はフォロー大歓迎なのでよろしく。よく蚊と戦ってるよ。

最新記事

  1. OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開 (05月25日)
  2. シカ成分を補充したら幸せになった (04月24日)
  3. ブログを(内部的にガッツリと)リニューアルしてみた (12月10日)
  4. 補完モードを開始するマッピングを書く (10月25日)
  5. アボカドを育ててみた…かった (07月23日)
  6. 正規表現クロスワードを完全クリアしてみた (07月19日)
  7. Gmail バックアップソフトの Gmvault が動かないときの解決法 (07月14日)
  8. Google アカウントが消える前に! Gmail フルバックアップのススメ (06月30日)
  9. 厳選して使っているポイントサイト2つ (03月27日)
  10. Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) (03月21日)

カテゴリ

アーカイブ

コメント

Gmail バックアップソフトの Gmvault が動かないときの解決法
dsfds (03月31日)
OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開
sima (06月26日)
you (11月30日)
you (11月30日)
sima (10月28日)
HTML ソースの改行を半角スペースにしない方法
ok (06月21日)
sima (05月28日)
edvakf (05月28日)
英数字・記号を並べてみる
ふぁ (11月25日)
コメハチ (11月02日)
OperaでもっとTumblrる!(OpeTumblrをまたまた改良)
you (05月09日)
sima (05月07日)
you (05月04日)
chikuwa (12月12日)

トラックバック

20代で知っておくべき週番号のこと
full of universe (05月16日)
UKTenkiを自動巡回させてみる(MortScript)
なんとなくすばらしい日々の戯れ言 (01月31日)
新着メールを一気に開くMortScriptを改良!
PDAと私生活 (11月07日)
PDAと私生活 (11月02日)
コイツはすごい!Windows Live Writerでブログ投稿をラクラクに
シーサーイーサー (10月31日)
Willcom03で新着メールを一気に開く!(MortScript)
PDAと私生活 (10月10日)

のカレンダー