スポンサーサイト

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

CSSでブログで罫線 その2

<
 ブログで文章の罫線を実現するために、以前CSSのborder-bottom属性でdot罫線を描きましたが、今回は、薄黄と白の2色の小さな画像をレイヤー(DIVタグで囲まれたところ)の背景に使って罫線を実現することを試みてみました。
 この方法ですと、画像をいろいろと変えることによって、CSSでは実現できない罫線を表現できるし、CSSスタイルシートだけの罫線のように、一行ごとにDIVタグをつける必要もないので、簡単に文章を更新できます。
 この文章の罫線は、以下のようなスタイルをDIVタグに適用することによって実現しています。
style="text-align:left; width:400px; height:750px; padding:0px; background-image:url(http://blogimg.goo.ne.jp/user_image/65/a6
/6831ea902fe0d9bf4cecc92cd7e1fba0.jpg); line-height:25px; font-size: 14px; "

 <div style="ここに上記のスタイルを記述">ここに本文を記述します</div>

 背景に使う画像は、高さが行の高さ(line-height)の倍のピクセル数です。文字の大きさや、行の高さも、単位の誤差でずれないように、単位をすべてpx(ピクセル)で統一して指定しています。
 上の例の場合は文字が14ピクセル、行の高さが25ピクセル、背景画像の高さが50ピクセル、背景画像の幅は必要最小限でいいと思います。
 
↑クリックすると罫線が変更されます

投稿全体のソースです


<center style="font-size:0px; "><<div style="z-index:0; text-align:left; width:400px; height:700px; padding:0px; background-image:url(http://blogimg.goo.ne.jp/user_image/65/a6/6831ea902fe0d9bf4cecc92cd7e1fba0.jpg); line-height:25px; font-size: 14px; "onclick="if(this.style.zIndex==0){this.style.zIndex=1; this.style.backgroundImage='url(http://blogimg.goo.ne.jp/user_image/38/1e/4e0a64a9ed994774ed9ab23a0f62fb3b.png)'; }else{this.style.zIndex=0; this.style.backgroundImage='url(http://blogimg.goo.ne.jp/user_image/65/a6/6831ea902fe0d9bf4cecc92cd7e1fba0.jpg)'; }"> ブログで文章の罫線を実現するために、以前CSSのborder-bottom属性でdot罫線を描きましたが、今回は、薄黄と白の2色の小さな画像をレイヤー(DIVタグで囲まれたところ)の背景に使って罫線を実現することを試みてみました。
 この方法ですと、画像をいろいろと変えることによって、CSSでは実現できない罫線を表現できるし、CSSスタイルシートだけの罫線のように、一行ごとにDIVタグをつける必要もないので、簡単に文章を更新できます。
 この文章の罫線は、以下のようなスタイルをDIVタグに適用することによって実現しています。
style="text-align:left; width:400px; height:400px; padding:0px; background-image:url(http://blogimg.goo.ne.jp/user_image/65/a6
/6831ea902fe0d9bf4cecc92cd7e1fba0.jpg); line-height:25px; font-size: 14px; "

 <div style="ここに上記のスタイルを記述">ここに本文を記述します</div>

 背景に使う画像は、高さが行の高さ(line-height)の倍のピクセル数です。文字の大きさや、行の高さも、単位の誤差でずれないように、単位をすべてpx(ピクセル)で統一して指定しています。
 上の例の場合は文字が14ピクセル、行の高さが25ピクセル、背景画像の高さが50ピクセル、背景画像の幅は必要最小限でいいと思います。
 </div><div style="font-size:12px; ">↑クリックすると罫線が変更されます</div></center>

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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