最近活用し始めたウェブ制作で役立つCSSプロパティや疑似クラス10選
CSSプロパティや疑似クラス等、比較的新しいものや最近知ったものの中から実戦で役立ちそうなものを紹介します。CSSプロパティappearance - ブラウザ標準スタイルの使用方法を指定するブラウザ標準のスタイルシート（User Agent...
CSS
「投稿」内に配置したブロックにのみCSSを適用してエディター上にも反映する【WordPress】
WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておくことで記事の...
add_editor_style()が効かない場合は@importが原因かも【WordPress】
add_editor_style() で読み込んだCSSファイルの内容がエディターに反映されない一例の紹介です。add_editor_style() が効かない状況に遭遇したら原因はこれかもしれません。代替となる解決策も紹介しています。ad...
クリックで開閉するアニメーション付きアコーディオン【CSS/JavaScript/jQuery】
クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。今回は主に<details>（詳細折りたたみ要素）とJavaScriptを使って実現する方法を紹介します。他の方法と比較してメリットも多いのでぜひ使ってみてください。...
Visual Studio CodeでのSass導入と基本設定【Live Sass Compiler】
Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。今回は Live Sass Compiler (Glenn...
フォントサイズの指定方法と違いを見直してみる【CSS】
ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。rem, em, px, % 等、単位の選び方に迷った場合は参考にしてみてください。使用したバージョン Google Chro...
レスポンシブなページネーションのCSSデザインサンプルとWordPressへの実装方法【スマホも見やすく】
スマホやPC等、異なるサイズのディスプレイに対応したページネーションのデザインサンプルです。ベースとなるページネーションは「レスポンシブなページ送りの設置」で紹介したfunctions.phpに追加するタイプを使います。ここで紹介するデザイ...
tableをレスポンシブ対応で見やすくする【CSS】
表（table）で整理された情報は視覚的にも理解しやすく効果的ですが、十分な表示領域が無い場合はセル幅が狭くなり、とても見やすいとは言えない状態になってしまいます。そうなってしまわないよう、今回はレスポンシブ対応で小さいディスプレイでも見や...
セレクタの使い方まとめ・一覧【jQuery/CSS】
jQueryとCSSで使用するセレクタを一覧にしました。CSSセレクタを基準にjQuery独自のものもまとめています。非推奨となったものも 非推奨 マークを付けていますので利用時の参考にしてください。2020/06/29現在jQuery と...