HTML_CSS
Googleでログイン
問題10：2段目のインデントを1文字ずらそう
幅が決め打ちされた要素の中でインライン要素(テキスト)を入れた際の2段目の文字を1文字分インデントさせましょう。
HTML/CSSファイルに以下記述してください。
見本のように、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プロパティは字下げをするためのもので、word-breakプロパティは溢れるテキストに改行を挿入するものです。
字下げ(インデント)する方法は他にもmarginやpaddingを使用したり全角スペースを使用したりすれば可能ですが、推奨度は低いです。
基本的にはtext-indentを使用して字下げを行ないましょう。
text-indentプロパティは字下げをするためのもので、word-breakプロパティは溢れるテキストに改行を挿入するものです。
字下げ(インデント)する方法は他にもmarginやpaddingを使用したり全角スペースを使用したりすれば可能ですが、推奨度は低いです。
基本的にはtext-indentを使用して字下げを行ないましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
text-indentのネガティブ指定(-のこと)で文字全体が左に下がったことによってデザイン崩れが発生しますので、それを補填する為にpaddingを使用してデザイン調整をしております。
また、半角英数字は要素を突き抜けてしまう為(仕様の問題により)要素の中にテキストを納めたい際は、テキスト要素にword-break: break-all;をかけてあげましょう。