ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。
今年、HTML5及びCSS3が正式に勧告されるなんて言われていますが、いつ頃なんでしょうかね?
いずれにしてもそろそろ当ブログもCSS3を盛り込んだコーディングに変えていこうということで、まずは、角丸部分をCSS3で書いてみることにしました。
右のメニューの部分です。見た目は変わっていませんが、CSS3になってます。
(古いブラウザだと角丸じゃなくてソリッドな直角になってると思います。 )
ちなみに上のヘッダー部分はオール画像。
手順ですが、まずは「Google Chrome」でブログトップのHTMLをダウンロードしちゃいます。
「Google Chrome」を使うとリンクされている画像とかCSSとかJavaScriptとかしっかり維持された状態でダウンロードできるからです。
ダウンロードが済んだらHTMLを、Dreamweaverをつかって開き、角丸部分を探り、見つかったら「background-image」を削除します。
ここで、CSS2での角丸囲みの作り方の解説を簡単にしておきます。
DIVを3分割してそれぞれ上用の画像、下用の画像、ボディ用の画像(background-colorでも可)を用意してバックグランドに敷くというかたちにすればOK。
図で表すとこんな感じです。
これがCSS3では一つのDIVでよくなったのです。
「background-image」を削除すると、角が直角になってしまいますので、そのDIV自体、もしくはそれを囲むDIV(この場合は子DIVの「background-color」を消しておく)に対して角丸の指定をしてあげます。
これがCSS3で使えるようになる「border-radius」プロパティです。
「border-radius」プロパティは以下のように書いて使います。
border-radius: 10px 10px 10px 10px;
それぞれ「左上、右上、右下、左下」のRの半径を指定します。
(4辺が同じRであれば「boader-radius:10px」だけでも構いません)
なお、左右(X軸)と上下(Y軸)とをわけて指定することもでき、その場合は以下のように書きます。
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
左から「左上X、右上X、右下X、左下X / 左上Y、右上Y、右下Y、左下Y」となります。
自分のブログデザインの場合は、ベースにしているテンプレートのナビゲーション部分が上下二つのDIVに分かれているので、background-imageを消したDiVに対してそれぞれ、上の部分のみ角丸、下の部分のみ角丸とわけて書いています。
記述の仕方は以下のとおりとなります。
div#sub {
/* ここ中略 */
border-radius:10px 10px 0px 0px;
}
div#extra {
/* ここ中略 */
border-radius:0px 0px 10px 10px;
}
subとかextraとかはDIVタグに書かれていたIDです。
任意ですがそのままにしておきました。
いやぁ。それにしても便利になりますね。
以前は、DIVを3分割していたところ、一つのDIV(ブロックレベル要素)があれば4辺の角丸が指定できてしまうんですから。
アドセンス広告メイン
関連記事
-
-
富の分配の究極形、パトロンを得るなら「CAMPFIRE(キャンプファイヤー)」
1年以上前の記事です。内容が古い可能性があります。こんなサイトがあったとは! 眼 …
-
-
Webブラウザによる「標準モード」と「互換モード」の違い
1年以上前の記事です。内容が古い可能性があります。最近のブラウザには「標準モード …
-
-
WordPressのRSSをカスタマイズ。フィードでの各投稿の表示は「抜粋」に変えておこう
1年以上前の記事です。内容が古い可能性があります。最近は、RSSリーダーなんて使 …
-
-
今、時代は猫。なのか?
1年以上前の記事です。内容が古い可能性があります。最近、巷で猫々騒がしい。
-
-
リンクファーム(検索ディレクトリ)の威力
1年以上前の記事です。内容が古い可能性があります。以前、ここでリンクファームらし …
-
-
ワードプレス(WordPress)でコンテンツをデザインする方法 #wp
1年以上前の記事です。内容が古い可能性があります。トップページができたら引き続き …
-
-
Dreamweaver(ドリームウィーバー)で見かける緑の波線の正体とは?
1年以上前の記事です。内容が古い可能性があります。「Dreamweaver」のソ …
-
-
FireworksのHTML書き出し方法
1年以上前の記事です。内容が古い可能性があります。今となっては昔の話ですが、Fi …
-
-
favicon(ファビコン)って一つじゃなかったのね?デバイスによって色々変えられたらしい
1年以上前の記事です。内容が古い可能性があります。個人的にはあまり設定したこと無 …
-
-
GIGAZINE(ギガジン)がトラックバックを封印
1年以上前の記事です。内容が古い可能性があります。GIGAZINE(ギガジン)さ …