スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テキストを一定の幅で中央に見やすく表示する方法

 ブログの投稿で、テンプレートによれば、文字がだらだらと幅広く表示して読みにくい場合があります。そんなときに表示する画像とバランスをとった横幅で表示できれば、見やすくなります。そんなときに役に立つのが DIV タグの使用です。文字枠が左端によってしまうのが嫌いな場合は、その DIV タグをセンタータグで(<center><div style="width:500px;margin:15px;text-align:left;">ここに内容を記述</div><center>)というふうに囲んで中央に配置することが出来ます。

 私はセンタータグを使わずに、見かけの記述はすべてスタイルシート(CSS)で記述したいのですが、インターネット・エクスプローラは、margin-left : auto; margin-right : auto; というスタイルシートによる中央配置は動作しないことがわかっておりますので、仕方なくここではセンター( center )タグを使用しています。
 このDIVタグをつかう方法ではスタイルシートで領域の背景色や、背景画像、枠線、マージン、パディング、文字の設定など色々な設定を使えば、はがきのような枠などもできます。

 この投稿では、500×500ピクセルの猫のPNG画像を、配置属性で background-position : bottom; 繰り返し background-repeat : no-repeat; padding : 20px;と設定しました。画像の横幅と、DIV領域の大きさを合わせるために、paddingの左右の20ピクセルの分を減らして、DIV領域の横幅は500ピクセルから差し引いて460ピクセルで設定しました。


<center><div style="border: solid 1px; width:460px; height:600px; padding : 20px; text-align:left;background-image : url ( http://blogimg.goo.ne.jp/user_image/39/ac/caec1e5f9ad6127f8b96fcc8bbfc43f2.png ); background-position:bottom;background-repeat:no-repeat; color : black;"> ブログの投稿で、テンプレートによれば、文字がだらだらと幅広く表示して読みにくい場合があります。そんなときに表示する画像とバランスをとった横幅で表示できれば、見やすくなります。そんなときに役に立つのが DIV タグの使用です。文字枠が左端によってしまうのが嫌いな場合は、その DIV タグをセンタータグで(<center><div style="width:500px;margin:15px;text-align:left;">ここに内容を記述</div></center>)というふうに囲んで中央に配置することが出来ます。

 私はセンタータグを使わずに、見かけの記述はすべてスタイルシート(CSS)で記述したいのですが、インターネット・エクスプローラは、margin-left : auto; margin-right : auto; というスタイルシートによる中央配置は動作しないことがわかっておりますので、仕方なくここではセンター( center )タグを使用しています。
 このDIVタグをつかう方法ではスタイルシートで領域の背景色や、背景画像、枠線、マージン、パディング、文字の設定など色々な設定を使えば、はがきのような枠などもできます。

 この投稿では、500×500ピクセルの猫のPNG画像を、配置属性で background-position : bottom; 繰り返し background-repeat : no-repeat; padding : 20px; paddingの分を減らして、枠の大きさ460px; で設定しました。 
</div></center>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。