CSSとJavaScriptを備えた丸い角

 

   ＆nbsp;  コンテンツはここに行きます  ＆nbsp;      

数年前、これは許容可能な解決策だったでしょう。今日、それは醜いハックです。それは、比較的重要でない視覚装飾のための非常に多くの冗長なマークアップです。実際、上記のコードは、厳格なDoctypeを使用して提供されるドキュメントで意図されているとおりに機能しません。小さなギャップは、画像がインライン要素であるため、「Y」や「J」などの文字の「尾」の画像の下にスペースを残すという事実によって引き起こされるコーナー画像の下に表示されます。エリック・マイヤーが画像、テーブル、神秘的なギャップで説明したように、ソリューションは、次のルールをスタイルシートに追加することです。

td img { display: block; }

ここに示すように、これは望ましい結果を生成します

しかし、今ではCSSハックを使用して醜いテーブルハックを修正しています！ CSSのみを使用して同じ効果を実装する方法を見てみましょう。

一般的なルールとして、タグを使用して適切なページにドロップされるのではなく、既存のページ要素のCSS背景画像として装飾的な画像を実装する必要があります。画像が装飾的であるか、実際のコンテンツが含まれているかを判断するのは簡単です。画像の欠如がページの全体的なコンテンツに影響を与えるかどうかを自問してください。丸い角の場合、答えは明らかにそうではありません。

CSS背景画像は非常に強力なものです。その証拠については、CSS Zen Gardenに展示されている多くの素晴らしいデザインを見るだけです。 CSSを使用して、背景画像をページ上の任意の要素に適用できます。さらに、水平方向に、垂直に繰り返すことができます。絶対測定を使用して、または4つの角のいずれかに対する画像の背景領域内に配置できます。要素のコンテンツがスクロールした場合、固定された状態に保つこともできます。残念ながら、CSS 2には1つの小さなが重大な制限が課されます。ページ上の各要素にのみ単一の背景画像を適用できます。

で丸い角を適切にレンダリングするには、各コーナーに1つの背景画像を適用する必要があります。

幅ボックスを修正

装飾的なコーナーを適用しているボックスの幅が固定されている場合、問題の半分はすでに解決されています。ボックスが常に200ピクセルの幅であることがわかっている場合、4つの背景画像（1つのコーナーに1つ）を作成する代わりに、2つを作成できます。1つはボックスの上部、もう1つは下用です。課題は、2つの背景画像を

に適用することに還元されました。マークアップを利用する時が来ました。

丸い角のあるボックスは、コンテンツが含まれていなければ、それほど面白くありません。以下を検討してください：

td img { display: block; }

かなりシンプルですよね？ボックスのタイトルは

に存在します（

と

はすでにページの階層上にさらに使用されていると想定しています）。以下のコンテンツは、段落と順序付けられていないリストです。 2つの背景問題を解決するための鍵は、

にあります。

は、ボックスの一番上にあります。私たちがしなければならないのは、

の上部に背景画像を適用し、

の下部に別の画像を適用することです。

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

ここをクリックして結果を確認してください。

よく構成されたドキュメントには、通常、このようなフックがいっぱいになり、複数の背景を適用して特定の視覚効果を達成するために慎重に悪用されます。それらを識別することを学ぶことは、CSSとの作業の重要な部分です。

ネストされた要素

4つの背景を単一のDivに適用することは、まだ手の届かないところにあります。しかし、バックグラウンドごとに1つをネストした場合はどうなりますか？そうすることで私たちの問題は解決しますが、構造的価値のない追加のマークアップを犠牲にして来ます：

および、css：

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

ここに示すようにコードが表示されます。

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

ここで何が起こっているのかはっきりしているはずです。 4つのDivのそれぞれには、それぞれ右上、左、下部右、および下左に配置された丸い角の背景画像が割り当てられています。含まれるdivの幅は200pxに設定されていますが、液体のデザインで使用するためにより柔軟なものに簡単に設定することができます。含まれるdivがどんなに大きくても小さくても、角はまだ機能します。

問題の解決策があります。これは、元のテーブルの例よりもはるかに少ないマークアップを使用します。しかし、それはまだ完璧ではありません。それは3つの余分なDIVを使用しており、ドキュメント全体の構造に価値のないものは何も追加しません。もっと良くできますか？ javascriptに目を向ける時です。

dom

を使用します

JavaScriptとDOMを使用して、ドキュメントがブラウザによってロードされた後にドキュメントの構造を操作することができます。丸い角は、サイトの全体的な経験を大幅に減らすことなく、非JavaScriptユーザーエージェントから隠すことができるプレゼンテーション効果であるため、この種の変換にJavaScriptを使用することに倫理的な問題はありません。最終的なソリューションでは、ソースドキュメントには単一の

のみが必要です。 JavaScriptを使用して、丸みを帯びたコーナー効果に必要な3つの外部DIVを動的に追加します。 これがマークアップです：

td img { display: block; }

コンテンツが段落として構造的に定義されている場合は

と

と交換する場合を除き、それよりも簡単にするためにできることはあまりないことに同意すると思います。このスイッチを作成することは、読者のためのエクササイズとして残されています。

ここにJavaScript：

があります

スクリプトは、2つの論理セクションに分割されます。最初のセクションでは、ドキュメント内のすべての

要素を反復し、クラス属性に「丸みを帯びた」を含む配列を構築します（要素には、スペースで複数のクラスを区切ることができます）。スクリプトの2番目の部分は、これらの各要素を順番に通過し、3つの追加のDIVを作成し、オリジナルに包みます。そのためのコードをもっと詳細に見てみましょう：

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

ここでは、元の

から完全に「丸みを帯びた」クラスを削除します。この理由は、CSSで明らかになります。基本的に、元のスタイルを適用しても、その要素にこれ以上影響を与えることは望ましくありません。

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

外側の

を作成しました。これは、最上位の背景画像とボックスの全体的な幅を適用するために使用されます。クラスを「rounded2」に設定したことに注意してください。これは、CSSで定義され、非JavaScript対応のクライアントに提供される「丸い」クラスと微妙な違いがあります。

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

W3C DOMは、ドキュメント内のノードを別のノードに置き換える直接的な方法を提供しません。代わりに、Nodeの交換Child（）メソッドを使用して、子供の1人を別のノードに置き換える必要があります。見ているノードを交換するのに役立つトリックは、ParentNodeプロパティを使用して自分の親にアクセスし、/#c#.replaceChildを使用して他の何かに交換することです。それが意味がない場合は、心配しないでください。上記の行を、作成したばかりの新しいTRノードに置き換えると考えてください。

3つの新しい

要素を作成し、ドキュメントに挿入しました。残っているのは、元のノードを再挿入することだけで、その内容が完了します。

td img { display: block; }

この時点で、実際のドキュメントツリーは、上記の4つのネストされた

の例のそれとほぼ同じです。唯一の違いは、外側の要素に「丸い」の代わりに「rounded2」のクラスがあることです。 CSSは次のとおりです

これが結果です。

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

div.roundedの最初のルールセットは、JavaScriptを実行しないブラウザでのみ使用されます。幅は170pxとパディング15pxであり、合計幅は200px（幅と左右のパディング）になることに注意してください。これをIE 5/Windowsで動作させる必要がある場合は、パディング値を異なる方法で解釈するため、悪名高いボックスモデルハックを適用する必要があります。前の例では、2番目のルールセットがすでに見られました。

先を見てください

上記の手法は、すべての最新のブラウザと、CSS2およびDom 2標準をサポートするすべての将来のブラウザで機能します。 CSS 3は、この効果を達成するためのいくつかの新しい方法を紹介します。これにより、上記の手法が時代遅れになります。ネイティブの丸い角のサポート（ブラウザのMozillaファミリーで既に利用可能）と同様に、CSSは強力な:: Pseudo-Elementを特徴としています。それだけでは不十分な場合、ボーダー画像では、あなたが考えることを気にかけることができるほぼすべてのボーダーデコレーションが可能になります。

残念ながら、CSS 3のサポートが広く利用できるようになるのは数年かかるでしょう。それまでは、JavaScriptはスラックの一部を取り上げることができる以上のものです。 CSSとJavaScriptの丸いコーナーに関するよくある質問（FAQ）

CSSを備えた丸い角を作成するにはどうすればよいですか？

CSSで丸い角を作成するのは非常に簡単です。 「Border-Radius」プロパティを使用してこれを達成できます。 「Border-Radius」プロパティには、1、2、3、または4つの値を持つことができます。単一の値は、4つの角に同じ半径を適用します。 2つの値は、最初の半径を左上および右下の角に適用し、2番目の半径は右上角と左上角に2番目の半径を適用します。 3つの値は、最初の半径を左上に、2番目は右上左と左下左に、3番目は右下に適用されます。 4つの値は、各コーナーに異なる半径を適用します。たとえば、divのすべてのコーナーに10px半径を適用するために、順に上部左上、右上、下部右、底左側に順序で適用されます。

javascriptで丸い角を作成できますか？

はい、JavaScriptで丸い角を作成できますが、この目的のためにCSSを使用する方が一般的です。ユーザーの入力またはその他の要因に基づいて動的に丸いコーナーを作成する必要がある場合、JavaScriptがより良い選択かもしれません。 「canvasrenderingcontext2d.roundRect（）」メソッドを使用して、キャンバスに丸い角が付いた長方形を描画できます。この方法では、長方形の左上隅のxおよびy座標、長方形の幅と高さ、角の半径の5つのパラメーターが必要です。 「Border-Radius」プロパティを50％に設定すると、コーナーは円を形成するのに十分なほど丸くなります。要素には、幅と高さも等しい必要があります。たとえば、

div { width：100px;

height：100px;

border-radius：50％;
}

これは完璧な円であるdivを作成します。 「Border-Radius」プロパティの異なる値を指定することにより、要素。たとえば、divの左上および右上の角のみを丸めるには、次のものを使用します：

div {
border-radius：10px 10px 0;
}

角。

丸い角のある境界線を作成するにはどうすればよいですか？

丸い角で境界線を作成することは、丸い角を持つ要素を作成するのと同じくらい簡単です。 「Border-Radius」プロパティを国境のある要素に適用するだけです。たとえば、

div {border：1px solid black;
border-radius：10px;
}

これにより、1pxの黒の境界線と丸い角が10px半径の丸い角が生成されます。 「Border-Radius」プロパティの異なる値を指定することにより、同じ要素上に異なる半径の角があります。たとえば、左上角に半径10pxのDIVを作成し、右上角と左上角の20px半径、右下隅に30pxの半径を作成するには、次のように使用します。 css？

はい、「ボーダーラジウス」プロパティの各コーナーの2つの値を指定することにより、CSSで楕円形のコーナーを作成できます。最初の値は水平半径で、2番目の値は垂直半径です。たとえば、

div {
border-radius：10px 20px;
}


これにより、水平半径が10pxと垂直半径が20px。

「ボーダーラジウス」プロパティをアニメーション化できますか？

はい、CSSトランジションまたはアニメーションを使用して「Border-Radius」プロパティをアニメーション化できます。たとえば、2秒間で境界半径を0から50％に徐々に変更するには、

div {border-radius：0;
transition：border-radius 2s;
}

div：hover {border-radius：50％;
img { border-radius：10px;
}

これは、すべての画像の角に半径10pxを適用します。

以上がCSSとJavaScriptを備えた丸い角の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。