よく使うCSSの小技（蛍光ペン・ストライプ背景）
よく見るけど、いつもどう書くんだったかな〜と調べがちなCSSを2つまとめました！ 1.蛍光ペン風ラインマーカー HTML <p><span>蛍光ペン風ラインマーカー</s…
HTML/CSS
重力とレスポンシブ
Webサイト上にはこの宇宙に浮かぶ惑星と同じく、重力があります。 ここでいう「重力」とはざっくりというとものは下方向にぶら下がる力のことと思ってもらうのがよく、つまりHTMLの内部で上に置かれているも…
Safariで<video>タグの出し分け（PC/SP）がうまくいかず拡大されるバグの対処法
はじめに WebサイトのKVなどで、PCとSPで異なる動画を出し分けるケースはよくあります。先日、タグで動画の出し分けを実装したところ、「PCのSafariで閲覧した時だけ、なぜかSP用の動画が読み込…
その画像、本当にSVGでしょうか？
SVG画像はベクター形式なので劣化がなくてキレイかつ便利！とお思いのみなさま、突然ですがSVG画像の「中身」を見たことはありますでしょうか。 SVG画像が上記のような特徴を持つのは、画像としても扱える…
方眼紙のような背景をCSSで作る
課題 方眼紙のような背景を画像で実装していたが、実機で拡大すると下記の通り途切れたように見える部分がある。 原因 ピクセルのズレと丸め誤差スマホの画面に合わせたり、ピンチアウトで拡大したりすると、ブラ…
縞模様（ストライプ）を作るrepeating-linear-gradient
まっすぐなシマシマ CSSでシマシマな縞模様（ストライプ）を作るためにパッと浮かぶのは本来グラデーションを作るために使われる background-image: inear-gradient…
ページトップを判定したいだけなのに
課題 よくある「トップページに戻る」ボタンが画面固定されている場合について、自分がページトップにいれば非表示（非活性）・いなければ表示（活性）するようにしたい。 問題 もっとも容易に考えられる条件はY…
Live Sass Compilerをやめてnpmスクリプトに移行する
概要 これまでVS Codeの拡張機能「Live Sass Compiler」を使用してSCSSをコンパイルしていましたが、環境（設定やバージョン）によって出力されるCSSに差分が生じる問題が発生しま…