字下げする！CSSでインデントする方法【初心者向け】現役Webデザイナーが解説
初心者向けにCSSでインデントする方法について解説しています。サイト内の文章を字下げしたい時に役立つので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSでインデントする方法を紹介します。
Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。
1文字目をインデントする方法、2行目以降の最初の文字をインデントする方法について解説しています。
目次
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
田島メンター！！文字列の最初にインデントを入れたいのですが、どのようにスタイルを指定すればいいんでしょうか～？
そういうときはtext-indentを使うといいよ。
インデントの長さも指定したいんですが……
text-indentプロパティでは値でインデントの長さを決めるので、好きな長さにすることができるんだ。
さっそくやってみよう。
インデントとは
インデントとは、「1文字下げるもの」のことを言います。
国語の教科書や作文などで、行頭1文字下げることをインデントと言います。
プログラムのソースコードにおけるインデントは、プログラムを読みやすくする効果があります。
Pythonのようにインデントを行うことがプログラミングの文法上決まっているものもあります。
今回の記事で解説するインデントは、そのようなプログラミングを実装する上で利用するインデントとは異なり、表示した際にデザイン上の変化を生むためのインデントになります。
例えばHTMLでWebコンテンツを執筆するときに、読みやすくするため1行目をインデントで字下げしたり、2行目以降の行頭を一括でインデントしたりすることができるようになります。
これにより、Webコンテンツを読みやすくする事が可能です。
【動画でも解説しています。クリックで見る！】
インデントを指定する書き方
CSSでインデントを指定する書き方を確認しましょう。
CSSサンプルコード
p{
text-indent: 1em;
}
「text-indent」は最初の1文字にしか適用されません。
CSS内にある「1em」というのは1文字分を示すので、1文字分のインデントがされます。
1文字分のインデントは最初の1文字にのみ適用されているために、最初の行がインデントされているように見えます。
text-indentの基本の書き方だよ。
この場合は段落pに、1em分のインデントが付くことになるんですね。
次は実際にインデントを設定して、画面で確認してみよう。
実際に書いてみよう
実際にコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS インデント</title>
<link rel="stylesheet" type="text/css" href="sample.css">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
</head>
<body>
<h1>Sample</h1>
<p>
インデントされます。<br />
インデントされません。
</p>
</body>
</html>
CSS
p{
text-indent: 1em;
}
表示結果
解説
cssの1行目のp{では、htmlの次のようなpタグで囲まれた部分を指定して、cssを適用しています。
<p> インデントされます。<br /> インデントされません。 </p>
具体的にはtext-indent: 1em;で、1em分である1文字分のインデントを適用しています。
結果的に最初の行だけ1文字行頭がインデントされます。
実行結果
See the Pen
JjbmeLv by マインクラフトゲームアプリプログラミング学校 (@programjp)
on CodePen.
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
2行目以降を1文字下げる方法
2行目以降だけを下げたい場合の書き方を説明していきます。
実はこの「text-indent」、マイナスを表すこともできます。
違いが分かるように、「1em」と「-1em」を同じHTML内に入れます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS インデント</title>
<link rel="stylesheet" type="text/css" href="sample.css">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
</head>
<body>
<h1>Sample</h1>
<p class="indentfront">
1文字目がインデントされます。<br />
ここはインデントされません。<br />
ここはインデントされません。<br />
ここはインデントされません。
</p>
<p class="indentback">
ここはインデントされません。<br />
2文字目以降がインデントされます。<br />
2文字目以降がインデントされます。<br />
2文字目以降がインデントされます。
</p>
</body>
</html>
CSS
p.indentfront{
text-indent: 1em;
padding-left: 1em;
}
p.indentback{
text-indent: -1em;
padding-left: 2em;
}
表示結果
解説
cssの1行目、p.indentfront{では、htmlの<p class=”indentfront”>で囲まれたブロックに対して、cssを適用しています。
.という記号は、.indentfrontがindentfrontクラスであることを意味する記号です。
htmlのclass=”indentfront”がクラス（class）を表しています。
具体的には、text-indent: 1em;で最初の1文字をインデントします。
padding-left: 1em;で、左側にpaddingを1em分指定して余白をあけています。
今回1emが16pxなので、paddingも16pxです。
デバッグ動画の緑色になった部分のうち16px分paddingされている状態を確認していただくと分かりやすいです。
paddingについてはこちらの記事も参考にしてみてください。
余白を指定したい！CSSのpaddingの使い方 | TechAcademyマガジン
5行目のp.indentback{では、htmlの<p class=”indentback”>で囲まれたブロックに対して、cssを適用しています。
具体的には、text-indent: -1em;で2行目以降をインデントしています。
padding-left: 2em;では、左側にpaddingを2em分指定して余白をあけています。
今回1emが16pxなので、paddingは2em分の32pxです。
デバッグ動画の緑色になった部分のうち32px分paddingされている状態を確認していただくと分かりやすいです。
実行結果
See the Pen
indent2 by マインクラフトゲームアプリプログラミング学校 (@programjp)
on CodePen.
デバッグ動画
以上、CSSでインデントする方法について解説しました。
値をマイナスにした場合の例も見てみたよ。
最初はインデントされず、逆に2行目以降がインデントされる形になるわけですね。
どれぐらいインデントするかというのはemなどの単位以外に、％で指定することもできるんだ。
場合によって使い分けてみよう。
なるほど、活用してみます。
ありがとうございました！
この記事を監修してくれた方
| 中本賢吾（なかもとけんご）
アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
