WEB制作 全般 History APIで履歴に状態を記録する
SPA（Single Page Application）のようにタブやボタンなどで表示するコンテンツを切り替えることで1つのページが複数ページあるように振る舞っ...
WEB制作 全般
WEB制作 全般 
WEB制作 全般 Core Web Vitalを改善する
Search Consoleに「ページエクスペリエンス」という項目ができているわけですが、きちんと確認はされていますでしょうか？弊社ブログではほぼ100%が優良...
WEB制作 全般 ターミナルから新規ファイルを作る基本操作【vim】
ターミナルからvimを使って新規ファイルを作成・保存・vim終了までの基本操作について。
WEB制作 全般 Vimeoの埋め込み動画に関する備忘録
サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。ネイティブLazyLoadiframeコードを編集して、lazylo...
WEB制作 全般 画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
.noratio .wp-block-column,.ratio .wp-block-column { flex-basis:33%!important; ma...
WEB制作 全般 css一行でできるCLS改善（slick.jsの場合）
slick.jsを使用している場合にcss一行でできるCLS対策を解説します。CLSとはページ描画後に発生するレイアウトのガタつき度合いです。影響を受けた範囲×移動した％で算出されるので、ページ上部に使われやすいスライダーはCLSの値が大きくなる原因となりやすいです。
WEB制作 全般 sublime textでminifyが動かなかったので修正した話
ここ１年ぐらいVS codeに浮気していたので、久しぶりにsublime textを使おうと起動したところ、なぜかminifyが動かないというエラーが発生。co...
WEB制作 全般 レスポンシブ画像のまとめ
ブラウザサイズや解像度（retinaディスプレイ / デバイスピクセル比）に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
WEB制作 全般 モダンブラウザのconic-gradient対応が完了していた[CSS]
円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、...
WEB制作 全般 グローバルナビゲーションをカスタマイズする[WordPress Cocoonテーマ]
word pressのグローバルナビゲーションをカスタマイズする際に必要となる、wp_nav_manu() とカスタムウォーカーの使い方について実例込みで説明しています。全般的なナビゲーションやコンテナ出力についてはwp_nav_menu関数で指定し、子要素以下の細部の設定はカスタムウォーカー（walkerオプション）で指定していく、という流れになります。
WEB制作 全般 font-sizeはclamp()関数で指定するのが良さそう
これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
WEB制作 全般 CSS:text-decorationでできること
text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line（線の位置） text-decoration-style（線の形） text-decoration-color（線の色） text-decoration-thickness（線の厚み）