WEB制作 全般 画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」
.noratio .wp-block-column,.ratio .wp-block-column { flex-basis:33%!important; ma...
memo
WEB制作 全般 
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（線の厚み）
WEB制作 全般 slick.jsのオプション設定をPC / モバイルで切り替える
slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
WEB制作 全般 サイトをダークモードに対応させる
長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。身近になったダークモードですが、ブラウザやOSが自動...
WEB制作 全般 option名が長すぎて表示できない問題にはoptgroup
optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
WEB制作 全般 疑似クラス nth-child の使い方いろいろ
今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。かるい気持ちで使用すると、css指定が効かなかったり、全然違う要素...
WEB制作 全般 slickスライドをドットの代わりにサムネイル連動にする
まれに質問があるので、スライダー系JQuery「slick.js」をサムネイルスライダーと連動させる方法について書いておきます。slickjsが優秀なので大して...