HTML&CSSリファレンス

HTML&CSSリファレンス

display ボックスの表示方法 コピペで使えるHTML+CSS

要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
2021.01.16
HTML&CSSリファレンス

transform 要素を変形するコピペで使えるHTML+CSS

要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
2021.01.25
HTML&CSSリファレンス

::before と ::after 疑似要素 要素の前後に挿入 コピペで使えるHTML+CSS

要素の前に表示する::beforeセレクター、要素のあとに表示する::afterセレクター。どのような仕組みか。どのように使用するかを具体例とともに解説。
2021.01.15
スポンサーリンク
HTML&CSSリファレンス

linear-gradient 線形グラデーション コピペで使えるHTML+CSS

CSSのlinear-gradient()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。
2021.01.15
HTML&CSSリファレンス

リアルな蛍光マーカーを引く コピペで使えるHTML+CSS

文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現!
2021.02.11
HTML&CSSリファレンス

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

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

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

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

border-collapse セル境界線の表示形式 コピペで使えるHTML+CSS

table要素を調整するborder-collapseプロパティの仕組みを解説。separateとcollapseとではどのように表記が変わるのか?borderの数値をどのように設定すべきなのか?具体的にテーブルを表示して比較説明します。
2021.01.15
HTML&CSSリファレンス

text-shadow 文字に影をつける コピペで使えるHTML+CSS

テキスト、文字について影をつけるtext-shadowプロパティの使い方。各パラメーターの設定とその効果を具体的に例示しながら解説します。span要素とセットで使いましょう。
2021.02.13
HTML&CSSリファレンス

table 角丸の表を作成する コピペで使えるHTML+CSS

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

文字や画像に影をつける コピペで使えるHTML+CSS

影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは2つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
2021.01.16
HTML&CSSリファレンス

cite(作品タイトル)を右下に表示 コピペで使えるHTML+CSS

引用文のために用意されたblockquote及び、qの2つの要素。その引用元の情報を記載する対象であるcite要素の表示位置を修正する簡単な方法について解説。
2021.01.16
HTML&CSSリファレンス

blockquote q 引用符をデザイン コピペで使えるHTML+CSS

引用する際に用いるblockquote要素とq要素について、CSSの::beforeセレクターと::afterセレクター及びtransformプロパティのrotate()関数を用いて独自の引用符を実装します。
2021.01.16
HTML&CSSリファレンス

mark 背景色を消しアンダーラインを引く コピペで使えるHTML+CSS

mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。
2021.01.16
HTML&CSSリファレンス

del 打消し線の色、太さ、種類を変更 コピペで使えるHTML+CSS

多くのブラウザにおいてdelは文字の中央に打消し線が表示されます。CSSのtext-decorationプロパティを修正することによってその太さや、打消し線を破線や直線などの線の種類を変更します。
2021.01.16
HTML&CSSリファレンス

s 打消し線の太さと色を変更 コピペで使えるHTML+CSS

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