ヘッダー、フッター固定はもう「position: sticky」でいいね

よくあるヘッダーやフッターの固定だが、JSを使ってある位置までスクロールしたら「position: fixed」を指定したクラスを付加で対処していた。ヌルっと出るアニメーションなど付加し、それなりに満足していたけれ...

親要素の幅を中身に合わせるなら fit-conetnt

レスポンシブでコーディングしていると「中身に合わせて幅はが可変するブロック要素」なんて都合のいいことを求める場合が以外と多い。当然面倒になるが子要素にもう１つ要素をかませてなんとかしていた。 こん...

今どきのスムーズスクロール「ページトップに戻る」

画面の下に固定されていて、クリックするとスルスルとページ上部に戻るヤツとかページ内リンクとか。 このスルスルとページの上下移動はJS頼りで・・・なんてやらなくともCSSだけで出来ちゃう。 とても簡単なん...

CSSのfilterで影を付けたりぼかしたり

ちょっとした装飾で、いちいち画像加工ソフトを使うのは面倒！ 況してや元画像がアップしてあるのに追加しなければならないなんて無駄この上ない！ なんて時にとっても便利なCSS関数がある。（と言うのをすぐに...

CSSの比較関数で最小値、最大値を指定する

レスポンシブが当たり前の今、四苦八苦してたのがフォントサイズ。 他の部分は比率で管理出来ても、この部分だけは細かくメディアクエリで分けることをしていた。 レスポンシブにありがちの幅伸縮で「ガクッ」...

CSSで画像をトリミング

画像をボックス内に目一杯配置する時ってバックグラウンドを使うのが無難と言う固定観念があった。 background-sizeでconainやらcoverを指定してと言う具合に。 ただマークアップ上やレイアウトの都合上、画像...

:rootでコードの煩雑化を防ぐ

CSSでJSの様に「変数」的に値を使えたら便利だと思いませんか？ あっちこっち同じ値を入れてあるコードなら、なおさらそう思うのが人情というもの。 それが１発で変更出来るので素敵です。

レスポンシブでの画像の切り替えはpictureとsrcsetで

レスポンシブで得に「大きい画像」やデバイスごとの「画像切替」を使う時「JS」かCSSで「デバイスごとに表示、非表示」なんて考えるよりもpictureとimgの属性srcsetでもっとスマートに処理出来る。

レスポンシブでYouTubeの埋め込み

Youtubeをレスポンシブで埋め込む場合のメモ。 考え方としてはGoogle Mapをレスポンシブで埋め込むのと同様の方法になる。 何を今更のないようだけど備忘録。

レスポンシブの表組み③

複数列で更に見やすくなるんじゃないかと言う方法。 それが「position:sticky」だ。 今回は前回同様横スワイプを基本に、１列目の項目を見失うことなく見れるようにしてみる。