はてなブックマーク

レスポンシブデザインなど、画像幅をリキッド(親の幅に準ずる)にするために下記のような設定をよくします。 オーバーフローするdivに入れる場合など、個別に「ここは親の幅に関わらず固定幅で表示したい」「でもimgの幅は不確定」という時は initial を使ってリセットしないと元に戻りません。(initial はCSS3から使える設定値です。)

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

/* モーダルメニュー */ #modal-menu { position: fixed; width: 100%; height: 100%; background-color: rgba(50, 47, 45, 0.9); top: 0; left: 0; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; /* 透明状態でもクリックを拾ってしまうので */ } /* bodyにis-menu-openクラスが付いたらモーダル表示 */ body.is-menu-open #modal-menu { opacity: 1; pointer-events: auto; } /* bodyにis-menu-openクラスが付いたら#contentをぼかしフィルター付与 */ body.is-menu-ope

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro

var se = $('#btnsound'); $('').on(_event, function(){ se[0].currentTime = 0; se[0].play(); }); 備考 currentTime = 0; を入れることで連打してもちゃんと鳴ります。 <audio preload="auto">とすることで、音源がプリロードされます。 プラグイン化 イベントと音源を引数にjQueryプラグイン化してみると場合によっては便利かもしれません。

Mobile Safari等 background-attachment:fixed; が効かない環境でもそれらしいことをやりたい場合の方法として、position:fixed; の全面div要素を背面に敷いておく方法がよく紹介されていました。 少し改良?しつつメモ。 サンプル http://jsrun.it/volkuwabara/w5KY (スマホからどうぞ) ソース body::before { background:url('bg.png') no-repeat left top; background-size: 100% auto; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 108px; content: ""; z-index: -1

Google Analyticsに任意のパスやタイトルで ga('send','pageview') する時の注意点JavaScriptGoogleAnalyticsanalytics サマリー ページビューを送信する処理を無名関数の中に書いて、 gaを引数に渡してローカルスコープにすると、うまく飛ばなかった、 のでメモ。 説明 Google Analytics（ユニバーサルアナリティクス）で、埋め込みコードをそのまま使った場合は、ページ読み込み時に、そのページのサーバルートからのパスと、<title>に設定されているタイトルがページビュー送信されます。 が、任意のタイミングにpageviewを送信したいとき、また同一のhtmlでモーダル上などでコンテンツを表示する時にも同様にpageviewを送信したい時は、

<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li> <li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li> <li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li> <li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li> <li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li> <li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li> <li data-id="archive_0

PSD上でどんなに1px単位でこだわってもマークアップ時に再現されなければPSDは「絵に描いた餅」ですし、 むしろPSD上でのゴネゴネの時間をCSSの微調整に当てるべきと思っています。 そんな時、ブラウザ上で任意のガイド線を得るために自分は下記のようなやり方をしています。 body:target { //ガイド線 .area-main { &::before { //水平方向の中心線を引く display: block; position: absolute; width: 1px; height: 100%; background: cyan; left: 50%; top: 0; z-index: 10000; content: ""; margin-left: -1px; box-shadow: -493px 0 0 0 cyan, 493px 0 0 0 cyan; //中心からの

Advent Calender 初めて参加させていただきます。 どうぞよろしくお願いいたします。 「インタラクション」と言うと大きな話に聞こえますが、 ユーザがクリックすると何かがアニメーションするよ、くらいの小さいインタラクションを例に話したいと思います。 意見 クリックしてアニメーション、みたいなインタラクションはついJSで全部完結させてしまいがちですが、 アニメーションはCSS、ステータス管理や値の更新はJSといったようにすみ分けるとシンプルに実装できてオススメですよ。という話をしたいと思います。 DEMO ↑の画像のような、ごく普通のスライダを例に考えたいと思います。 動きのサンプルと全ソースは下記jsfiddle参照ください。 http://jsfiddle.net/volkuwabara/ecy7voxf/4/embedded/result/ コード 一応ソースの解説をしますが

DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%

サンプル http://codepen.io/skwbr/full/JdJWqV （※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...） 解説 フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。 <ul> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> </ul> @keyframes horizontal { 0% { transform:translateX( -3px); } 100% { transform:translateX( 0px); } } @keyframes verti