メインコンテンツ内だけを追従するサイドメニューの実装
query_builder2022/01/27
sell
スクロールに追従するサイドメニューの実装方法です。 メインコンテンツエリアをスクロールするときだけ追従するので、メインコンテンツより上では、メインコンテンツの一番上で止まり、メインコンテンツ内では追従、メインコンテンツより下ではメインコンテンツの一番下で止まるような仕様です。
flexboxレイアウトでcssを追加せずmarginを可変にする
query_builder2022/01/26
sell
横並びやタイル形式のデザインで列数によって、横や縦のmarginが異なることが多々あります。その度にcssを追加して書くのが面倒だったので、data属性のみでmarginを変更できるようにしました。
テキストの切り抜き位置を背景画像と一致させる
query_builder2021/10/14
sell
切り抜かれるテキストの位置と背景画像の位置を一致させるcssです。背景画像が固定のときに使用できます。
アコーディオンをjQueryなしで実装する 改善版
query_builder2021/09/22
sell
以前、「アコーディオンをjQueryなしで実装する」という記事を書きましたが、その改善版です。cssのtransitionを使って、より簡単に実装します。
簡単なモーダルウィンドウをライブラリなしで実装
query_builder2021/09/20
sell
ライブラリを使用しない簡単なモーダルの実装です。最初は簡単なモーダルから、最後はアクセシビリティを考慮したモーダルの実装まで段階的に実装していきます。
【小技】テキスト中央寄せ時の改行をきれいにする
query_builder2021/09/14
sell
テキストを中央寄せした時に、変な位置で改行されて読みにくくなることがあります。これを解消する小技の紹介です。
table(表)の様々なレスポンシブ対応
tableタグをレスポンシブ対応させるcssの小技を4つ紹介します。列数が多い場合の対応の仕方も紹介しています。
1/30arrow_drop_down