もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
レスポンシブWEBデザイン用ナビゲーション＆メニューのベストパターン16 | co-jin
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブWEBデザインに関連するさまざまなパーツが類型化・体系化されてきています。 今回ご紹介するナビゲーション＆メニューについても、ある程度、メジャーなパターンというものが出来上がってきています。 そこで今回は、レスポンシブWEBデザインのナビゲーション＆メニューのベストパターンをご紹介します。 多くのものはjQueryを使って簡単にだれでも実装できるものばかりです。 SlickNav ウインドウ幅が指定サイズ以下になると、メニューアイコンに変化して右上に表示されるタイプです。 多階層にも対応していていたり、アニメーションで動きもつけられます。 ie7以上に対応。 詳しい実装方法がサイトにのっているのでわかりやすいです。 SlickNav FlexNav 指定サイズ以下になると、メニューバーのみが表示
【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方
今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。 この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を JavaScript を使って計算することで、古いブラウザとの互換性が高まり、より多くのデバイスで同じように表示されるようになっています。 最新のブラウザはもちろん、IE8、IE9、IE10 にも対応していますね。 また画像が切り替わるときのエフェクトの一部を jQuery UI に依存させることで、本体の［Juicy Slider］の容量を軽く抑えています。 以下［Juicy Slider］の設置方法です。 必要なファイルをダウンロード 使用するファイル一式は公式サイトからダウンロードしてきます。 Juicy Slider : http://redslim.
HTML5のVideoをレスポンシブ対応させる「video-resize」:phpspot開発日誌
GitHub - robertjanes/video-resize: Efficiently scale HTML5 videos with CSS HTML5のVideoをレスポンシブ対応させる「video-resize」 ブラウザサイズをリサイズさせても綺麗に画面にフィットさせられます。モバイル対応も可能 関連エントリ HTML5での追加・廃止タグ・ブラウザサポート等が一目で分かる「The HTML 5 Mega Cheat Sheet」 HTML5動画プレイヤーを拡張させられる「jquery-video-extend」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 HTML5ベースのクールな音楽プレイヤーをサイトに埋め込める「SoundManager 2」
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
レスポンシブ対応のナビゲーションメニューを実装するチュートリアル11選｜BLACKFLAG
レスポンシブ対応を求められるWebサイト制作では ナビゲーションメニューの構成について 何かと気を使わなくてはいけない点が出てきます。 ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが 便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルが そこそこ溜まっていたので11種類ほどまとめて紹介してみます。 Responsive Nav – Responsive Navigation Plugin Responsive Nav – Responsive Navigation Plugin jQueryなどライブラリファイルを使わずに 1.7KBという軽量スクリプトで構成された 「Responsive Nav – Responsive Navigation Plugin」。 PCサイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
レスポンシブWebデザインのメリット／デメリットをできるだけ中立的に検証してみた | A40
昨年は多くのレスポンシブWebデザインのサイトがリリースされましたが、現状でもさまざまな試行錯誤が続けられている状態で、賛否両論もあるのも事実です。そうした議論を見ていると、検討が十分でないものも見受けられます。 そこで、レスポンシブWebデザインのメリット／デメリットについて、可能な限り中立的に整理したいと思います。 レスポンシブWebデザインでしか実現できないメリット メリット1 ユーザーエージェントを判別せずに見た目を調整できる ユーザーエージェントを利用しないことは、レスポンシブWebデザインのメリットとして、よく挙げられます。さまざまな画面サイズのスマートフォンやタブレットが登場し、ユーザーエージェントの判別ではあらゆるデバイスの画面サイズへの対応は困難になっています。 画面サイズのみでレイアウトを切り替えるレスポンシブWebデザインは、そのような問題を解決する手法と言えます。
レスポンシブWebデザインの“現実的な”ワークフロー
レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。 でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない…… という、恐らく受託サイト制作では一般的であろうシチュエーション。 そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。 ■最初にレイアウトパターンを絞る 画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。 3パターンに収まるのが理想です。 メインページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ ┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き 一覧系ページ：ヘッダ／フッタ、ナビゲーション、メイ
レスポンシブWebデザインと脱原発に立ちはだかる壁 | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） 平成も四半世紀へと突入しました。あけましておめでとうございます。 ところで今年は「電子書籍2年」と呼ばれるのでしょうか。それとも3年でしょうか。ちなみにPDFの登場から数えればすでに「20年」です。日本で、というより電子書籍は米国以外では、喧伝されるほど普及してはいません。価格と規格を含めた出版文化に、物流網の違いが大きく影響しています。しかし、「端末」は次世代ネットデバイスの主役に躍り出ました。「タブレット端
レスポンシブWebデザインの勘違いについて
ぼうくん | VoQn 🎨 @VoQn ちょいと待った。「メンテナンスが楽」「一貫性のあるデザイン」「親切、安心設計の操作性」とか大嘘すぎる。それらは本気でやった場合のみ叶うものでパラダイムが持つメリットじゃない / “レスポンシブWebデザインのメリット、デメリット比較ま…” http://t.co/SJOVjnbK 2012-11-13 07:07:27 ぼうくん | VoQn 🎨 @VoQn RWD でメンテナンスが楽とか何寝言いってんの、っていうかそもそも昨今の RWD 採用例はだいたい単発の使い捨てスペシャルサイトかリニューアルで作ったばかりでメンテナンスコストの検証どこも出来てないだろ 2012-11-13 07:09:51
レスポンシブWebデザインから実機検証までサクッと
レスポンシブWebデザインから実機検証までサクッと：無料でCreative Cloudを使い倒せ（1）（1/2 ページ） はじめに 最近、ブラウザの幅に合わせてレイアウトを変える「レスポンシブWebデザイン」（参照記事：＠IT：5分で分かるレスポンシブWebデザイン」を採用するWebサイトが増えてきました。レスポンシブの考え方は古くからあり、JavaScriptやFlashを利用してコンテンツをコントロールしていました。 さて、HTML4でレスポンシブなサイトを作ろうとすると、JavaScriptに頼るしかありませんでした。今でももちろん、さまざまなライブラリが公開されています。 HTML5になって、レスポンシブなサイトはより身近になりました。JavaScriptを使わなくても、CSS3のMediaQueryで解像度に合わせてCSSを切り替えるのが簡単にできるようになったのです。 しかし、
.htaccessでスマートフォンサイトをアンドロイドやiPhoneで判別表示
スマートフォンサイト作成の依頼が増えて参りました。ありがたい事です。 当サイトでもandroidスマートフォンやiPhoneでのアクセスが増えてきております。 スマートフォンでは、普通にパソコン用ホームページを見る事はできますが、端末の操作で拡大縮小ができるとしてもやはりスマートフォンに最適化した方が、とても見やすく使いやすいです。 誰もが持っている携帯電話（フィーチャーフォン）・スマートフォン！ スマートフォンサイト作成の需要はこれから益々増えて行く事でしょう。 あまりスマートフォンサイト作成まで踏み切らない予算の無い人たちと差別化がつけられ、ユーザーを惹き込む事ができるでしょう。これからはどしどし私たち開発者は、スマートフォンサイト作成をクライアントにお勧めした方が良いと思います。 HTML5とCSS3で、IE（Internet Explorer）を気にせずストレスレスで作成できるので
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SlickNav
Loading...
html5-memo.com
cmmntr.com