こんにちは。

3連休あっという間に終わってしまいました(＞＜)

さて、今日は題名が長いのですがさっそく書いていきます！

テキストで全体は右寄せして中身を左寄せにする方法

言葉で表すとどういう状況かわかりづらいので画像のせます！

分かりやすいようにインナーの両端にボーダーを付けていて、両端に余白が若干ついています。

インナーの範囲内でテキストが右寄りになっていると解釈してください＾＾

よくある方法としては、幅を決めてmargin:0 auto;がありますよね。

でも、今回は文字の可変に対応するためにその方法はとりません！

コード
1. HTML編
2. CSS編
まとめ

コード

HTML編

    <div id="Contents">
      <div class="inner">
        <div class="capBlock">
          <div class="blockInner">
            <p class="tit">＊タイトルタイトルタイトルタイトルタイトル</p>
            <ul class="itemList">
              <li>・テキストテキスト</li>
              <li>・テキストテキスト</li>
              <li>・テキストテキストテキストテキスト</li>
              <li>・テキストテキストテキスト</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- / .inner -->
    </div>
    <!-- / #Contents -->

テキストの中に＊や・が入っていますが今回はそのままでいきます(＞＜)

CSS編

.capBlock {
  text-align: right;
}

.capBlock .blockInner {
  display: inline-block;
  width: auto;
  text-align: left;
}

解説していきます。

今回のポイントは【blockInner】にdisplay: inline-block;を指定していることです！

そしてtext-alignを理解することです。

text-alignは扱うには少し複雑で、指定する要素と位置が変わる要素が違います。

ブロック要素に指定して、中にあるインライン要素の水平方向の位置を決めます。

【blockInner】にdisplay: inline-block;を指定しない場合、【capBlock】にtext-align: right;を指定しても効きません。

<div>で囲っている【blockInner】はブロック要素だからですね。

そこがまずポイントです！

以下は【capBlock】にtext-align: right;を指定したときの状態です。（上記で書いたことを踏まえた上で）

全体は右寄りになっていますが、中身まで右寄りになってしまっています。

そこで【blockInner】にtext-align: left;を指定します！

すると、このように全体は右寄り、中身は左寄りの状態ができます＾＾

※リストはインデントしています

幅は一番長いテキストに合わせられていますね。

【blockInner】に指定しているwidth:auto;ですが、元々初期値はautoなので必須ではないです＾＾

まとめ

今回のポイントはこの2点です。

text-alignを理解する
【blockInner】にdisplay: inline-block;を指定

参考になれば幸いです＾＾

では今日はここまで〜〜