<img src="/images/tmb/css-textAlignLast-left.jpg" alt="「text-align-last:left; は不要」のアイキャッチ画像">
<p>日本の印刷物では（<a href="https://blog.antenna.co.jp/CSSPage2/archives/9">日本語組版らしい？</a>）両端揃えが<a href="https://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E6%8F%83%E3%81%88">一般的らしい</a>のですが、Webなどのパソコン上でのテキストでは欧文が元になっているからか、左揃えが多いです。</p>
<p><strong>Webで中央揃えするのか問題</strong> は難しい問題らしいですが、このブログではなんとなく<code>text-align: justify;</code>を指定していました。</p>
<p>しかし、たまたま Chromeで（普段はSafariメイン）自分の記事を確認すると最後の行がおかしい。</p>
<img src="/images/css-textAlignLast-left-1.jpg" alt="最後の行まで両端揃えしちゃってる">
<h2 id="text-align-last-left">text-align-last: left;</h2>
<p><code>text-align-last: left;</code>を加えることで最後の行だけを左揃えにすることができます。</p>
<pre class="language-css"><code class="language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> justify<span class="token punctuation">;</span>
<span class="token property">text-align-last</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
</code></pre>
<p>しかし...</p>
<hr>
<h3 id="なぜか-text-align-last-justify-してた">なぜか text-align-last: justify; してた...</h3>
<p>CSSを加えようとしたところ、<code>text-align-last: justify;</code>が指定してある...</p>
<img src="/images/css-textAlignLast-left-2.jpg" alt="いつ指定したんだろ...全然覚えてない">
<h4 id="text-align-last-のブラウザ対応状況">text-align-last のブラウザ対応状況</h4>
<p><code>justify</code>を<code>left</code>に変えれば問題は解決するのですが、なんでSafariだと気づかなかったのかというと、Safariが<code>text-align-last</code>に対応していなかったから。</p>
<p>{{<caniuse id="mdn-css__properties__text-align-last">}}</p>
<h3 id="デフォルトで最後の行は中央揃えにならない">デフォルトで最後の行は中央揃えにならない</h3>
<p>でも、逆に<code>text-align: justify;</code>を指定していても、デフォルトで最後の行は無効化されるということ。</p>
<p>つまり、<code>text-align-last: left;</code>を指定する必要はないんですね。</p>