やり方 タグで囲いたい範囲を選択 Ctrl + Shift + pを押す Wrap with Abbreviationを選択 タグ名* と入力、エンターキーを押す これで選択した各行が、4で入力したタグで囲われているかと思います。 例 下のような3行の文字列それぞれにliタグをつけたい。 …
position:fixedを指定した要素を、画面幅いっぱいに広げる方法を紹介しています。 結論 position: fixedを指定した要素のleftおよびrightプロパティに0を指定する 実際に書いたコード https://codepen.io/itsumoonazicode/pen/OJgwazw どうしてleftとrightに…
最近（ここ1年ぐらい）ずっと悩んでいることがある。 深い睡眠が取れない。寝ても4時間、早いときには2時間ほどで目が覚める。一度起きて、水を飲んだり用を足したりして、再度入眠の準備をしなければいけない。とてもストレスを感じている。このせいで最近…
スクロールによってグローバルナビゲーション等が隠れるのを避けるために、ヘッダー要素を固定する「スティッキーヘッダー」をjQueryで実装します。 実際に完成したもの 実装したコードの流れ 変数を定義する イベントを定義する 処理を間引く（debounce） …
Visual Studio Codeの検索機能で正規表現を使用するとき、複数行にまたがる文字列を検索対象に入れるにはどうするかを紹介する記事です
見出しセル（th）をposition: stickyで固定して、テーブルレイアウトのレスポンシブ対応をしようという記事です。 HafHというウェブサイトの下記ページ「プラン比較」の部分にインスパイアを受けました。これをテーブルレイアウトでできないものかと思い、本…
はじめに Visual Studio Codeの拡張機能「Live Preview」のホットリロードに関する設定を変更しようと思います。 初期設定では、'On All Changes in Editor'となっています。この設定では、文字を打ったりctrl + sで保存したり等、「エディタ上で発生する変…
ブログをリニューアルしました。その報告記事になります。 リニューアルとはいっても、見た目はほとんど変わっていません。 唯一大きな変更点といえば、Google AnalyticsのバージョンをGA4に変えたことぐらいですかね…。 当ブログは、あまり記事更新の頻度が…
※以前書いた記事「【jQuery】Chromeのコンソールエラー "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive." をjQueryのコードをそのままに解決した」の修正版となります。 サンプルとして、…
クロスブラウザ対応のために、ホイール系のイベントをjQueryで設定する記事を見ていたら、下のような変数宣言がありました。変数の中には、ブラウザごとで異なるホイール系のイベントの値が入るようです。 var mousewheelevent = 'onwheel' in document ? 'w…
結論 Firefoxの開発者ツールからInspectorをチェック whitespaceと書かれてる箇所が無いかを探す 開発者ツール上でそれを消してみて、サイトのレイアウトに影響があるかどうかを確認する 読まなくて良い話 ウェブサイトが意図しない崩れ方をしているときに、…
ブログのリニューアル内容について 現在、ブログの見た目を変えるべくカスタムCSSをいじいじしています。主に以下の変更を予定しています。 グローバルナビを撤去 背景を白に統一 文字サイズ・行間の調整 「最近の投稿」や記事アーカイブへのリンクをフッタ…
VSCodeで利用している拡張機能のLive Server使用時に、オートリロードが効かなくなってしまい、困っています。現在未解決なため、経過等も書くためにブログに書きました。
Shibajukuさんの以下記事を参考にしました。 しかしながら、肝心のスマホでアクセスしてもサーバーへの接続でタイムアウトしてしまいます。 Visual Studio Code のLive Serverを使って実機（iPhoneなど）でプレビューする方法。 ざっくり以下の手順で進めま…
※記事内の結論に誤りがあったため、更新しました。 この記事でアウトプットしたいこと 要素にfloatを指定したときのdisplayプロパティの挙動 インライン要素にfloatを指定したときになぜwidthを指定しないとtext-alignが効かなくなるか TL;DR floatプロパテ…
ここ一ヶ月でキーボードマッピングの設定を5度ほど変更している 変遷のスクショは撮ってないので、最新のだけ（2020/09/05） fnキー押下時のキーマッピング コンセプトは、「ノーモア・複雑」 何を以て複雑と判断するかについてだが、「ホームポジションが崩…
Powerline-goの設定を変更して、ユーザー名やホスト名表示を削除したり、プロンプトを改行で始めるようにしてみます。
2020.06.30現在、画面分割をマウスでおこなうのは不可能なようだ。 代わりに、キーボードを利用して画面分割をおこなう。 （設定はsettings.jsonから変更可能） 画面を増やす 縦方向に増やす shift + alt + - 横方向に増やす shift + alt + + 画面を閉じる c…
※ここには有益な情報はありません。雑記です。 Microsoft frontend-bootcamp github.com 進捗 Step1-01～03までは飛ばしたのでStep1-04から始めた。 Propsまで写経した。 つまづいたところ 書いたコードが反映されない（解決した） Step1-04フォルダにsrcとi…
やりたいこと 線で囲まれた四角の四隅に、丸を置きたい。 イメージは下記サイトの「1つボックスに複数の画像指定」の部分まんま。 CSS3の背景画像指定について | Designmemo（デザインメモ）-初心者向けWebデザインTips- やったこと background-imageを一つ…
CRLFへの変換（文字コードはBOM付きUTF8になる） ls | % { (Get-Content -Encoding UTF8 $_) -join "`r`n" | Set-Content -Encoding UTF8 $_} VSCodeの改行コードを変える機能でチマチマ改行コードを変えるという作業は今日はやってしまったので、 こういう…
サイドバー、エディタ、ターミナルそれぞれへの切り替え サイドバーにフォーカスする サイドバーを閉じる エディタにフォーカスする ターミナルにフォーカスする ターミナルを閉じる ターミナルからファイルやフォルダを開く（現在開いてるウィンドウに） フ…
下記、"active"の部分を任意の文字列に変えると、HTML内のどこに、指定したCSSがあるのかを探すことができる。 class((?:\s|")?)(.*?)((?:\s|")+)active((?:\s|")+)(.*?)((?:\s|")?) 下記は検証用マークアップ。class内にあるactiveという文字列と完全一致し…
font-sizeの初期値はmediumである CSS Fonts Module Level 3 初期値のmediumは、ブラウザ既定の初期値である16pxと同一であるということになるが、 これはブラウザ側の仕様になるためW3Cの仕様書には記載が無い。（16pxなどという記述はどこにも出てこない。…
TL;DR remは<html>（ルート）要素で使われているフォントサイズを基準とする emは親要素で用いられているフォントサイズを基準とする font-sizeのブラウザの既定値はmedium（16px） 目次 TL;DR 目次 em font-size: 1em;を指定した要素は、その親要素で用いられてい</html>…
※2021.05.22：本記事の修正版となる記事を作成しました。 TL; DR jQueryのコードをaddEventListenerで囲む addEventListenerの第3引数でpassive: falseを設定する jQueryの.onから取れるoriginalEventはaddEventListenerで渡されるオブジェクトを取れる 発生…
TL,DR CMSの編集画面から設定したページリンクを、JSでaタグに設定していきたい 設定したいaタグは特定のクラスがついたdivタグの中に必ず収まっている CMSから設定したリンクは、全てaタグに設定する（フィルタリングなどは行なわない） 各div内のaタグをな…
TL,DR tableタグを囲むdivにoverflow-x: autoを設定する。 floatを利用して左右に分けていたものをflexでつくりなおす。 横スクロールさせるには、あらかじめtableの長さを多めに設定する必要がある。 目次 TL,DR 目次 やりたいこと 実際にやったこと 縦並び…
やること このサイトにあることを実行したいが、jQueryではなくVanilla JSで実装したい スマホでも動く！スクロール判定でCSSアニメーションの作り方 | 株式会社Cruw（クルー） サイト内に出てくるjQueryのコードをVanillaに置き換えつつ、何をやっているコ…
TL,DR 実現したいこと：2カラムのリストを縦に並べるときに、最後の列だけ1カラムになったりすることがあるが、そのときでも間延びせずにレイアウトしたい justify-contentのspace-aroundやspace-evenlyでは最後の列が1カラムになると、その要素が真ん中に配…
