パソコン・Windowsの便利な使い方やテクニック|パソコントラブル出張修理

1行に2つのテキストをそれぞれ左右に表示する方法

TOP便利な使い方ホームページ作成 > 1行に2つのテキスト左右に表示

1行に2つのテキストをそれぞれ左右に寄せて表示する方法

パソコン出張修理でのサポートでは、ホームページの作成に関連した内容も取り扱っております。 例えば1行に1つのセルがあるテーブルがあるとします。 この1つのセル内に2つのテキストをそれぞれ左右に寄せて表示したいという例を解説します。

通常は1つのセルの文字の配置には<th>や<td>に文字配置の text-align などのスタイルシートを適用しますが、 その場合には1つのセル全体に適用されてしまいますので2つのテキストを左右に配置する事はできません。 しかし、以下のテーブルの2行目以降ように1つのセルに2つのテキストを左右に寄せて配置する方法があります。

パソコンの設置マニュアル
パソコン設置にあたって (03ページ)
同梱されているもの (10ページ)
本体の設置 (11ページ)
接続方法 (15ページ)

この配置を実現するには、1つのセル内に2つの<span>などのインライン要素を使ってテキストを配置し、 それぞれのインライン要素を左右に配置する方法をとる事で2つのテキストを左右に寄せて配置する事が可能です。 この時に左右への配置を float: left;及び float: right; で指定するのがポイントです。 以下にソースの一部を記載します。

〜省略〜
<tr><td>
  <span style="float: left;">パソコン設置にあたって</span>
  <span style="float: right;">(03ページ)</span>
</td></tr>
〜省略〜

(2013年4月22日)

パソコントラブルの出張修理では、パソコンの故障や修理以外でもこのようなホームページなどの修正や作成も行っておりますのでお気軽にお問い合わせ下さい。
パソコントラブルの出張修理を依頼する

PC・インターネット・Windowsの便利な使い方やテクニックTOP


パソコントラブル出張修理 お問い合わせフォーム パソコントラブル出張修理の料金表 業務ソフト開発 アプリケーションソフト開発 ?