【CSS】position:sticky;が効かないときは親要素や祖先要素にoverflow: hidden;を使っていないか確認する！
サイドバーのカテゴリーやメニューをスクロールしても固定させたいとき、position:sticky;が便利なんだけどなぜか効かない！？ そんなときは、親要素や先祖要素にoverflow: hidden;が使われている可能...
HTML・CSSHTML・CSS
HTML・CSSHTML・CSS【JavaScript】カレントページのとき「current」のclassを付与するメモ
HTML カレントページのときに「current」をつけて、cssでデザイン変更したい。 CSS カレントページのときの表示デザインを記述。 JavaScript これでカレントページのとき「current」が付与される...
HTML・CSS【WordPress】記事のタイトルや記事内容の文字制限＆改行なども反映して「…」にするメモ
記事一覧表示でたまーにやる、一定以上の文字数になったら「…」ってするやつ。タイトルや記事のさわりの部分を表示するときの文字制限、いつもどうだったっけ？ってなるのでコピペ用にメモしとく。 functions.phpにカスタ...
HTML・CSS【JavaScript】縦スクロールを横スクロールにするメモ（ついでに画面幅が変わってもいい感じになるよう調整するCSSも）
横並びの画面からはみ出してるコンテンツを全部見てもらいたいとき、スクロールするだけで横に動いたらいいなーってことないですか？ yukipan的には横にはみ出してるより縦並びで全部見れたほうが親切じゃないかと思う派なんだけ...
HTML・CSS【JavaScript】videoの音声ミュートをON・OFF切替るボタン設置の方法メモ
videoを自動再生設定してるけど、最初は音を出したくない。けど音を出したい人はボタンを押して音声ONにしてね〜っていう仕様にするときのコードメモ。jQueryは使わず、JavaScriptで記述。 HTML SCSS ...
HTML・CSSbackground-attachment: fixed;がiOSで効かない！背景をパララックス風に設定するならclip-pathだ！
iOSのsafariさえ対応してくれればこんなめんどくさいコード書かなくて済むのに・・でもiOSユーザーは多いので対応しなくちゃ気持ち悪い！ということで解決コードをいつでもコピペできるよう、メモとして貼り付けておく。 H...
HTML・CSSYoutube埋め込みで表示の縦横比（アスペクト比）をレスポンシブ対応するメモ
youtube埋め込みしてスマホサイズにすると上下に黒い背景が出るのはかっこ悪い！どのサイズでもyoutube画面の縦横比のまま表示できるようにするCSSなんだっけ？といつも調べるからメモしとく。 aspect-rati...
HTML・CSS【CSS】transitionの一括指定の記述メモ
transition記述するときまとめて書きたいけど順番どうだったっけ？どんな内容だったっけ？っていつも忘れるのでメモしておく。 一括指定の記述順番 transition: ①property ②duration ③de...
HTML・CSS【Gulp】sassの@importを@useに切り替えついでにpugからejsに変えてみた。（コーディング環境構築）
sassの@importが2022年10月1日までに廃止される予定なので、重〜い腰を上げて@useに切り替える作業をした。タスクランナーのGulpで、@importのときとほぼ同じ仕様で@useが使えるようにしてみたつも...
HTML・CSSz-indexが効かない・・と思ったときはpositionつけてるか確認！
いつも忘れるのでメモ。 背景と画像とテキストと・・って、いくつも重ねて表示したいときに「z-indexで数値調整して〜」ってcssつけたとき、指定した通りの重なり順にならないときないですか？ いつも忘れて「なんで指定した...