忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
幅が決め打ちされた要素の中でインライン要素(テキスト)を入れた際の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;をかけてあげましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET