人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLとCSSで質問です。TABLEタグと画像を使用せずに、角の丸い図形は作れますか?

作れましたら、やり方を教えていただけますでしょうか?

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML タグ 画像 CS
○ 状態 :終了
└ 回答数 : 6/7件

▽最新の回答へ

1 ● ymlab
●19ポイント

結論から言うと、作れます。

ライブラリが配布されておりますので、それを使うとよいでしょう。

http://www.curvycorners.net/

ここの記事を読めば使い方が分かります。

例をたどって、ソースを読む。

http://gigazine.net/index.php?/news/comments/20060616_curvycorne...

具体的には、

http://www.curvycorners.net/usage.php

に使い方がのっていて、

<head>の中に

<script type="text/JavaScript" src="rounded_corners.js"></script>

を追加して、

<DIV id="myDiv"></DIV>

かぎかっこは半角に

でよいみたいですね。

◎質問者からの返答

やはり、CSSだけでは無理ですかね。。。


2 ● kazuya0x01
●19ポイント

はてブに「丸角」というタグがありました

http://b.hatena.ne.jp/t/%e8%a7%92%e4%b8%b8

こちらや

http://www.designwalker.com/2006/12/round-corner.html

ここらへん

http://gigazine.net/index.php?/news/comments/20060525_rounded_co...

なんかが役に立つのではないでしょうか?


3 ● kn1967
●18ポイント

■パターン1

http://www.html.it/articoli/nifty/index.html

結構有名な書き方ですが、書くのが面倒だし、メンテも面倒。

■パターン2

http://www.spiffycorners.com/sc.php

かなりスッキリしてますし、色合いを工夫すれば綺麗な角丸に見えます。

■パターン3

http://home.graffiti.net/deux/border-radius.html

ブラウザによってCSSを切り替えるのであればborder-radiusを使えば、、、

と思ってみれば既にやっている方が居られましたのでパターン3

(FireFoxなどはCSS onlyですがIE系はScript使って対応)

■私見ですが、、、

CSS2の実装もまだまだの現状では見た目にこだわる部分は画像で補っておいたほうが楽かもしれません。


4 ● okadaYoshihiro
●18ポイント

CSSのみで実装可能です。


http://www.html.it/articoli/nifty/index.html

http://www.bnote.net/css/tips_custom_corners2.shtml


Javascriptで整える方法もありますが、すべてのブラウザがJavascriptをOnにしているとは限りませんので、CSSのみを使用した方法をお勧めします。


5 ● hmiyaza1
●18ポイント

こんな超簡単な方法はどうでしょう?

角丸画像を瞬時に生成するGoogleの隠れAPI! | P O P * P O P


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ