Webの記事一覧

レイアウト・シフトをデバッグする方法

レイアウト・シフトをデバッグする方法です。事の発端は「PageSpeed Insights」で、「Cumulative Layout Shift (CLS)」に不良が確認されたから。「Google Search Con...

SyntaxHighlighter EvolvedからHighlight.jsへ切り替える方法です。これまで「SyntaxHighlighter Evolved」を使ってソースコードを表示してきたんだけど、レイアウトシ...

highlight.jsを使ってソースコードをきれいに表示させる方法です。「highlight.js」を採用しようと思った理由は、シンタックスハイライト機能として定評があり、継続的に新バージョンが提供されていることがあ...

Font Awesomeをローカルに配置して使用する方法です。「Font Awesome」をCDNで読み込んでいただけど、これが結構重くて「PageSpeed Insights」のパフォーマンスに影響してた。そんなわけ...

Googleフォントをローカルに配置して使う方法です。 Googleフォントの「Noto Sans JP」をCDNで読み込んでいたんだけど、これが結構重くて、PageSpeed Insightsのパフォーマンスに影響して...

WordPressで「srcset」にショートコード出ない場合の回避方法です。 WordPressで記事を書くとき、当然PHPはかけないので、funstions.phpにショートコードを作成するってのは一般的ですよね。 ...

jQueryで「placeholder」に値を設定・書き換え・削除する方法です。「placeholder」とは、フォームなどの入力欄にあらかじめ記入されている薄い灰色のテキストのこと。主に記入例としてのテキストが記載さ...

Swiper.jsでテキストをスライドする方法です。 Swiper（Swiper.js）は、簡単にスライダーが作れるJavaScriptのプラグインです。トップページにスライドショーを実装しているサイトはたくさんあります...

JavascriptでGETパラメータを取得する方法です。 JavascriptでURLからGETパラメータを取得するには「URL.searchParams」を利用します。文字通り、検索クエリを保持するプロパティです。 ...

framesetを使わないフレームの分割方法です。 HTML4まで利用されていたframesetとframeの要素。HTML5からはiframeの利用が推奨されています。 frameset利用での分割は様々で、左側にメニ...