CSS

改善版:投稿内のブロックにのみCSSを適用してエディター上にも反映する【WordPress】

WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。 ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておく...

add_editor_style()が効かない場合は@importが原因かも【WordPress】

add_editor_style() で読み込んだCSSファイルの内容がエディターに反映されない一例の紹介です。add_editor_style() が効かない状況に遭遇したら原因はこれかもしれません。 代替となる解決策も紹介して...

クリックで開閉するアニメーション付きアコーディオン【CSS/JavaScript/jQuery】

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。いくつかの方法がありますが、<details>(詳細折りたたみ要素)とJavaScriptを使って実現する方法がメリットも多く最もおすすめです。 ...

Visual Studio CodeでのSass導入とおすすめ設定【Live Sass Compiler】

Sassを使えるようにするためにはVisual Studio Codeの拡張機能である Live Sass Compiler (Glenn Marks) が手軽に導入できて便利です。 今回は Live Sass Compiler ...

フォントサイズの指定方法と違いを見直してみる【CSS】

ウェブサイト制作時のフォントサイズの指定方法について考え直す機会があったのでそれぞれの違いや見解をまとめてみます。 rem, em, px, % 等、単位の選び方に迷った場合は参考にしてみてください。 使用したバージョン G...

レスポンシブなページネーションのCSSデザインサンプル【WordPress】

以前に紹介したfunctions.phpに追加するタイプの「レスポンシブなページ送りの設置」の続きになります。ページネーション設置後はここで紹介するデザインサンプルのCSSをコピペして見栄えを整えてください。 ブラウザ幅を動かすと...

tableをレスポンシブ対応で見やすくする【CSS】

表(table)で整理された情報は視覚的にも理解しやすく効果的ですが、十分な表示領域が無い場合はセル幅が狭くなり、とても見やすいとは言えない状態になってしまいます。そうなってしまわないよう、今回はレスポンシブ対応で小さいディスプレイでも...

セレクタの使い方まとめ・一覧【jQuery/CSS】

jQueryとCSSで使用するセレクタを一覧にしました。CSSセレクタを基準にjQuery独自のものもまとめています。非推奨となったものも 非推奨 マークを付けていますので利用時の参考にしてください。 2020/06/29現在 ...
スポンサーリンク
タイトルとURLをコピーしました