中央配置だけど、改行したら左揃えにする方法。

文章全体の構成は中央配置にしたいけど、折り返して途切れた部分が短いと見た目が変になってしまう気がして、短い文章は中央に配置して、長い文章は改行した時に左揃えになる方法です。

次の記事で、長い方の文字列に合わせて中央配置・左揃えにしています。

幅を決める方法は色々あったのですが、幅が変わっても大丈夫にする方法がなかなか見つかりませんでした。

イメージは↓みたいな感じ。左：広い。右：狭い。

こちらのサイトを参考に作ってみたのですが、ドリームウィーバーではちゃんと表示されるのに、FirefoxやChromeでは表示できなかったです。何がダメなんだろう…？

そこで、文章ごとに幅を合わせて左配置になるように<div>で囲んでみました。

.sample{
 display:inline-block;
 text-align:left;
 }

display:inline-block;で<div>で囲んだ部分を文字の幅に合わせることができるようです。

text-align:left;で左揃えにします。

html

<div align="center">
 <div class="sample">1つ目の文章</div>
 <div class="sample">2つ目の文章</div>
 </div>

これはドリームウィーバーでは中央配置になっていなかったのですが、FirefoxやChromeでは思った通りに表示できていました。

完成したホームページがこちら→めもらば

アプリの一言紹介のところが今回作った部分です。

ふわふわぷかぷか