javascriptで角丸の枠作成
- javascriptのNifty Cornersを使用して、画像を使わずに角丸の枠を作成する方法を紹介します。
- 枠線（ボーダー）の色を指定する方法については、引用サイトのRounded関数を使用することで実現できます。
- 具体的なソースコードの書き方については、引用サイトのリンク先を参照してください。
- ベストアンサー
javascriptで角丸の枠作成
画像を使わないでjavascriptで角丸を作るのに「Nifty Corners」を使用しています。 http://www.html.it/articoli/nifty/index.html ここで、角丸を作成する時に枠線（ボーダー）に色をつけたいのですが、できません。いろいろとサイトを調べたら下記サイトでどうやらできるようですが、ソースコードの書き方がよくわかりません。 引用 smoothの他にborder,smallなどを指定できます。borderを指定することで、角丸枠に枠線をつけられます。スペース区切りで複数指定による組み合わせが可能のようです。 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); 枠線の色指定や枠をつける場合どうしたらよいのでしょうか？ http://phpspot.org/blog/archives/2006/04/javascript_8.html
- semuji
- お礼率18% (5/27)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
後者のURLでは前者のURLじゃなくて↓のURLの物の説明をしているんじゃない？。別物なのでは http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/
関連するQ&A
- javascript ライブラリ利用法
web制作初心者です。 ひとつのページでjavascriptのライブラリを複数読み込むことは可能でしょうか？ たとえば同一ページで、nifty cornersで角丸を作り、jqueryでマウスオーバー効果を生成したいのですが、同時にできなくて困っています。<head>の中で<script>で読み込ませていて、どちらか一方ならできるのですが。 もともと不可能なのか、あるいは方法があるなら教えてください。 用語遣い間違ってたらすみません。
- ベストアンサー
- JavaScript
- 画像にJavaScriptを指定すると枠がつきます
普通のリンクや文字に指定するときはそんなことはないのですが、画像にJavaScriptを指定するとリンク色の枠がつきます。 これはどうしたら取れるのでしょうか？ 初歩的な質問ですみません。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- ページの端に枠をつけるタグで
<body style="border: 50 solid #枠の色"> で、ページに枠をつけれるじゃないですか。 それで、他サイトを見てみるとこの枠内に文字画像・リンクを貼っているサイトがありました。 あれはどうやってやっているのですか？？
- 締切済み
- その他（インターネット・Webサービス）
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。
- ベストアンサー
- HTML
- JavaScriptについて
JavaScriptで指定した部分の色を変える方法ってどうすれば・・・ http://www.sky.sannet.ne.jp/masapine/java_top.html ↑で背景の色を変えるやり方は、のってあるんですけど部分的にするにはどうすればいいのか分かりません。 サイトなどあれば尚うれしいのですが。
- 締切済み
- ホームページ作成ソフト
- tableに角丸がうまく反映されない
```html index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title foreground has-text-centered is-size-1"> 作業用タイマー </h1> <table class="table foreground is-size-1 is-fullwidth has-text-centered"> <tr> <td>現在時刻</td><td>hh:mm:ss</td> </tr> <tr> <td>残り時間</td><td>mm:ss</td> </tr> </table> </div> </section> </body> </html> ``` ```css style.css .foreground{ background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); border-radius: 8px; border: none; border-right: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid #fff; padding: 10px; color: #000 ; } html{ background-image: url('ubuntu-16-04-lts-Desktop-fondo.png'); background-size: cover; } ``` このコードについてなのですが、角丸がうまく反映されません。 h1タグはきちんと四方が角丸になっているのですか、tableは右下が角丸ではなく、右と下に指定した1pxのボーダーも飛び出しています。 edgeとfirefoxどちらも同じです。 どなたか直し方を教えてください。 あと関係ないですけどここでもそろそろmarkdownとシンタックスハイライト対応してくれませんかね?
- ベストアンサー
- CSS
- 画像の枠線の色の指定
FrontPageとHTML言語と両方を使いながらホームページを 作成しています。 写真に枠を設定したのですが、枠線の色がなぜかピンク色になってしまいます。画像の枠線の色は指定できないとありますが、他に指定の方法はないのでしょうか？ どなたか、HTML言語に詳しい方、おしえてください。 ちなみに画像の設定はこのような記述をしています。 <p align="center"><img border="1" src="image/seminar/semi01.jpg" vspace="5" width="150" height="113"></a>
- ベストアンサー
- その他(ソフトウェア)
- tableタグの枠線について
tableタグで個別にborderを設定している箇所のみまとめて色を指定する方法って何かありますでしょうか？ 【補足】 1つのHTML内において、 <table border="0" align="center"> … </table> で囲まれたtableは枠線を表示せず、 <table border="1"（或いは2以上） align="center"> … </table> で囲まれたtableは指定した色の枠線にしたいのですが…。 出来れば、個別のtableにクラスを指定して…という方法は、適用したいtableが湯水のごとく大量にあるので避けたいです…。
- 締切済み
- CSS
- 枠線をつけたい
IEの新しいバージョンでテーブルのborder colorが効かない？ようなのでCSSで指定しようとしているのですが、うまくいきません。。 別のCSSファイルに指定する方法で、 テーブルと、その中のセルの枠に、薄くて細いグレー（#CCCCCC)の細い枠線をつけたいのですが、どのように指定すればよいでしょうか。 なお、同ページに他のテーブルもあり、枠線をつけたいのは特定の1つのテーブル内のみです。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
