CSS3を使ってレイアウト変更

かなり前に書きかけていたのですが、放置でした…。

デザイン少々いじくってみました。
記事を囲っているエリア、丸くなって、影ができていると思います。
どうでしょう?
CSS3の
border-radius(BOXの角を丸める)
box-shadow(BOXに影をつくる)
を利用しているのですが、CSS3は、すべてのブラウザで使えません。
そこで、いろいろと細工を施しました。
まず、そのソースから

.post{
	border:0;
	padding:15px 20px;
	background-color: #f5deb3;
	box-shadow: 10px 5px 10px #E1E1E1;
	-moz-box-shadow: 10px 5px 10px #E1E1E1;
	-webkit-box-shadow: 10px 5px 10px #E1E1E1;
	-o-box-shadow: 10px 5px 10px #E1E1E1;
	-ms-box-shadow: 10px 5px 10px #E1E1E1;
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
/* 2011年4月6日修正(ショートハンド) */
	/* -webkit-border-radius: 15px 15px 15px 15px;  */
	-webkit-border-radius: 15px;
/* あえてショートハンドで書くのなら  */
/* 	-webkit-border-top-left-radius:15px;   */
/* 	-webkit-border-top-right-radius:15px;   */
/* 	-webkit-border-bottom-left-radius:15px;   */
/* 	-webkit-border-bottom-right-radius:15px;   */
	-o-border-radius: 15px 15px 15px 15px;
	-ms-border-radius: 15px 15px 15px 15px;
	behavior: url(http://matai.main.jp/htc/ie-css3.htc);
	position:relative;
	z-index:1;
}

「box-shadow」は、影をつけます。
続く数値は、横方向のずれ、下方向のずれ、ぼかし具合、影の色を指定しています。
「border-radius」は、BOXを丸めます。
続く数値は、上、右、下、左すみの丸めるサイズを指定しています。
それに続く、指定は、「ベンダープレフィックス」といい、各ブラウザに対応するように
つけています。
-moz-  …… Firefox向け
-webkit- …… Google Chrome、Safari向け
-o-    …… Opera向け
-ms-   …… Internet Explorer向け
詳しくは、
ベンダープレフィックス-CSSの基本
HTMLクイックリファレンスさん
のページです。

ただし、現在のIE(7,8)は、対応しておりません。
IEには、いつも困らせられます。…が、IEユーザーが大多数を占めるなか、無視するわけにはいきません。
そこで、代理手段が
「ie-css3.htc」
です。
これを使うには、使用しているWEBサーバが、「behavior」を使えなくてはいけません。
私が使用しているロリポップでは、初期設定では、拡張子「.htc」が認識されないため使えませんでした。
「.htaccess」に下記を追記します。

AddType text/x-component .htc

あとは、「ie-css3.htc」をダウンロードして、
behavior: url(【パス】/ie-css3.htc);
と一行追加するだけ。
詳しくは、
コリスさんのページで。

ただ、バグがあります。
ダリさんのページを参考にしました。
修正できるものはして、あきらめるところはあきらめ(IEで違う表示)としました。

2011年4月6日追記
raigaさんのコメントにありますが、safariやchromeでは、border-radiusの
ショートハンドが使えませんでした。(現在のヴァージョンでは)

調べたら、詳しく書かれている記事がありました。
乱雑モックアップさんの記事

面倒なので
記事のエリア(.post)は、4すみすべて同じアールなので、ショートハンドを
使わないようにしました。

サイドバーのタイトル(右上、左上を丸)

/* -webkit-border-radius: 10px 10px 0px 0px; */
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

サイドバーの内容エリア(右下、左下を丸)

/* -webkit-border-radius: 0px 0px 10px 10px;  */
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

このように変更しました。

raigaさんありがとうごさいました。勉強になりました。

このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録
ボタンの色が白ならば、クリックし+1 を付けてください。
カテゴリー: CSS   パーマリンク

CSS3を使ってレイアウト変更 への2件のコメント

  1. raiga より:

    はじめまして。

    ちょっと、コード拝見して思ったのですが

    確かoperaはベンダープレフィックスを付けても意味がなかったと思います。
    (間違いではないわけですけど)

    当該記事からのリンク先のコリスさんのサンプルコードにもコメントはいってます。

    あと、未確認ですけどsafariだとショートハンドが反映しないと聞いたような記憶があります。

    • matai より:

      raigaさん

      コメント、ご指摘ありがとうございます。

      まず、operaのベンダープレフィックスについて
      コリスさんのを参考に作っているので、ベンダープレフィックスがなくても
      丸くなる(影がつく)のは、operaで確認しました。
      ただ、その後、ベンダープレフィックスの意味を調べて
      HTMLクイックリファレンスさんにたどりつき、その意味を知って
      足しました。
      今後のoperaでどうなっていくか分からないのと、
      とりあえず、今のところは余計な記述があっても悪影響がないので付けておきました。
      (IEも同様)

      safariだとショートハンドが反映しない件
      今、safariの入っているPCで確認してきました。
      確かにシャドーはついているが丸くなっていない。
      すいません。確認不足でした。
      (仕事でやったページは、ショートハンド使っていなかった。
      仕事でやったページは、一通りのブラウザで参照してみたのが、自分のはいい加減だった。)
      記事修正しておきます。
      ありがとうございました。

      また、何かあったらご教授ください。

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" target="" rel="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <br> <cite> <code> <del datetime=""> <em> <i> <li> <ol> <p class="" align="" dir="" lang="" style=""> <span class="" dir="" align="" lang="" style="" title=""> <q cite=""> <strike> <strong> <sub> <sup> <u> <ul> <hr align="" class="" noshade="" size="" width=""> <img alt="" align="" border="" class="" height="" hspace="" longdesc="" vspace="" src="" style="" width="" localsrc="">

コメント大歓迎。ぜひよろしくお願いします。
Wordpressプラグイン「nofollow free」を利用して、ウェブサイトで入力されたURL、コメント内リンクのすべてに対してnofollow属性を取り外しています。
関連記事⇒コメントのリンクタグの「rel=nofollow」について
プラグインの取得は⇒nofollow free
このカスタマイズ文章の作り方の記事⇒nofollow freeカスタマイズ
↓スパムコメント対策
Comments on this blog, 'Akismet' is protected by.