異なる親要素を持つ子要素の重なり

異なる親要素を持つ子要素の重なりを、positionプロパティとz-indexプロパティを指定して確認します。デモページはこちら 以下のhtml構造で確認します…

隣接セレクタ、間接セレクタ、直下セレクタについて

隣接セレクタ、間接セレクタ、直下セレクタの動作を確認します。デモページはこちら 隣接セレクタ 間接セレクタ 直下セレクタ A + B A ~ B A > …

positionプロパティとz-indexプロパティによる重なり

positionプロパティとz-indexプロパティによる重なりを確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div-childのd…

linear-gradientを利用した文字の下線

background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…

親要素にtransformが設定されている場合のposition: fixed;

通常、position: fixed;でtop: 0;left: 0;の場合、画面の左上が基準位置になります。しかし、親要素（先祖を含む）にtransformが…

Google Fontsの読み込みをDNSプリフェッチで最適化

DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。 WEBページ表示時ブラウザが外部ドメインにアク…

Google Fonts

擬似要素::before、::afterと:hoverの組み合わせ

CSSの擬似要素::before、::afterに:hoverでホバーエフェクトを適用する場合、以下のように:hoverを先、::before、::afterを…

メディアクエリのand条件とor条件

CSSのメディアクエリ（Media Queries）のand条件は以下のように記述します。andでつないだ全ての条件を満たす時に適用されます。 or条件は以下の…

positionプロパティのstickyの使い方

positionプロパティのstickyの使い方と注意点です。divタグに以下のCSSを適用して動作を確認します。 デモページはこちら positionプロパテ…

asideタグの使い方

asideタグはメインコンテンツの内容と関連はしているが、メインコンテンツではない補足情報を表します。主に「バナー広告」「関連記事」「サイドバー」「モーダルコン…

CSSのcalc記述時の注意点

CSSのcalcはCSS3で追加された関数です。calc記述時は以下の点に注意が必要です。 加算・減算の演算子の左右には半角スペースが必要 乗算は掛けられる方（…

calc

transformプロパティのskewで写真を傾斜変形

transformプロパティのskewで写真を傾斜変形させます。単純に傾斜変形させるだけでは写真がゆがみ左右がコンテンツの外側にはみ出してしまうので、それも調整…

複数行のテキストの左側を縦のボーダーで装飾

デモページはこちら 複数行のテキストの左側を縦のボーダーで装飾します。CSSはborder-leftの場合とheightを設定した疑似要素beforeをabso…

nth-childとlast-childの複合条件

デモページはこちら 3カラムで複数行のコンテンツの両側にCSSで角丸を設定します。コンテンツ数は可変の前提で、部分的に2カラムや1カラムになった時のパターンも考…

nth-childの関数表記でカラムごとにCSSを設定

デモページはこちら 3カラムで複数行のコンテンツに、カラムごとに背景色のCSSを設定します。3カラムの場合、1カラム目は:nth-child(3n + 1)、2…

90°回転させた要素をブロック要素内に収めるtransform-originの設定

左上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…

svgをCSSのbackground-imageに指定

svgをCSSのbackground-imageに指定します。IE11への対応で書き方が変わりますが、今回はIE11にも対応させます。svgのコードは以下の通り…

IE11

CSSカスタムプロパティの使い方

CSSカスタムプロパティはCSS変数とも呼ばれ、CSS内に変数を定義して各プロパティの値で呼び出して使用します。一般的に変数は:rootに定義してグローバル変数…

CSS変数

Photoshopのドロップシャドウをbox-shadowプロパティで適用

Photoshopのレイヤースタイルで作成したドロップシャドウを、box-shadowプロパティで適用します。デモページはこちら box-shadowプロパティ…

background-imageプロパティを利用した高さ可変の三角形

borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…

background-positionプロパティを利用した背景画像の右寄せ

background-positionプロパティを利用して背景画像を右寄せします。Y軸方向の位置は中央寄せにします。単純な右寄せであればbackground-p…

tableの横スクロール時にタッチデバイスでアニメーション表示

ブラウザの幅がtableの幅よりも狭くなった時に、CSSのoverflow-xを利用して横スクロールでtableを表示します。ただしiOS13以降safariで…

iOS

CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズ

webkit系ブラウザのSafariとChromeは、CSSプロパティの::-webkit-scrollbarでスクロールバーの見た目をカスタマイズできます。デ…

高さを判定してoverflow-yプロパティで縦スクロール

画面の高さが要素の高さよりも低くなった場合、要素にoverflow-yプロパティを適用して要素内のコンテンツを縦スクロールで表示します。デモページはこちら 画面…

AndroidiOS

flex-growプロパティを利用した横並びのリスト

flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます…