はてなブックマーク

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?

/* モーダルメニュー */ #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

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

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; } 説明 空のdivは嫌なので背景を敷きたい親要素の::before擬似要素でやった。(上記例ではbody) iOS7以降のMobile Safariで、スクロールダウン中に上下のUIが引っ込む時に、その分の背景が埋まらない(touchendしないとheight:100%が更新されない) ので、height:100%;としつつ、この引っ込む差分(デバイス横向きだとこのU

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

<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/ コード 一応ソースの解説をしますが

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?