[記事数:1,202] 日本を元気にするキーワード、地域活性化×中小企業× ITのTips and Quotes(秘訣と引用文)
creative  link  memo 

CSSだけで角を丸くする方法



ボックスの四隅すべての角を丸くする書き方をご紹介いたします。記述方法はとても簡単で、以下のように、border-radiusプロパティの値に「丸くする角の半径」を数値で指定するだけです。

角を丸くするborder-radiusプロパティは、FirefoxやChrome等の古いバージョンでは、プロパティ名の先頭に「-moz-」や「-webkit-」のようなベンダープレフィックスを加えないと表示されませんでした。現在のシェアから考えて、もはやこれらの古いバージョンを考慮する必要性はないでしょう。しかし、どうしても対応しておきたい場合は、以下のように記述します。





FavoriteLoadingお気に入りAdd to favorites
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技... 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのd...
ul,olのリストを横並びに 【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 | delaymania CSSでリストを横並びのメニューにする | m-School リストタグで横並びメニュー ...
WordPressで記事ごとに個別のCSSを設定する方法... body内のstyle指定は非推奨 一部分のスタイルを変えるだけなら、本文内で直接指定するのが一番楽かもしれません。 指定方法はおもに 2 つ。 まず 1 つ目は、style を記事本文入力エリアの冒頭に書いてしまう方法。 2 つ目は、タグに直接 styl...
見出しデザイン CSS直接style指定タイプ... ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ここにテキストを入力します ...
画像を使わずにCSSだけで角を丸くする方法... CSS3で追加されたborder-radiusプロパティを使えば、スタイルシートだけで枠線の角を丸くできます。これなら、「四隅の角丸を画像で用意して配置を工夫する」というような複雑で面倒なことをせずに、簡単にボックスの角を丸くできます。 2/3 画像を使わずにCSSだけで角を丸く...
カテゴリ表示を横並びにカスタマイズ... Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ Widget全部を指定 Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ;; | ジョッパリ・ワールド CS...
CSSで作るシンプルな見出し(Hタグ)デザイン... テキスト まずは文頭にアクセントを これに下線をつけてみると・・・ 全部囲っちゃいましょう 点線系1 点線系2 上下ラインタイプ 点線で囲う CSSで作る見出しサンプル 2重構造 まずは文頭にアクセントを ...
1行内に左寄せと右寄せを同時に書きたい... 左寄せ 右寄せ 1行内に左寄せと右寄せを同時に書きたい All About
CSSリストメニューのサンプルソース ナビゲーション用リストソース|CSSデザインサンプル スタイルシート[CSS]/リスト/マーカーの種類を指定する - TAG index Webサイト ...
FacebookのLike Boxは2015年6月23日で終了。Page Pluginに変わります... FacebookのLikeBox(サイトにFacebookページの情報を埋め込むための仕組み)の仕様がかわり、2015年6月23日から使用しているLikeboxが使えなくなります。 名称もLikeboxから「Page Plugin」に変更になります。 ・Page Pluginのレスポンシブ対...




コメントを残す