Responsive Samples by unshift
「固定値型」では、フォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「相対値型」では、ビューポートの幅が変わってレイアウトに影響がないので、PCレイアウト時はSNSリンクは常に表示。 「固定・相対値複合型」では、「固定値型」の範囲内でフォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「固定値型」では、ページのコンテンツの幅同様に、間延びを防ぐため最大幅を1680pxに設定。ビューポートの幅が1680pxより大きい場合は中央に配置される。 「相対値型」では、ページのコンテンツの幅同様に、常にヘッダーのコンテンツの幅がビューポートの幅と一致するため、最大値を
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」 – bl6.jp
ReboxというjQueryプラグインを使えば、レスポンシブに対応した軽量のLightbox風の機能を実装することができます。jQueryの他にZeptoにも対応しているとのこと。実際のデモはとてもシンプルなデザインで、モバイルフレンドリーになっているところがいいですね。 [ads_center] Reboxの使い方 Rebox 使い方もすごくシンプルですね。以下は画像単体での場合です。画像を閉じる場合は画面右上にあるバツ印でクローズできます。 $('#sample a').rebox(); 複数の画像をギャラリーとしてグループ化させたい場合には、オプションのselectorを設定する必要があります。 $('#sample').rebox({ selector: 'a' }); オプションは他にも、prev・nextの設定、 loading、speedなど色々と用意されています。 レスポン
ASCII Web PROFESSIONAL demo page
！ このページでは、実際に下のセクションでプラグインを実行しています。動きを確かめるだけでなく、ソースを見たり、インスペクタを利用して色々と手を加えてみたりして、プラグインの詳細な挙動を確認してみましょう。
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
Rebox - jQuery or Zepto tiny small simple responsive lightbox
Rebox - jQuery or Zepto tiny small simple responsive lightbox Ever need a lean, simple, quick lightbox for images that is responsive, delegates, pretty, no required images, includes captions? That is exactly what Rebox does. Instead of using a rediculous amount of javascript to restrict image sizes within the window, Rebox uses css max-width. The design requires no images, although if you want to
レスポンシブ化で見えた数値の効果改善！「三愛水着楽園」リニューアル直後の検証レポート - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブ化で見えた数値の効果改善！「三愛水着楽園」リニューアル直後の検証レポート 2014.08.27 2018.09.27 お知らせ 以前の記事「日本最大級の水着通販サイト「三愛水着楽園」がレスポンシブECサイトに」にて、「三愛水着楽園」がレスポンシブECサイトに移行したことをお伝えしました。 今回はレスポンシブECサイトに移行してからアクセスやコンバージョン、サイトデザインなどがどのように変化したのか、詳細の解析レポートをお伝えいたします。 今回の比較検証はレスポンシブECサイトにリニューアルにした直後のレポートになりますが、2014年7月のピークを超えた数字レポートも近く分析して公表します。 EC事業としての変化について まずはレスポンシブ化の総評として、レスポンシブ化前と比べ、GoogleAnalyticsでの数値を参照した収益額が169％、商品単価も114％と大きく伸長し、レ
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
スマートフォンに対応したレスポンシブメニューを実装するときに役立つリソース
Webフォントを使用してRetinaにも最適化し... / 深い階層のレスポンシブメニューの実装方法。切り替... / レスポンシブに対応したドロップダウンメニューの実...他...全8件
Responsive Nav — Responsive Navigation Plugin
Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Download Features Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “cle
レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
レスポンシブWebデザインで使えそうな2つのテーブル実装例
以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも！」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは？と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース（GPL License）で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
Habakiri
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
無料で超絶クオリティが高いWordPressテーマ「BizVektorβ8」が凄すぎた | 無料WordPressテーマ BizVektor [ ビズベクトル ]![無料で超絶クオリティが高いWordPressテーマ「BizVektorβ8」が凄すぎた | 無料WordPressテーマ BizVektor [ ビズベクトル ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/90ece620db8095db21b6a18f5b0407fad07b76c5/height=288;version=1;width=512/https%3A%2F%2Fbizvektor.com%2Fwp-content%2Fuploads%2Fcalmly_green_thumbnail.jpg)