字数の違う右寄せ2行の先頭を揃える

次の2行ですが、普通に右寄せにするとこうなります。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

これはスタイルシートならtext-alignで、
スタイルシートがわからなくても、ブログの編集画面で右寄せのマークを押せば簡単に出来ます。

でも、レイアウトによっては下のサンプル（これは「手芸部」の最新記事です）の赤字部分みたいに
右寄せなんだけど行の始まりを同じ位置にしたい時があります。そういった時の解決方法です。

下のサンプルでは、青文字が普通の右寄せ（text-align:right）、
赤文字が、これから説明するfloat:rightを使っています。

手編みするあったかい冬時間。大切なあの人へ。。あったかい冬をおくろう。
Isn’t warm winter presented to the important man?

ポイントは「作り目」と「編み方」と「伏せ止め」だけです！
これだけで、誰でも、簡単にマフラーが編めちゃいます！

末尾で合わせる普通の右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

この方法は、以前このブログの記事「枠の中の背景に画像を使いたい！ 」で説明していますが、
もう一度書きます。

文章の配置にはスタイルシートのtext-alignを使います。

文字を右に寄せたいときはtext-align:right;と指定します。

文字を左に寄せたいときはtext-align:left;と指定しますが、普通は書かなくて構いません。
通常は指定しなければ自動でtext-align:left;とみなされるからです。

文字を真ん中に合わせたいときはtext-align:center;と指定します。
下がtext-align:center;のサンプルです。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

スタイルシートの書き方は以前の記事「で、スタイルシートはどこに書くのか？」に書いています。
今回はインラインでの書き方だけ説明します。

普段はブログの編集画面に文章を書くだけなので、知らない人もいるかもしれません。
説明すると、HTMLでは<p>から</p>の間に文章を書きます。

自分はそんなことした覚えはない。という方も自分のブログのソースを見るとそうなっています。
それは文字を書いて公開すると、ブログが勝手にHTMLに変換してくれるからです。

この最初の<p>の中にスタイルシートを書き込む事ができます。これがインラインでの記述方法です。具体的には下のように書きます。

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

<pのpの後に半角スペースを1文字入れてからstyle=”text-align:right;”と書きます。その後に>と書いてから文章。文章が終わったら、</p>と書きます。<p>から</p>までが一つの文章です。

<pの後は半角スペースです。全角スペースはエラーです。同じように<から>の間のアルファベットや記号は半角で書きます。ちゃんと書いたのに出来ないというときは、半角で書いているかを確認します。

文中に<br />とあるのは改行の印です。

HTMLでは<br />が出てこない限り改行とみなされません。文章を書いているときに何回Enterキーを押して改行しても、それはHTML上では改行とみなされていません。<p>や</p>と同じようにブログが自動で、Enterキーを押す度に<br />を挿入しているから改行して表示されるだけです。

確認：末尾で合わせる普通の右寄せの書き方

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

行の始まりを左に合わせた右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

全体をまとめて右や左に寄せるに時はfloatを使います。

右寄せにするにはfloat:right;と書きます。
左寄せにしたければfloat:left;と書きますが通常は必要ありません。

またtext-alignの時のcenterのように真ん中合わせはできません。右寄せか、左寄せだけです。

行の始まりを左に合わせた右寄せの具体的なソースは下のようになります。

text-alignは指定しなければ、text-align:left;と同じと先ほど書きました。
つまり上のコードは左合わせの、改行した2行の文章を右側に配置ということです。

これで右側に配置されますが、floatを使う場合は気をつけないといけないことがあります。

floatにはclearが必要

floatを使ったときにはかならずセットでclearを使う必要があります。

text-alignの時は、それが適用されるのはその<p>から</p>までの間に限られます。
だから下のように書くと、2つ目の文章は左寄せに戻っています。

これを実際に表示すると次のようになります。

ところが、floatの場合は終わりを決めないと、レイアウトがメチャクチャに崩れます。
参考までに次のソースを例にとります。

これを実際に表示するとこうなります。

ひとつ目の文章はちゃんと右寄せになっています。2つ目の文章はひとつ目の文章の左側の余ったスペースに表示されていないでしょうか？

意図的にそういう配置を狙うのならいいのですが、そうでない場合、これを避けるために、明示的にclearを指定しないといけません。

ソースを書き換えてみます。

今度は正しく表示されます。

このようにfloatを使うときは、clearを忘れると大変な事になりますので注意が必要です。

参考に、下にサンプル記事のソース全文を載せておきます。
ところであなたもマフラーを編みませんか？クリスマスには手編みのマフラーを！

「初心者向けマフラーキット」と「ふわふわカシミヤのマフラーキット」

<p>手編みするあったかい冬時間。大切なあの人へ。。あったかい冬をおくろう。
<br/>Isn't warm winter presented to the important man?</p>

<p style="text-align:right;">
ポイントは「作り目」と「編み方」と「伏せ止め」だけです！<br/>
これだけで、誰でも、簡単にマフラーが編めちゃいます！</p>

<div style="width:400px;margin:0 auto;padding-top:1em;">
<p style="float:left;width:200px;">
<a href="URL" target="_blank"><img src="URL" border="0"></a>
<br/><a href="URL" target="_blank">初心者向けマフラーキット</a></p>

<p style="float:left;width:200px;">
<a href="URL" target="_blank"><img src="URL" border="0"></a><br/>
<a href="URL" target="_blank">ふわふわカシミヤのマフラーキット</a></p>
</div>

<div style="clear:left;width:450px;margin:0 auto;padding-top:2em;">
<p>自分のために、夢中で編んだり。大切な人のために、大事に編んだり。</p>

<p style="float:right;">ひと目　ひと目　手を動かして何かを編んでいると、
<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

<p style="clear:right;padding-top:2em;">
何より手編みをしていると、寒い冬の季節でも、<br/>
なんだか気持ちがあったかくなってきます。</p>

<p style="float:right;">手編みには、冬の寒さが待ち遠しくなるような、
<br/>柔らかで優しいぬくもりがあります。</p>

<br style="clear:right;" />
</div>