CSSのgapをgrid layoutへ使うときは子要素のmarginと役割を分ける
- CSS Gridのgrid-gap、grid-row-gap、grid-column-gapはChrome 66でgap、row-gap、column-gapへ名称が移ります。containerが決める間隔と子要素のmarginを分けて直す考え方を解説します。
タグ: CSS
object-positionは画像の枠を埋める前に見せる位置を決め、3項指定を使わない
- object-positionは枠からはみ出す画像の見せる位置を決めるCSS propertyです。object-fitとの役割、読者に見せる部分の決め方、Chrome 66で使えなくなる3項指定を解説します。
CSSのwriting-modeは縦書きの飾りにせず読ませる範囲と横書きへ戻す条件を決める
- CSSのwriting-modeは縦書きを見せるためだけに使いません。読者に読ませる範囲を決め、英数字、link、mobile画面、横書きへ戻す条件を確認する方法を解説します。
position: stickyは常時表示したい部分に使い親の範囲と本文を隠さないようにする
- position: stickyは親の範囲内で要素を表示位置へ留めるCSSです。position: fixedと混同せず、本文を隠さない幅と高さ、狭い画面での解除を確認する方法を解説します。
CSSのoutlineは消す前にkeyboardで移動した位置を見えるようにする
- CSSのoutlineを消すと、keyboardで操作する人が現在位置を見失うことがあります。link、button、formでfocusを見えるようにし、実際にTabで確認する方法を解説します。
CSS Gridは二次元の配置が必要な部分に使い既存layoutの置換と分ける
- CSS Gridは行と列を同時に決めるlayoutです。card一覧や情報のまとまりに使い、既存layoutの全面置換と混同しない設計と確認方法を解説します。
外部scriptを読むときはSRIで固定するversionと更新を受けるresourceを分ける
- SRIは外部scriptやstylesheetの内容が期待したhashと一致するかbrowserで確かめる仕組みです。固定するversion、更新を受けるresource、crossorigin、公開後の確認を分けて解説します。
Web fontは見た目をそろえる前に読み込み失敗時の文字と本文の読め方を決める
- Web fontはbrandの見た目をそろえるために使えますが、font fileを読めない画面でも本文を読める必要があります。font-familyのfallbackと確認方法を解説します。
WordPress 4.7のCustom CSSは一時的な見た目の調整とthemeの設計変更を分けて使う
- WordPress 4.7のCustom CSSは、軽い見た目の調整をpreviewで確認するために使います。themeの設計変更と混ぜず、変更範囲と確認するpageを決める方法を解説します。
CSSのwill-changeは変化するpropertyを必要な要素へ短時間だけ指定する
- CSSのwill-changeは、変化するpropertyをuser agentへ事前に伝えるrendering hintです。指定値、短時間だけ使う手順、過剰指定とstacking contextの注意点を解説します。
CSSのtransform-originはtransformの基準点を要素内の位置と長さで指定する
- CSSのtransform-originは、transformを適用する基準点を横位置と縦位置で指定します。初期値、keyword、percentage、lengthの違いを解説します。
h1タグのSEOは文字の大きさではなく見出しの階層から考える
- h1タグは文字を大きくする指定ではなく、ページの主見出しを示す要素です。h1、h2、h3を内容の階層で使い分け、見た目をCSSで調整する方法を解説します。
