Webの記事一覧

input type submitで設定している検索ボタンをSVGにする方法

input要素[type="submit"]で設定している検索ボタンをSVGにする方法です。当サイトではサイト内検索フォームに、検索向けAdSense（検索エンジン広告）を使っていたんだけど、事情が合ってWordPre...

PageSpeed Insightsのパフォーマンス改善のためにやったことのまとめです。サイトの表示速度は検索順位に影響する。高速化することでSEO対策として有効となるのは、Webサイトを運営しているユーザーなら知って...

PageSpeed Insightsで「リンクに識別可能な名前が指定されていません」のエラーが出た時の改善方法です。この問題を解決すると、PageSpeed Insightsのパフォーマンス診断で、ユーザー補助のスコ...

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」のエラーが出た時の改善方法です。この問題を解決すると、PageSpeed Insightsのパフォーマンス診断で、ユーザー補助のス...

CLSを改善するのにやったことです。 CLS（Cumulative Layout Shift/累積レイアウトシフト数）とは、Webページを表示した際に生じる、レイアウト崩れを示す指標のこと。「PageSpeed Ins...

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

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

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

Bootstrap4でテーブル内のDatetimePickerが裏側に隠れないようにする方法です。テーブル内にBootstrap4のDatetimePickerを組み込んだところ、あれれ？裏側に隠れてしまった・・・。 ...

Bootstrap4でDate/Time Pickerでカレンダー入力する方法です。昨今の画面仕様における日付や時間の入力には、必ずといってもいいほど「Date/Time Picker」が配置されていますね。それはもち...