web関連 - css
-
プログラミング
【css】「transform:scale()」で小さくした要素の余白を無くす方法
2021/02/24プログラミングcssCSSの「transform:scale()」を使って要素を小さくしたときに元の大きさ分の余白ができちゃうのでそれを潰したいときの備忘録 SCSSで「transform:scale()」の余白を潰す方法 「SCSS」を使… -
プログラミング
【CSS】input要素に自動で挿入される際の薄水色の背景色を無くしたい
2021/02/08プログラミングcss プラグイン背景に写真を使ったフォームを作成時、入力補助のオートコンプリートで自動入力された際に背景色として薄水色がinput要素についてしまうので何とかしたときの備忘録 cssで上書きする cssオートコンプリート時の背景色を変更… -
プログラミング
【CSS】アニメーションを最後の状態で止める方法
2021/01/01プログラミングcssキーフレームアニメーションでフェードインのアニメーションを作って、最後のフェードした状態にしたかったのにフェードして消えるという謎の挙動をしたときの備忘録 animation-fill-modeでアニメーション実行後の処… -
プログラミング
【CSS,JS】100vwを使用したときにスクロールバーの幅を取得する件
2020/12/25プログラミングcss 言語-javascript100vwでサイトの全体幅を取得しようとしたときに、スクロールバーの幅(16px)を含んでしまいデザインが崩れたので備忘録 vwはスクロールバーを含む どうにもchrome、firefox、ie、edgeとsafariだ… -
プログラミング
【javascript,jQuery】ニコ動みたいなテキストが右から左に流れる機能を作った時の備忘録
2020/08/14プログラミングcss jQuery 言語-javascriptなんかニコニコ動画みたいにテキストが右から左に流れる機能面白いかもって思って作ってみた ランダムに配置したテキストを右から左に流す方法 右から左に流すときにjavascriptよりcssの方が処理の都合上綺麗に流れるみた… -
プログラミング
【css】imgタグをbackgroundのように扱える「object-fit」プロパティ
2020/06/20プログラミングcss ie 言語-javascript画像をいい感じに要素内に配置するときにbackgroundを使えばトリミングっぽいことができるんだけどimgタグで「object-fit」プロパティを使って同じことができるみたいなので使った時の備忘録 使い方 imgタグ… -
プログラミング
【html・css】data URI schemeを使ったインラインイメージについて
2020/04/27プログラミングcss html画像をインラインでhtmlに埋め込んでHTTPリクエストを減らして表示速度をあげられることを知ったので備忘録 インラインイメージを使う際に HTTPリクエストを減らして、結果表示速度を早くできる 画像ファイルが3割ほど増… -
プログラミング
【css】ブラウザごとにcssを反映させる方法
2020/04/10プログラミングcss ブラウザIEの時だけcssを反映させたいって時があるので備忘録 ブラウザごとにcssを反映させる方法 <style> /*IEだけに適用*/ @media all and (-ms-high-contrast: no… -
プログラミング
【css】backgroundのlinear-gradientで使った斜めの線ががギザギザになる件
2020/03/30プログラミングcsscssのグラデーションを作るbackground:linear-gradient()で作成した三角形の斜めの部分がギザギザのジャギったので備忘録 calc()を使ってジャギを回避 calc(50% + 1px)を使って1… -
プログラミング
【javascript,css】svgで複数の円グラフアニメーション2
2020/03/26プログラミングcss jQuery 言語-javascript前回、svgで複数の円グラフアニメーション作ったけどその続きでレスポンシブに対応させたアニメーション付き円グラフ 前回の続き レスポンシブに対応した円グラフアニメーション 円グラフが入ってるdiv要素の幅を取得して円グラ…