くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

css

Element Plusのカスタマイズで使えるCSS変数を調べてみた

TailwindとDaisyUIで試していたけど、 全コンポーネントを作るのは大変なので、Element+の活用を考えてる。 どうやってテーマをカスタマイズするのかなと思ったので、 いろいろ調べてみたときの備忘録(*´ω`*) Element Plusの設定 テーマのカスタマイズにつ…

VSCodeのcolorizeでCSS/JSの色をわかりやすくする

VSCodeで開発をしているときに、CSSやJavaScript上の色を表示する拡張があって便利だった。 colorizeを試してみたときの備忘録(*´ω`*) marketplace.visualstudio.com こんな感じで背景色で表示してくれる(*´ω`*) (Element+とTailwindCSSのConfigで試してみ…

ポインターイベントを拾わずに子要素に伝える

css

pointer-events: noneを使えばいいらしい。 .foo { pointer-events: none; } 参考にしたサイト様 pointer-events - CSS: カスケーディングスタイルシート | MDN

ピンタレストっぽいレイアウトをCSS Gridで実装する

css

ピンタレストっぽい、高さが違う要素をきれいに並べる方法を探してたら、 GridLayoutで簡易的できるっぽかったので、いろいろ調べたときの備忘録。 このサンプルがわかりやすかった(*´ω`*) ・Masonry style layout with CSS Grid | by Andy Barefoot | Medi…

背景画像に透過した色を重ねる

css

おしゃれなアイキャッチにしたくて、 背景画像に透過した色を重ねる方法を探してたら、 linear-gradient()で簡単にできた(´ω`) できたのはこんな感じ。 色を重ねる前はこれ。 使い方 url()の前に、linear-gradient()を設定すればOK background-image: linea…

CSSですりガラスみたいなぼかしを入れる

css

積読ハウマッチの新機能でネタバレありの読書メモに対応したときの備忘録。 すりガラスみたいなぼかしをいれて、ボタンを押さないと読めないようにしたかった。 #積読ハウマッチ アップデートしました✅読書メモの公開方法を設定できるように✨設定は、公開・…

クリックやタップしたときの青い枠や四角を消すCSS

css

クリックやタップするとなぞの青い枠や四角が。。 いろいろ調べたら、消せるらしいので、その時の備忘録。 クリックしたときの青い枠線 buttonやinputをクリック・フォーカスしたときに、 なぞの青い枠線が出てきたけど、色があってなくて、消したい。。 そ…

スマホでダブルタップしたときに拡大しないようにするCSS

css

ボタンを連打できるようにしたいなと思ったら、 ズームされて連打しにくかったので、調べてみたときの備忘録。 touch-actionで制御できるみたい。 touch-actionを設定する html { touch-action: manipulation; } 以上!! 参考にしたサイト様 touch-action - C…

中央に寄せつつ、中身を左揃えしたいときは、FlexboxじゃなくてGrid Layoutを使うとできた

css

こんな感じで、中央に寄せつつ、左揃えにしたいときに調べた備忘録。 HTMLはこんな感じ <section> <h1>Flexbox</h1> <hr/> <div class="flex"> <div class="box is-1" ></div> <div class="box is-2" ></div> <div class="box is-3" ></div> </div> </section> <section> <h1>Grid Layout</h1> <hr/> <div class="grid"> <div class="box is-1" ></div> </div></hr/></section>

text-overflowの複数行版、line-clampを使ってみる

css

複数行でも省略できるようになるline-clamp。 使ってみたら、若干手間取ったので、その時の備忘録。 .clamp-three-lines { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; /* 上の3つを指定して、やっと使えるようになる */ -webk…

Bulmaでもボトムナビゲーションしたい!

ふいにボトムナビ(下の方にあるメニューバー)をつけたいなと思ったので、 その時の備忘録。Bulmaが好きなのでBulmaで。 やっぱスマホだとボトムナビゲーションのほうがいいよねぇと思ったので、レスポンシブ対応した(*´ω`*) pic.twitter.com/NjUznVjOXv— き…

Nuxt.jsでローディングにSpinKitを使ってみる

Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。 SpinKitというのもあるそうなので、そっちを使ったときの備忘録 SpinKitは、vue用のライブラリもあるよう(vue-spinkit) SpkinKit(vue-spinkitなし) インストール $ npm install --sa…

調べたアニメーションライブラリのちょっとしたまとめ

Webサービスの画面にアニメーションをつけたいなと思ったときに、いろいろ調べたときの備忘録。 いろいろあって悩ましい。。 アニメーションライブラリ AOS - Animate on scroll library スクロールアニメーションのライブラリ。簡単に導入できる Delighters…

CSSの国旗アイコンライブラリ(flag-icon-css)がよかった。

Webサイト内で、国旗を表示したいなと思ってたら、flag-icon-cssという、いい感じのCSSアイコンがあったので、その時の備忘録。 NPMでインストール $ npm install flag-icon-css 使い方。簡単。 <span class="flag-icon flag-icon-jp"></span> <span class="flag-icon flag-icon-kr"></span> ただ、国旗は標準サイズが決まってないらしく、アスペクト比…

JavaFXのCSSまとめ【気が向いたら更新】

JavaFXのCSSがよくわからんからまとめてみた。 指定方法 ID指定 #<id> {} class指定 .<class-name> {} JavaのClass名がCSSのclassとして使える .label {} Scene全体の設定も.rootでできる 色の定義とかもここでするとよいかも .root { /* colors */ gray: #424242; blue: #02</class-name></id>…

はてなブログの記事の幅を広げる

css

はてなブログにプログラムを載せていると、記事の幅が狭くてみずらいことがある。。。 なので、デザインからCSSをカスタマイズして、記事の幅を調整してみた!ときの備忘録 もちろん、レスポンシブデザインでPCだけ、幅広な表示に!! ちなみに利用しているテ…