Webサイトを運用していると、 「色を変えたいだけなのに、CSSを何十箇所も直さないといけない…」 「どこで指定しているのか分からず、修正に時間がかかる…」 こんな経験はありませんか？ そんな“CSSあるある”を一気に解 […]

スクロールに応じて要素を固定表示させたいときに便利なのがposition: sticky;です。 しかし、親要素や祖先要素にoverflow: hidden;があるとstickyは効かなくなってしまいます。 単純にove […]

前回、下記の内容を紹介しました！ もうSassはいらない？CSSネストで快適にスタイルを書く 今回は、実際にCSSネストを使ってみて感じたメリットとデメリットを改めてまとめてみます。 CSSネストのメリット ①コードの構 […]

Webサイトを作るときに欠かせないCSS。 コードが長くなると、「どのスタイルがどの要素に対応しているのか分かりにくい…」と感じたことはありませんか？ そんなときに役立つのが CSSネスト です。Sassのようなツールを […]

20周年特設サイトに込められた表現を、技術で支える トリニティ株式会社様の創立20周年を記念した特設ページにおいて、インタラクションやアニメーションのフロントエンド実装を担当しました。 デザインはデザイアドライン株式会社 […]

:emptyとは？ :emptyはCSSの疑似クラスで、要素の中身が何もない場合に適用できます。 :emptyの指定方法 要素:empty {プロパティ: 値;} :emptyの応用例 ① リストの空白要素を非表示にする […]

この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。 Webサイトを運営していると、長いURLやテキストリンクが […]

前回の「:nth-child() の “of S” 構文で、細かく要素を指定する方法①」では、:nth-child() の “of S” 構文とは何かを紹介しました。続いて […]