[CSS] HTMLを整形する際にインライン要素に 含まれる改行をスルーさせる方法

  • このエントリーをはてなブックマークに追加

あんまり長い文を1行に書くと、エディタの横スクロールが大変になります。ざらっと眺めた時にも内容を把握しづらいですし。

そんな時にソースコード整形をするのですが、HTML文書でインライン要素に改行を含めると、通常は改行が半角スペースとして表示されてしまいます。それを解決する方法。


どこかのソース覗いて見たことあったんだけど、今までそれが何の意味があるのか分かりませんでした。
意外に簡単な答えでした。

結論は「改行をコメントアウトする」ですね。

つまりこういうこと。

<p><!--
    -->ナポレオン・ボナパルト(Napoleon Bonaparte, 1769年8月15日-1821年5月5日)<!--
    -->は革命期フランスの軍人・政治家で、フランス第一帝政の皇帝ナポレオン1世<!--
    -->(Napoleon Ier, 在位1804年-1814年、1815年)。音訳漢字表記は拿破崙。<br /><!--

    -->革命後のフランスをまとめあげ、帝政を敷き、ナポレオン戦争と呼ばれる戦争で<!--
    -->全ヨーロッパを侵略し、席巻するも敗北し、その後ヨーロッパの秩序はウィーン体制<!--
    -->に求められた。当時のイギリスの首相ウィリアム・ピットは、「革命騒ぎの宝くじ<!--
    -->を最後に引き当てた男」とナポレオンを評した。一方でゲーテは「徳を求めたものの<!--
    -->これを見出せず、権力を掴むに至った」と評している。<br /><!--

    -->今でもフランスを代表する英雄として抜群の知名度を誇る(彼を独裁者とみる向きもあり、<!--
    -->反ナポレオン派も少なくないという)。<!--
--></p>

※文はナポレオン・ボナパルト – Wikipediaより引用

ソースコードの行の長さがすっきりして快適です。ブラウザでの表示も問題ありません。今後はこの技を多用するかもしれません。
これが最良な方法かは分からないので、もっとエレガントな方法があるならば知りたいですね。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメントを残す