(50) Node.js + gulpでcssファイルを自動圧縮
1. やりたいこと cssファイルの更新を監視し、自動的に cssファイルを minifyしたい。 2. やってみる! 下記の方法2, 方法3では Node.jsを使うため、事前に Node.jsをインストールしておく。… 続きを読む »
1. やりたいこと cssファイルの更新を監視し、自動的に cssファイルを minifyしたい。 2. やってみる! 下記の方法2, 方法3では Node.jsを使うため、事前に Node.jsをインストールしておく。… 続きを読む »
1. やりたいこと ・Windowがフォーカスを失ったらアニメーションを停止する。 ・Windowがフォーカスを取得したらアニメーションを再開する。 のようなことをやりたい。 2. やってみた! (1) アニメーションの… 続きを読む »
1. やりたいこと ブロック要素の縦横比を固定したい。 2. やってみた! (1) 高さを幅の 70%に固定する。 Window幅を変化させた場合、追従して高さも変化する。 CSS における ::before は、親要素… 続きを読む »
1. 問題発生 リンクバナー上のマウスオーバー時に a:hover で CSSアニメーションさせた。 すると… iPhone, iPadでのリンクバナー押下時にリンク先に飛ばない。 ※Android端末では未… 続きを読む »
(1) やりたいこと ブロック要素などの幅と高さを JavaScriptで取得したい。 (2) 実験 幅の取得を以下の三通りで試してみる。 {要素}.innerWidth() {要素}.outerWidth() {要素}… 続きを読む »
(1) やりたいこと ページ内で縦にコンテンツを並べた場合に、 「全体でどれだけのコンテンツがあるの?」 「今どの辺を見ているの?」 を知らせてあげるための情報を表示したい。 実装サンプル (2) 実現方法 HTML C… 続きを読む »
(1) やりたいこと 「position:absolute」を指定した要素を中寄で表示したい。 (2) 実現方法 1. 左右方向の中寄せ 2. 上下方向の中寄せ 実装したサンプルはこちら。 https://www.dog… 続きを読む »
(1) やりたいこと ページ内の表示物が増えると、画面をスクロールさせることになる。 このときに、表示物はスクロールさせても、背景画像はスクロールさせずに固定表示させたい。 (2) 実現方法 出来上がったサンプルはこちら… 続きを読む »
CSS 1) aタグを inline-block にする。 2) aタグの表示幅・高さを、親要素の全域(100%)にする。 HTML 実行サンプルはこちら。 https://www.dogrow.net/hp/sampl… 続きを読む »
(1) やりたいこと ブロック要素(今回はたまたまDIV)の中に表示するテキストを上下方向中央に表示したい。 でも、「vertical-align: middle」はブロック要素に対しては効かないのでこんな風になってしま… 続きを読む »