箇条書きをするときに2行目の文字の先頭を1行目とそろえるカスタマイズ

SHARE

箇条書きをするときに2行目の文字の先頭を1行目とそろえるカスタマイズ

箇条書きしたときに1行目と2行目の先頭をそろえるカスタマイズです。スマホ表示のときにも見やすくなりますよ。

箇条書きを簡単にするカスタマイズを紹介

箇条書きは、文章にメリハリをつける意味でも大切です。

例文をつくってみると

風邪を引かないために気をつけること

・家に帰ってきたら、手を洗ってうがいをする
・お風呂上りは、湯冷めしないように早めに服をきる
・食事をしっかりとって十分な睡眠をとる

このような箇条書きのときに、文が一行で収まれば問題ありません。しかし、文が長くなってしまうと・・・

風邪を引いたら気をつけること

・できるだけ暖かい格好をして、安静にして寝る(加湿器などを使って部屋が乾燥しないように注意する。)
・食欲があればできるだけ栄養のあるものを食べる、特にビタミン類をしっかりとって水分も多めにとる

このように、折り返した2行目の先頭の文字が1行目の先頭に揃ってきます。文の先頭に「・」などをつけているとバランスが悪いですよね。

箇条書きの文字の先頭をあわせるには

このようなときに、2行目を上手に揃える方法ですが、以下のタグを使ってみてください。

基本はこの形です。

<ul>

<li></li>


<li></li>

</ul>

<li>と</li>の間に文をいれます。

<ul>

<li>できるだけ暖かい格好をして、安静にして寝る(加湿器などを使って部屋が乾燥しないように注意する。)</li>


<li>食欲があればできるだけ栄養のあるものを食べる、特にビタミン類をしっかりとって水分も多めにとる</li>

</ul>

するとこのようになります。折り返した2行目の先頭が下がっていて、1行目と揃っています。見やすいですよね。

  • できるだけ暖かい格好をして、安静にして寝る(加湿器などを使って部屋が乾燥しないように注意する。)
  • 食欲があればできるだけ栄養のあるものを食べる、特にビタミン類をしっかりとって水分も多めにとる

先頭の「・」は自動で入るので文を書くときは省いてください。

もっと箇条書きの数を増やしたいときは

<li></li>

を増やしてください。

※Add Quicktagに登録しておくと非常に便利です。

http://www.globalcontent-collabo.net/post-426/

PCで一行に収まっていてもスマホなどでは折り返していることもあるので、箇条書きのときはできるだけ使うのがお勧めです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です