JavaScript History APIで履歴に状態を記録する ajaxを使って、1つのページ上で表示するコンテンツを切り替えたり、自動で続きのコンテンツを読み込んで表示する などよくあります ネットショップでいえば、無限ロ... 2022.04.19 JavaScript
JavaScript Vimeoの埋め込み動画に関する備忘録 サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。 ネイティブLazyLoad iframeコードを編集して、lazy... 2022.04.19 JavaScript
css 画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」 .noratio .wp-block-column, .ratio .wp-block-column { flex-basis:33%!important; m... 2022.04.21 css
Linux sublime textでminifyが動かなかったので修正した話 ここ1年ぐらいVScodeに浮気していたので、久しぶりにsublime textを使おうと起動したところ、なぜかminifyが動かないというエラーが発生。 co... 2021.07.02 Linux
HTML レスポンシブ画像のまとめ ブラウザサイズや解像度(retinaディスプレイ / デバイスピクセル比)に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。 2022.04.23 HTML
css モダンブラウザのconic-gradient対応が完了していた 円錐状のグラデーションを描写するconic-gradient。conicはconicalのことだそうです。コーヒーミルの種類にコニカルカッターってありますけど、... 2022.04.23 css
WordPress グローバルナビゲーションをカスタマイズする[WP] word pressのグローバルナビゲーションをカスタマイズする際に必要となる、wp_nav_manu() とカスタムウォーカーの使い方について実例込みで説明しています。全般的なナビゲーションやコンテナ出力についてはwp_nav_menu関数で指定し、子要素以下の細部の設定はカスタムウォーカー(walkerオプション)で指定していく、という流れになります。 2023.08.30 WordPress
css font-sizeはclamp()関数で指定するのが良さそう これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。 2022.04.19 css
css CSS:text-decorationでできること text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line(線の位置) text-decoration-style(線の形) text-decoration-color(線の色) text-decoration-thickness(線の厚み) 2022.04.23 css
JavaScript slick.jsのオプション設定をPC / モバイルで切り替える slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。 2022.07.04 JavaScript
css サイトをダークモードに対応させる 長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。 身近になったダークモードですが、ブラウザやOSが自... 2022.04.23 css