FC2ブログ

スポンサーサイト

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

  • コメント : -
  • | このエントリーを含むはてなブックマーク
  • トラックバック : -
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/59-e31ff2dd

-件のトラックバック

-件のコメント

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

枠線をいろいろカスタマイズしてみよう!

これは別にブログに特化したものではないのですが、以前はページ全体のレイアウトやテキストや見出しのまわりに枠線を入れる場合、HTMLではテーブルタグを利用することが多くありました。(今でもテーブルタグを多く使っているサイトをよくみかけますが)

しか~し、スタイルシート(CSS)でDIV要素を使うことで簡単に色々な枠線を引けるようにもなってますし、何よりテーブルタグを使わない方がページ全体のレイアウトもしやすく、且ソースが簡素化しますから、ページが表示されるまでの時間が短くなります。(表示速度が速い!!

また、中には枠線を表示させるのに【SAPN】タグを利用しているケースもみかけますが、IEではSPANタグにborderは対応しておりません。さらに付け加えると、NNでは【table,tr,tdなど】のタグはborderに対応しておりませんので注意しましょう!!

では、どのように設定すればいいのか?ということなんですが、DIV要素で枠線を表示させる為にはIEではborder-style、NNではborder-widthを指定するんです。

ですので、両方のブラウザで表示させようと思うのであれば、少し手間ですけど、border-styleborder-widthの両方を指定するようにしましょう!!まぁ~NNユーザーを無視するのであれば、両方指定しなくても構いませんけどね。(笑)

それでは少し具体例を。。。

div {border : 3px double #CCC}と指定すると、

 二重線になります。

div {border : 3px solid #CCC}と指定すると、

 直線になります。

div {border : 3px groove #CCC}と指定すると、

 溝線になります。

div {border : 3px ridge : #CCC}と指定すると、

 綾線になります。

div {border : 3px inset #CCC}と指定すると、

 くぼみになります。

div {border : 3px outset #CCC}と指定すると、

 浮き出しになります。

div {border 3px dotted #CCC}と指定すると、

 点線になります。

div {border : 3px dashed #CCC}と指定すると、

 破線になります。

いかがですか?枠線の種類って結構ありますでしょ!

一応、それぞれに変更してある部分は、border-style の部分だけになりますんで、アナタのお好みに合わせて指定してみてくださいませ。

また、今回は上下左右を全て同じように指定しておりますが、それぞれを個別に指定することもできますんで、次回の記事に紹介いたしますね。

スポンサーサイト

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/59-e31ff2dd

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries

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