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