border-radiusツイートCSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。半円右(パーセンテージ指定)正円まず、border-radiusにより正円を作ります。これが半円を作っていく上での基本形となります。上の正円をベースに、まずは下半分が欠けた半円(半円上)から順番にコードを見ていきます。ポイントは、先程も触れた「border-radius」の値と「width」と「height」の値の比率です。0;background:#dd0000;}半円上の場合、正円と比べて高さが半分になるので、widthとheightの値の比率が2:1になります。border-radiusは左上と右上の値が100px。右下と左下を表示しないために0を指定します。半円下は半円上のときと同じ考えで、widthとheightの値の比率が2:1はになりますが、border-radiusは左上と右上の値が0、右下と左下が100pxと逆の指定になります。続いて、左右のどちらかが欠けた半円の表現です。半円左ですが、これもwidthとheightの値の比率、border-radiusの値の以下のように調整します。100px;background:#dd0000;}今度はwidthとheightの値の比率が1:2になります。border-radiusは表示しない方の角(右上、右下)の値を0に指定すればOKです。border-radiusは右上、右下の値は100pxになります。上記の半円4つのborder-radiusは、いずれも値にpxを指定したものですが、もちろんパーセンテージで指定することも可能です。この場合、border-radiusの水平方向の値と、垂直方向の値を別々に調整する必要があるので、少し厄介です。コメントデータの処理方法の詳細はこちらをご覧ください。最新記事[WP]サイトで技術的な問題が発生しています。サイト管理者のメールを確認して指示に従ってください。