HTML&CSSリファレンス CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
border-radius
HTML&CSSリファレンス 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-1 div-box-2 div-box-3 div-box-4 スタイルシートで記述 <div class="div-equal-box"> <div>div-bo...
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ボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。