っていうか、現在人が観覧中。いらっさいませー。

CSSで枠の角を丸くする方法は

html/CSS/etc | Comment : 10 | 2005.09.19.Mon @ 1:48 AM

2005091901.gifどんも、バイトのシフトチェンジが急に行われて、今夜はこれからバイトへGO!
昼間は店のゴタゴタで久しぶりに営業所から注意を受けたり、昨日の宴会でつまんなかったりしたから、今夜のバイトでも何かあるんじゃないかなぁってな予感がする。
不安っていうか、怒ったり怒られたりしても別にいいんだけどさ、物事ってのは繋がってるからねぇ。
不思議と「くらう *1 」日があんのかもなぁと、占いより自分の経験を信じたりする。

なもんで、バイト前までにサクッと日記でも書こうと思ったけど、
時間がないので更新中の事でも書いておく。

『楽な方法で枠の角を丸くしたい!』

昨日、テキスト選択の事でCSSをいじったんで、ついでに更新した事なんだけど、
ブログやNewSから引用してきた物を表示するとき、枠で囲んで強調をしている引用部分の角を丸くしてみた。
それもテーブル<table>や画像を使わずに、CSSだけで。

ちょっと前に「Nifty Corners」なんてのも話題になったけど、これじゃW3C的に駄目 *2 だっていうからスルーしていた「画像を使わずにCSSで角を丸くする方法」。
他の用事でカスタマイズのブログを回っているうちに、手軽に使える物を発見出来たのですぐ作業に取りかかった。

楽な方法で枠の角を丸くしたい! - [ホームページ作成]All About

CSSを1行書くだけ!
楽な方法で枠の角を丸くしたい!

おぉ!!一行だけというか、要素を少し追加するだけ!!これ便利だ!!

今回ご紹介する方法のメリット・デメリットは次の通りです。

メリット
* スタイルシートに1行加えるだけで済む
* 丸みの半径サイズの指定が自由自在

デメリット
* Mozilla系ブラウザ以外だと普通の四角い枠になる

別にただの枠だからんね、記事に力を入れるべきだから見えないブラウザーがあってもいい。なにより楽にかっこつけれればいいんだから。
FireFoxを使ってる人って多いと思うし、そちらを使っている人は綺麗に見えてると思う、丸角。

MacOS Xの標準ブラウザー・safariの表示はたしかに綺麗なんだけど、Mozilla系ブラウザ以外じゃ駄目だってことで、上記の方法だと丸角は見えない。ま、それはマカーとして「つまはじき」にされた感もあるけど、そう思いながらもためらわずに

対応してない少数が悪い

ってことで切り捨ててしまうあたりが、「純正マカーっぽくないな」と反省5秒なわけ。

おわりに

今回は、Mozilla独自拡張のプロパティを用いて、角の丸い枠を楽に作る方法をご紹介致しました。
一部のアクセス者にしか丸くなった枠を見せることはできませんが、枠を丸くすることがそれほど(デザイン上)重要でない場合は、この方法が楽で良いかも知れません。

>重要でない場合は、この方法が楽で良いかも知れません。

フンとにおっしゃる通り。
見えないブラウザがあったとしても、あたし的には結構満足いってるカスタマイズだった。

※CSS3には、枠の角を丸くするプロパティが用意されます。将来的には、どのブラウザでも枠の角をスタイルシートで丸くできるようになるでしょう。

どんどんデザインをいじれる要素が増えて、対応するブラウザが増えればいいと思う。
対応がされれば、丸角ももちろん、文字に影をつけれたり立体にしたりはCSSで指定して、個性的なデザインに気をよくなりどんどん更新に集中出来るんだけどなぁ。

以上。

【→もっといろいろ読む】




[ Facebook いいね!]と「Facebook 送る」
長らく「WEB拍手」を設置してきましたが、facebookの「いいね」を設置することにしました。
お褒めでも苦情でも、何でも受け付けているので今後もよろしくお願いします。
尚、「WEB拍手」の方も愛着があるので、
見栄えは悪いですがしばらくこのまま残しておこうと思っています。
[ WEB拍手 ]
WEB拍手 今回はどーでしたか?面白かったり、何か一言あったら押してみてくださいな。WEB拍手
いつも「拍手」ありがとうです。けど、「WEB拍手」には返事が書けません。あくまで「拍手」、あしからず。
記事に対してのコメントは右のフォームよりお願いします。トップページのメニューには掲示板も用意してます。
(*「WEB拍手」は稼動してます)

[1つ前の記事]
Lil Kim 「Naked Truth」
[1つ新しい記事]
雑記 9/21
以下、注釈説明。

My men MB 曰く「やられる」「やられた」の事。

インライン要素(<b>)を大量に使うから駄目。

コメント数:10
あやの
[1]2006.02.02.Thu @ 10:11 PM | [RES]

こりゃ良いね

<table>で角丸やると、すんげぇタグ長いしさ。
早く対応プラウザ増えると良いなぁ。

omika
[2]2006.02.02.Thu @ 10:11 PM | [RES]

>>1 あやの

おひさぁ~
あやの、「アンズヤ」がリニューアルされてるのに今気がついたよ。フンとに毎度毎度カキコしてくれてありがとう。

んで、思ったんだけど、かなりHTMLやCSSの事を勉強してるね。時間かかったんじゃないかと思って感心してます。


今回のリニューアルは、デザインというかサイト全体の作りが豪快じゃない?
小柄ながら(食べるの)豪快なあやのっぽいなぁと思ったよ。

ちなみに、小文字でタグを書いちゃうと見えません。大文字にしておいたよ。

で、テーブルタグでサイトデザインするのは基本中の基本なんだけど、これってね、元々は無理矢理使ってる荒技なんだよねぇ。なので、将来的にはテーブル技は無くなっていくと思う。それはいつなのか、さっぱりわかんないけど。

写真などを加工するソフトを持たない方は早くフィルター系も使えるようになるといいよね。あたしも手抜きしたいからフィルター系の対応を待ってたりするw

あやの
[3]2006.02.02.Thu @ 10:12 PM | [RES]

>ちなみに、小文字でタグを書いちゃうと見えません。大文字にしておいたよ。

すまんです

投稿した後にしまった !
と思いました。
変更、さんきゅーです。


おう。リニュ気付いてくれてありがとう。

>かなりHTMLやCSSの事を勉強してるね。時間かかったんじゃないか

ハイ。あそこ迄来るのに5年かかちゃったよ。(笑)
ま、ゆっくり勉強していきますわ。

>小柄ながら(食べるの)豪快なあやのっぽい

豪快なつもりなかったんだけど。豪快なのか。(笑)

omika
[4]2006.02.02.Thu @ 10:12 PM | [RES]

>>3 あやの

おはよ、フンとによく遊びに来てくれるよ、ありがとね。

>あそこ迄来るのに5年かかちゃったよ。

5年か…っていうか、うちらが出会ってもう何年?
あやのが自己紹介のコメントで


「二年」

という数字を出していたんで、なんとなく思ってみた。

ちなみに、あたしは最近手抜きする事しか考えてない…w

>豪快なつもりなかったんだけど。豪快なのか。

野球の時のカレーを見ても思ったけど、そうだと思うよw

あやの
[5]2006.02.02.Thu @ 10:12 PM | [RES]

>>4 omika

>フンとによく遊びに来てくれるよ

暇なんだよ。
ずっと家に居るからね。(笑)

>うちらが出会ってもう何年?

わたしがSite始めたのと大体同じ時期だから
5年位になると思ふよ。

最初会った時、わたしまだ学生だったしね。
時の流れって凄いわ。歳取る筈だ。(笑)

omika
[6]2006.02.02.Thu @ 10:13 PM | [RES]

今、パソコンを親父に貸していて家にないので事務所よりレス返し。
ラジオはFM80.0 ソウルジャミーン プシン&ムーミン

あ~らましぃー

>>5 あやの

>暇

あたしも暇みたいじゃんw このレスポンスの良さはw

>5年位になると思ふよ。

ご、5年… 随分経ったね… 長いよなぁ


>学生だった

周りはフンとに学生ばっかりだったのになぁ。
もっと合コンをお願いしておくんだった。
この歳で学生となんか出来ないし、お願いするのも恥ずかしくな・・・
嘘です、今でも大好きです。

ずっと家にいるってさぁ、最近何しているんだっけ?

あやの
[7]2006.02.02.Thu @ 10:13 PM | [RES]

>>6 omika

>ずっと家にいるってさぁ、最近何しているんだっけ?

ぷー、引き篭り、ニート?(笑)

さっき迄、求人広告見てた。
働かないとねぇ、お金が・・・

omika
[8]2006.02.02.Thu @ 10:14 PM | [RES]

>>7 あやの

おはよ。

っていうか、無職のニートなの?w
金ね、ないと心が荒むよねw

ねえ
[9]2007.04.03.Tue @ 5:24 PM | [RES]

うざいよこの機能

omika
[10]2007.04.04.Wed @ 5:05 PM | [RES]

>>9 ねえさん

どんも、初めまして。

>うざいよこの機能

角丸がうざいのでしょうか?
それとも、うちがうざいんでしょーか?
両方だとしても、そりゃ大変申し訳ないですw

Lil Kim 「Naked Truth」 このページの先頭へ戻る 雑記 9/21
お気に入りに登録 RSS



omikaさん / あやのさん / omikaさん / ねえさん / omikaさん /
項目を記憶 | 返答を通知
[+] [Top100]Page Ranking

[1つ前の記事]
Lil Kim 「Naked Truth」
[1つ新しい記事]
雑記 9/21