「HTML/CSS」カテゴリーアーカイブ

(50) Node.js + gulpでcssファイルを自動圧縮

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」はブロック要素に対しては効かないのでこんな風になってしま… 続きを読む »