Home > web > 画像を使わずにCSSとJavascriptで角丸

画像を使わずにCSSとJavascriptで角丸

Posted by: jaccoy
2006年4月13日 07:40
web

Nifty Corners: rounded corners without images

「画像をいっさい使わないで角丸デザインでページを作って下さい！！」と突如言い始める"自分のセンスに自身有りのWEB制作未経験のクライアント 32歳（仮）"というあながち居ないとも言い切れないクライアントさんに遭遇してもこれで万事解決！という風にいくかもわからんこのテクニック、というよりは神が作ったスクリプト。

php開発日誌さんのほうで日本語で解説なさっています。
* Javascriptで指定のHTML要素を動的に角丸デザインにする方法
* Javascriptで動的にアンチエイリアスな角丸を設定する

が一応補足。正確には上記の日本語ページで解説されているソースだけでは当然角丸に成りません。JavaScriptととCSSを会わせて設置して下さい。以下手順。

# niftyCorners.css を作成。
# niftyPrint.css を作成。
# nifty.js を作成
# それぞれ3つののファイルに適切にリンクを使用したいhtmlのheadに記述する。以下おなじ階層にそれぞれのファイルを置いた場合の記述

<link rel="stylesheet" type="text/css" href="niftyCorners.css"> 
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">

# 使用したいhtmlのheadに下記を記入。Rounded()の括弧の中身はアレやコレできる模様。下記はID&タグ指定、ページ背景色、角丸背景色の設定のみ

# あとは上記のRounded()で指定したIDやらタグやらを適応したい所にはっつける。

とここで全国3億5千万人のWEBジャンキーのjacolog読者ならお気づきかとおもうが、IDで指定ってことは複数の要素に欠けたい時はどうするのー？なんでclassじゃだめなのー？って所だけれども、このJavaScriptはDOMで対称要素をゲットしてるのでclassじゃDOMでゲットできないのです（それを可能にするScriptがまた別にあるらしいのだがここでは割愛）。よってIDになるのだけど、複数に成る場合は、単純にRounded()の行を増やしてあげれば良いだけの様です。"詳しくはここのソース参照":http://pro.html.it/esempio/nifty2/nifty2js.html

角丸枠のCSSと画像を切り出す事を考えただけでお腹が痛くなって会社に行けない人は是非おためしを。

via:shingoさん色々ありがとう！

S	M	T	W	T	F	S
						1
2	3***	4***	5	6	7*	8
9	10	11	12	13	14*	15
16	17	18	19	20	21	22
23	24	25**	26	27***	28	29
30*

画像を使わずにCSSとJavascriptで角丸

関連エントリー