border-radius

スポンサーリンク
CSS

border-radiusプロパティ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説

CSSのborder-radiusプロパティは、要素の角を丸くするために使用します。このプロパティを使用することで、ボックスの角を滑らかにし、要素のデザインを柔らかくします。値には、ピクセルやパーセントを指定できます。border-radiusプロパティの値とその効果の一覧 border-radius: 10px; -...
HTML&CSS

CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSS

まとめ箇条書き表リスト コピペで使えるHTML+CSS

ブログなどの文末によくある要点をまとめた箇条書きや一覧を、順不同リスト<ul>、<li>を使って作成します。箇条書き黒板のデザインも再現します。
HTML&CSS

table 角丸の表を作成する 内側の壁紙問題も対応 コピペで使えるHTML+CSS

CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。
HTML&CSS

border 枠線の表示 コピペで使えるHTML+CSS

CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。
HTML&CSS

divを水平方向に均等配置する コピペで使えるHTML+CSS

ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。水平方向に均等配置justify-contentを用いるdiv-box-1div-box-2div-box-3div-box-4スタイルシートで記述<div class="div-equal-box"> <div>div-box-1</div...
HTML&CSS

divを使ったボックスのデザイン コピペで使えるHTML+CSS

divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
HTML&CSS

span 単語、フレーズ、文章のグループ化 コピペで使えるHTML+CSS

テキストの一部分をグループ化し、スタイルシートによる装飾をおこなう際に用いるspan要素の解説。
HTML&CSS

a リンクを角丸ボタンにする コピペで使えるHTML+CSS

リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。
HTML&CSS

border-radius 角を丸くする コピペで使えるHTML+CSS

CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。