くらげになりたい。

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

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だけ、幅広な表示に!! ちなみに利用しているテ…