ログイン

問題10 2段目のインデントを1文字ずらそう

HTML_CSSの問題

HTML_CSS

インデント(字下げ)とは、文章の行頭に空白を挿入して、先頭の文字を右に押しやることです。 行頭の位置を変えることによって文章を読みやすくなります。覚えておきましょう。

2段目のインデントを1文字ずらそう

問題

幅が決め打ちされた要素の中でインライン要素(テキスト)を入れた際の2段目の文字を1文字分インデントさせましょう。

HTML/CSSファイルに以下記述してください。
見本のように、2段目は1文字インデントを空けましょう。

また半角英数字だけの場合は、要素からはみ出してしまっているので中に入れてインデントを空けてください。

自分の環境に書くコード

              <div class="text-wrap">
    <p>1,テキストテキストテキストテキストテキストテキストテキスト</p>
    <p>2,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
¥HTML¥
            
              .text-wrap {
    width: 300px;
    border: 1px solid;
    padding: 12px;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              <div class="text-wrap">
  <p>1,テキストテキストテキストテキストテキストテキストテキスト</p>
  <p>2,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
¥HTML¥
            
              .text-wrap {
    width: 300px;
    border: 1px solid;
    padding: 12px;
}
.text-wrap p {
    text-indent: -1em;
    padding-left: 1em;
    word-break: break-all;
}
.text-wrap > p:first-child {
    margin-bottom: 24px;
}
¥CSS¥
            
答えのアイコン

解説

2段目以降を文字下げする際は、text-indentを使用します。今回は、1文字下げると指示が出ていますので-1emを指定します。

text-indentのネガティブ指定(-のこと)で文字全体が左に下がったことによってデザイン崩れが発生しますので、それを補填する為にpaddingを使用してデザイン調整をしております。

また、半角英数字は要素を突き抜けてしまう為(仕様の問題により)要素の中にテキストを納めたい際は、テキスト要素にword-break: break-all;をかけてあげましょう。
ログインして解答を見る
今回の問題では、新出プロパティが2つ登場しました。
text-indentプロパティは字下げをするためのもので、word-breakプロパティは溢れるテキストに改行を挿入するものです。
字下げ(インデント)する方法は他にもmarginやpaddingを使用したり全角スペースを使用したりすれば可能ですが、推奨度は低いです。
基本的にはtext-indentを使用して字下げを行ないましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!