【ホームページ作成】1行内に左寄せと右寄せを同時に書きたい

左寄せと右寄せを同時に使いたい

同じ行内に「左寄せの文字列」と「右寄せの文字列」を混在させたいと思ったことはありませんか？ 「左寄せ」や「右寄せ」は、スタイルシートのtext-alignプロパティで簡単に実現できますね。 でも、できるのは1行単位で「左寄せ」するか「右寄せ」するかだけです。同一行内に「左寄せ部分」と「右寄せ部分」の両方を作ることはできません。

そんなときは、floatプロパティを活用しましょう。 floatプロパティを1つ書き加えるだけで、簡単に「左寄せ」と「右寄せ」を同一行内に混在させられます。

左寄せと右寄せを同一行内に配置した例

例えば、次のようなデザインを考えてみましょう。
タイトルは左寄せ、日付は右寄せになっていて、どちらも同じ行内にあります。

※ウインドウの横幅を様々に変えて確認してみると、ちゃんと日付が「右寄せ」されていることがよく分かります。

左寄せ・右寄せの方法

スタイルシートで、「左寄せ」や「右寄せ」を行うには、text-alignプロパティを使います。 text-alignプロパティの値に「left」を指定すると左寄せ、「right」を指定すると右寄せ、「center」を指定するとセンタリングになります。
まずは、このtext-alignプロパティだけを使って、先ほどのデザインを作ってみましょう。

HTMLを次のように記述しておきます。（スタイルを適用できるように、各div要素にクラス名を付加しています。）
※長くなるのでタイトル部分のみのソースを掲載

このHTMLに対して、タイトル部分は左寄せ、日付部分は右寄せのスタイルを記述してみます。

1行目は左寄せ、2行目は右寄せ、3行目以降はバーを作るスタイル（背景・文字色、太字、余白の指定）です。
※何も指定しなければ標準で左寄せになりますから、1行目のスタイル「text-align: left;」は記述しなくても同じです。

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

左寄せと右寄せは正しくできていますが、2行に分かれていますね。 これを1行に合体させられれば、望みのデザイン（左寄せと右寄せを同一行内に混在）ができあがります。

左寄せと右寄せを同一行内に混在させる方法

左寄せしている行と右寄せしている行の2つを1行に合体させるには、先ほどのスタイルシートに floatプロパティを書き加えます。

見やすくするために改行を加えたのでソースが長くなったように感じられますが、書き加えたのは「float: left;」というスタイルだけです。

このスタイルシートを使って、先ほどと同じHTMLを表示させると、次のようになります。

さきほど2行に分かれていた行が、1行に合体しましたね。

floatプロパティの効果

floatプロパティには、値「left」と「right」を指定することができます。先ほどの例では「left」を指定しました。
floatプロパティに値「left」を指定すると、「それ自身を左端に寄せ、続く内容を右側に回り込ませる」というレイアウトを実現できます。

つまり、タイトル部分「◆ホームページ作成入門」が左端に寄り、右側にできた空間に、次の行の内容（日付「2006年2月9日」）が回り込むので、元々2行だったものが1行に見えるようになるわけです。

おわりに

今回は、floatプロパティを活用して、左寄せと右寄せを同一行内に混在させる方法をご紹介致しました。 いろいろ活用場面が考えられると思いますので、ぜひご活用下さい。

関連記事

• キャプション付き画像を左右の端に寄せたい
• 書き方や環境によってバラバラ…　表のセンタリング方法の謎
• スタイルシートだけで段組を作る
• スタイルシートで作る段組のメリット
• 段落の先頭1文字を別デザインに