レスポンシブデザインの基礎と制作時の注意点を解説
ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -
【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする こんにちは。 pushStateやpopStateというHTML5 HISTORY APIをご存知でしょうか。 もともとhistory APIは前からあり、history.back();などでブラウザの戻ると同じ挙動をさせることができます。 今回はHTML5で追加されたpushStateとpopStateに注目していきましょう。 よくAjaxなど、画面遷移を伴わずコンテンツなどの入れ替えを行う際に活用されています。 Facebookの例 ※個人情報の観点からスクリーンショットがご用意できずすみません。 メッセージページでは左側にメッセージのやり取り相手の写真が並びます。 それらをクリックすることによってメインのやり取りが表示されていく
Chrome Apps（Chrome Packaged Apps）を作って動かすための4ステップ - Intelligent Technology's Technical Blog
こんにちは、中山です。 「Chrome Apps（Chrome Packaged Apps）」盛り上がってきてますね！ HTML5 + JavaScript + CSS で書かれるウェブアプリなのだけれども、ネイティブアプリのようにふるまうことのできる、というこのプラットフォームは、Googleが2013年9月に正式に発表したものです。 この「Chrome Apps」、現状は、PCやMacだけがターゲットのようです。（iOSやAndroidなどでは使えないみたい。） また、日本語での呼び方は「Chromeアプリ」となっているようですね。 「Chrome Apps」については、以下のページが参考になります。 Google、デスクトップアプリのように使える「Chromeアプリ」を発表 What Are Packaged Apps? 今回は、この「Chrome Apps」を実際に作って動かしてみ
HTML5/JavaScript/CSS3 でクロスプラットフォームなデスクトップ GUI アプリを作れるフレームワークの決定版を見つけた（かもしれない）件 - bearmini's blog
[追記 2015/05/19] 2015年時点では HTML5/JavaScript/CSS でデスクトップ GUI アプリを作るなら、Electron 一択でしょうね。electron.atom.io [追記ここまで] 私はデスクトップアプリケーション開発歴はすでに20年近い老人ですが、数年前から「HTML5 でデスクトップ GUI アプリを開発するのが今後主流になるはず」と言い続けてきました。 最近になってやっと、その説をサポートしてくれてかつ人に紹介しても恥ずかしくなさそうなフレームワークに出会えたので（それも一気に 2 つも）、紹介したいと思います。 ちなみに、私のデスクトップアプリ開発に使ってきたフレームワークの遍歴は、以下のような感じです。（抜けてるのもあるかも） MS-DOS 時代 Turbo Pascal と Turbo Vision によるコンソールでの擬似 GUI Wi
HTML の br タグを CSS だけで消す方法
HTML に br という要素がありますね。 4.6 Text-level semantics — HTML5 The br element represents a line break. ということで、改行を表すということになってます。 以前は <br /> が不要なら <br /> を入れなきゃいいじゃない というだけの話だったんだけど、 最近これを有効にしたり無効にしたりと切り替えたくなることがあります。 例えばいわゆるレスポンシブデザインでサイトを組むときに 大きな画面なら表示範囲にゆとりがあるから改行を入れて広く使ってもいいけど スマートフォンなどの画面でそれをやると一目に入る情報量が減っちゃうから そのときだけ br をなかったことにしたいという具合に。 考えたこともやったこともなかったんだけど、 これ実に簡単な話でした。 display: none; にする 要するに br
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Dreamweaver テンプレートのタグを自動で削除する方法 - OKWAVE
DWのテンプレートタグについての解答は既に出ていますので、下の > いろいろなサイトのソースを見てると こういうタグが > 入ったものが ほとんどないんですが、例えばヨドバシカメラは > 何千もあるページをどう管理してるんでしょう？ への回答です。 大規模のサイトなどの場合、もちろんテンプレートのようにヘッダやフッタのように共通化できる部分は管理しやすいように工夫しています。 様々な方法がありますが、代表的なのは「インクルード」という方法です。 ヘッダなど共通化できる部分のソースだけを抜き出し保存、サーバへアップします。 そしてヘッダを表示するページの方で、ヘッダのファイルをインクルード（読み込み）するタグを記述し、アップすると、サーバ上で合成されブラウザで一つのページとして見えるようになります。 下記サイトを見れば詳しくやり方が書いてあります。 全然難しく無いですし是非挑戦してみてくださ
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。 以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。 IE6,7に対応（前回はFirefox2のみ）。 インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。 インクルードした後で、その内容を変更するための仕組みを追加。 最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。 【使用例】 ------------------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォン対応、気をつけたいトラブル
はてなブログ | 無料ブログを作成しよう
GitHub - zentooo/Riddle.js: simple and stupid selector-based library for iPhone and Android devices
GitHub - madrobby/zepto: Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API