ログイン
問題10

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

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

アイコン画像

問題10: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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる