PPP's Blog

雑コード帳

2019-01-01から1年間の記事一覧

VSCodeでサイドバー、エディタ、ターミナルの切り替えをショートカットでおこなったり、ターミナルからファイルやフォルダを開く

サイドバー、エディタ、ターミナルそれぞれへの切り替え サイドバーにフォーカスする サイドバーを閉じる エディタにフォーカスする ターミナルにフォーカスする ターミナルを閉じる ターミナルからファイルやフォルダを開く(現在開いてるウィンドウに) フ…

CSSの特定のクラスがどのHTMLで使われているかを正規表現で抽出する

下記、"active"の部分を任意の文字列に変えると、HTML内のどこに、指定したCSSがあるのかを探すことができる。 class((?:\s|")?)(.*?)((?:\s|")+)active((?:\s|")+)(.*?)((?:\s|")?) 下記は検証用マークアップ。class内にあるactiveという文字列と完全一致し…

font-sizeプロパティの初期値をW3Cの仕様書で調べてみる

CSS

font-sizeの初期値はmediumである CSS Fonts Module Level 3 初期値のmediumは、ブラウザ既定の初期値である16pxと同一であるということになるが、 これはブラウザ側の仕様になるためW3Cの仕様書には記載が無い。(16pxなどという記述はどこにも出てこない。…

フォントサイズで思い出すremとemとpxの違い

CSS

TL;DR remは<html>(ルート)要素で使われているフォントサイズを基準とする emは親要素で用いられているフォントサイズを基準とする font-sizeのブラウザの既定値はmedium(16px) 目次 TL;DR 目次 em font-size: 1em;を指定した要素は、その親要素で用いられてい</html>…

【jQuery】Chromeのコンソールエラー "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive." をjQueryのコードをそのままに解決した

※2021.05.22:本記事の修正版となる記事を作成しました。 TL; DR jQueryのコードをaddEventListenerで囲む addEventListenerの第3引数でpassive: falseを設定する jQueryの.onから取れるoriginalEventはaddEventListenerで渡されるオブジェクトを取れる 発生…

【JS】CMSから渡ってきたリンクを配列に入れ、特定のdivタグ内のaタグに突っ込む

TL,DR CMSの編集画面から設定したページリンクを、JSでaタグに設定していきたい 設定したいaタグは特定のクラスがついたdivタグの中に必ず収まっている CMSから設定したリンクは、全てaタグに設定する(フィルタリングなどは行なわない) 各div内のaタグをな…

横並びのテーブルを縦に並べて横スクロールさせる(レスポンシブ)

CSS

TL,DR tableタグを囲むdivにoverflow-x: autoを設定する。 floatを利用して左右に分けていたものをflexでつくりなおす。 横スクロールさせるには、あらかじめtableの長さを多めに設定する必要がある。 目次 TL,DR 目次 やりたいこと 実際にやったこと 縦並び…

スクロール関連の書き方:jQueryとVanilla JSで比較

やること このサイトにあることを実行したいが、jQueryではなくVanilla JSで実装したい スマホでも動く!スクロール判定でCSSアニメーションの作り方 | 株式会社Cruw(クルー) サイト内に出てくるjQueryのコードをVanillaに置き換えつつ、何をやっているコ…

flexboxを使って可変型のカラムでも同じデザインが崩れないようにする

CSS

TL,DR 実現したいこと:2カラムのリストを縦に並べるときに、最後の列だけ1カラムになったりすることがあるが、そのときでも間延びせずにレイアウトしたい justify-contentのspace-aroundやspace-evenlyでは最後の列が1カラムになると、その要素が真ん中に配…

企業の「会社概要」をtableでマークアップする

業務でHTMLのマークアップをやっているとテーブルタグによく出くわします。 その割に修正作業のときに何度もぐぐっているので、改めて自分でマークアップをしてみようかなというエントリーです。 今回、参考の対象にしたのは下記のサイトです。 こちらの「会…