はてなブックマーク

東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。Category：DESIGN / Tag：CSS, DESIGN, Modern UI レスポンシブデザインでも使えるアスペクト比を固定したボックス要素 written：2014.08.7 [1] アスペクト比の固定方法 アスペクト比を固定するには、横幅に対する高さをpadding比率で取ってあげるだけです。 基本構文はこちら .aspectwrapper { position: relative; width:50%; background:#000000; } .aspectwrapper:after{ padding-top: 100%; display: block; content: “”; } .aspe

東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。jQuery基礎講座[第１０回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで何かとよくみるドロワーメニューです。スマートフォンというブラウザサイズの制限を見事に克服したこのドロワーメニュー。ドロワー（引き出し）のように普段はしまっておいて、必要な時に出すというものです。 実装するにあたって、様々なjQueryプラグインもあるのですが、動きだけを考えるとそんなに複雑な仕組みではないため、自身で動作を定義してあげた方が表示速度やカスタマイズするにあたって便利だろ

東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。.stripe { margin: 0; padding: 10px 20px; background-color: #53727d; background-image: -webkit-linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765 50%, #455765 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, #455765 25%, transparent 25%, transparent 50%, #455765

東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。jQuery基礎講座[第５回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 前回のjQuery基礎講座：ハンバーガーナビゲーション実装サンプル（ZIP付）に引き続き、今回もナビゲーション周りをいじくっていきたいと思います。 本日実装してみるのはタイトルの通り、スクロール量に応じて出現するナビゲーションエリアです。これは、スクロール量をjQueryで取得し、一定の深さまでスクロールするとコンテンツを表示させるというやつです。 ナビゲーション以外にも「ページトップへ戻る」ボタンの出現などにもよく使われるものなので、是非覚えておきましょう。 それでは、具体的にみていきましょう。 実装実例

東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。jQuery基礎講座[第６回] どーも＠PNRAです！ 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 今回はちょっといつもより高度な内容を見ていきたいと思います。表題の通り、ウィンドウのスクロール量に応じて要素を固定したり、動かしたりするという内容です。よくある例でいえば、ページをスクロール中に、ナビゲーションエリアを上部に固定する。といったものですが、応用次第ではサイドバーの固定なども可能です。要素の出現位置を抽出するため、要素が現れたらアニメーションを開始する、といった内容にも繋がってきますね。 そこで今回は使用頻度の高い「スクロール途中でナビゲーションエリアがウィンドウの最上部にきたら要素を固定する」