閉じる

【HTMLインデント】コード+文章を見やすくする方法(初心者向け)

HTMLでインデントを指定する理由、方法を初心者の方向けに紹介。 HTMLを学ぶ上で大切な2つのインデント「コードのインデント、文章のインデント」を詳しく解説、全てサンプルコード付きなので実際に手を動かして学ぶことができ、初心者の方も安心して理解する事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「インデントってそもそもなに?・・」
「インデントでコードを綺麗に記載したい!」「WEB上に表示された文章をインデントし綺麗に見せたい!」

そのように考えている、初心者WEB制作者の方も多いのではないでしょうか?

インデントを綺麗にする事で、「共同製作者にはコードを」「ユーザーにはWEBページの文章を」見やすくわかりやすくする事ができます。

今回は、初心者のかた向けに「インデント」について解説し綺麗なコード・文章を作成できる様に解説していきます。

インデントとは

インデントとは文章の先頭を字下げするという事です。
実際に見てみましょう。

コードのインデント


文章のインデント

インデントされていない文章↓

・一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。
お客様やパートナー様と共に歩み成長し、
自社の価値を磨きながら徐々に影響範囲を広げてまいります。

インデントされている文章↓

・一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。
お客様やパートナー様と共に歩み成長し、
自社の価値を磨きながら徐々に影響範囲を広げてまいります。


コードにしても、文章にしてもインデントしてある方が見やすいですね!
特に長いコード、長い文章になると、他の人が見た時にわかりにくくなってしまいます。

WEB制作でかかせないインデントのケースは主に2点あります
1.コードのインデント
2.文章のインデント

順番に解説していきますね。

コードをインデント

メリット

1.開始タグと終了タグがすぐにわかる
2.親子関係にあるタグを見つけやすくなる

インデントの入力方法

インデントには2つの入力方法があります。

①「tabでの入力」
②「半角スペース」

どちらでの入力でも大丈夫ですが、メリット・デメリットを紹介します。

tabキーを使ったインデント

●メリット:入力が簡単で早い
●デメリット:表示させる環境によってインデントの幅が変わるので、見た目が変わる

半角スペースキーを使ったインデント

●メリット:環境によって見た目がが変わることがないため違和感がない
●デメリット:スペースキーの入力回数が増える

※tabキーのデメリットについて補足
tabキーは閲覧環境によって「半角スペース4つ分」もしくは「半角スペース8つ分」に置き換えられてしまいます。
tabキーも半角スペースもそれぞれにメリット・デメリットがあるためにどちらが絶対ということはありません。
現場、各個人によって併用して使用されているケースが実態です。

インデントを入れる場所

具体的にインデントを入れる場所を解説していきます。

①開始タグと閉じタグを同じ位置にする。

※解説
開始タグ終了タグをそろえることにより、構造がよりわかりやすくなります。

②親子の関係になるタグ

※解説
親と子の構造がよりわかりやすなります。
インデントの目的は、誰が見てもすぐにわかりやすい構造にすることです。
上記2点の場面でインデントをおこなえば、構造的にわかりやすくなります。

ただし1行が短く、わかりやすい場合は無理にインデントをしなくても良いです。
<a><img src=”img/example”></a>(aタグが親、imgタグが子要素のような1行が短い場合など)

インデントを自動整形してくれるツール

「ソースコードが長い・手動でインデント整形が手間」という方向けに
「自動整形ツール」を紹介します。

○SYNCER

https://lab.syncer.jp/Tool/HTML-PrettyPrint/

ソースコードを貼り付け、中央にある「整形」ボタンを押すだけで整形されたソースコードが表示されます。
また不完全なタグがあると、対象のタグ一覧を表示する、デバック機能も搭載されています。

その他機能として

・ビューアー機能
入力したコードをこのページで確認できる(広い画面)ビューアー機能搭載

・インデントの文字設定機能
インデントの文字(半角スペース、タブ)その個数を設定できる

・長すぎる行の改行機能
1行が長すぎる場合、適切な箇所で改行してくれる

・改行を保持機能
既存の改行を保持するか、削除できるかを選択してくれる

○dirtymarkup

https://www.10bestdesign.com/dirtymarkup/

海外のサイトになります。
ソースコードを貼り付け、オプションを選択し「Clean」をクリックすると整形されます。

その他機能として

・言語の選択機能
HTML・CSS・JS・APIから選択できる

・インデントの選択機能
タブ・スペース2・スペース3・スペース4・スペース8から選べる

文章をインデント

インデントされていない文章↓

・一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。
お客様やパートナー様と共に歩み成長し、
自社の価値を磨きながら徐々に影響範囲を広げてまいります。

インデントされている文章↓

・一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。
お客様やパートナー様と共に歩み成長し、
自社の価値を磨きながら徐々に影響範囲を広げてまいります。


文章の先頭に「・」、「①」など記号がある場合は、先頭を1文字インデントして、そろえることで見やすい文章にすることができます。
しかしHTMLで文章全体を1文字インデントしようと思い、地道にスペースを空けたとしても、スマホになると画面幅違うため、文章の折り返し地点が変わり結局崩れてしまいます。
そこでCSSを使用して文章のインデントをすることができます。

CSSで文章全体をインデント

サンプルコード結果表示

これを作る↓

・株式会社セルリア
一つひとつの仕事に真剣に向き合い周囲に貢献し続けます。
お客様やパートナー様と共に歩み成長し、 自社の価値を磨きながら徐々に影響範囲を広げてまいります。
多くの幸福を目指し、貢献の輪を広げていくことが 弊社のアイデンティティです。

HTMLサンプルコード

CSSサンプルコード

※解説
CSSプロパティ、「 padding-left:1em;」、「 text-indent:-1em;」
この2つのプロパティで改行をする事ができます。「em」は1文字分という単位です。
順番に解説していきます。

①「 padding-left:1em;」で文章全体の左側に1em分の余白を作ります、いい換えると、pタグ内の文章全体を右にずらします。

②「 text-indent:-1em;」で1行目だけ左側の余白をなくします、言い替えると1行目だけ元の状態に「-1em」を指定し戻したということです。

まとめると、最初に文章全体を右に動かし、1行目だけを左(元の位置)に戻すことによってインデントを意図的に作り出している状態になります。

インデントの注意点

2行以上段落を書く場合は、都度p要素で段落付けを行う必要がある

「text-indent」は先頭の1行目だけしかインデントできません。
 pタグを分けて段落を書かないと下記の様になってしまいます。

上記のようになってしまいます。
2段落とも正しくインデント行うと下記の様になります。
下記サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
必ず段落事に<p>タグを指定して「 text-indent」を指定してください。

まとめ

最後にポイントをまとめます。

WEB制作でインデントが必要なケースは2つありました。
①コードをインデントする
②文章をインデントする

それぞれのケースのインデント方法
①コードをインデント
・「半角スペース」
・「tabキー」

②文章をインデント
・「CSSプロパティtext-indent」

いかがだったでしょうか?
今回は「インデント」について解説しました。
WEBは1人で完結するものではありません、「文章を見てくれるWEB閲覧者」
「コードを確認してもらう共同制作者」など様々な人が関わりWEBサイトが成り立っています。
今回紹介した「インデント」を意識し、より良いものを制作していきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。