HTMLソースのコメントを
より見易くする

  • 2017.08.30 Wednesday
  • 09:33

HTMLソースを書いていて、

(HTMLに限らず、CSSでも他の言語でも同じ要領ですが)

あとで解り易いようにコメントを入れる事がありますが、

探している箇所をスクロールさせながら見て行っても、見落としてしまったり見辛い事があります。

そういう事を軽減する小技があります。

 

例えば、HTMLソースの場合のコメントタグは

<!-- コメント -->

ですが、この「<!--」と「-->」の間には、空白、タブスペース、改行などが入っても構わないのです。

つまり、

 

<!-- 〓〓〓〓〓〓〓〓〓〓〓〓

   ここから始まる物語

     〓〓〓〓〓〓〓〓〓〓〓〓 --!>

 

などとすれば、記述全体からその部分が目立つので目に入り易く、見易くなります。

(但し、JUGEMのエディターなどでは、空白、タブスペースが勝手に詰まって消えてしまう仕様になっている)

 

また、「空白の美学」という考え方があって、

適度に空白を入れると、全体が美しく見えるというものですが、

敢えて空白行を1〜3行程度入れると全体が見易くなります。

細かい区切りでは、1行空白。

大きな区切りでは、2行まとめて空白行。

特別な区切りでは、3行まとめて空白行。などと意味を持たせるとより解りやすくなります。

(但し、JUGEMのエディターなどでは、空白行が勝手に詰まって消えてしまう仕様になっている)

 

CSSの場合は、「/*」と「*/」の間がコメントですね。

 

/*  〓〓〓〓〓〓〓〓〓〓〓〓

   今回はこの辺で。

    〓〓〓〓〓〓〓〓〓〓〓〓 */

 

JUGEMテーマ:WEBデザイン:ホームページ制作

 


お気に召しましたら、一票(ワンクリック)下さい。ランキングに参加しておりますゆえ。


人気ブログランキング

ウェブデザインランキング

[このブログの「selected entries」「categories」へジャンプする]

コメント
コメントする








    

calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< July 2018 >>

カウンターなど


[このブログの「selected entries」「categories」へジャンプする]


[✓]

ユグドア」(YggDore)に登録済みです。
カンパやチップを大歓迎します!
要望等も受け付けてます。
(できる範囲が狭いが)

このページへチップを贈る



DIYフリークの集い
(ウェブリング)

前へ
このサイト名欄
次へ
ランダムに飛ぶ
リンク一覧
参加を希望する
Q&A

ランダムでサイトをひとつ紹介します。



Twitterも↓やってます

お勧めソフト、サービスなど

私がよく使うショップ

  ヨドバシ.com/ヨドバシカメラ  

  モノタロウ  

  Amazon.com  

  西友-SEIYUドットコム  

イオンショップ

私も「ビッグローブ光」に乗り換えました。↓


私も「mineo」に乗り換えました。
満足度調査でトップクラスらしい。↓



私も「Norton Internet Security」使ってます。↓

シマンテックストア




楽天モーションウィジェット
A8.net版

(あなたのご利用傾向から)





利用しているアフィリエイト


機能的かも↓


「西友 SEIYUドットコム」のアフィリエイトならここ↓


記事が少なくても審査に通りました。↓

リンクシェア アフィリエイト紹介プログラム

「住信SBIネット銀行」のアフィリエイトならここ↓

アフィリエイトのアクセストレード

誰もが知る楽天市場↓


なんでもござれのAmazon↓





試用スペース

試しに貼ってみた

↓ローテーションバナー(無作為)






ここまで試用スペース



selected entries

categories

archives

recent comment

recommend

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM