現在、スマートフォンに関しての電子書籍を執筆しています。その中で、フリップ、タップ、スワイプなどのジェスチャーを用意する必要が多々あります。Fireworksなどで一から作るのは非常に大変なので便利なテンプレートサイトを自分なりにブックマークなどをして結構集めていました。それを紹介したいと思います。
スマートフォンウェブサイトの開発を考えると、これだけ、画面サイズが増えてくれば PHPや.htaccess で全てのデバイスに対してユーザーエージェントで細かく振り分けを行い、別々のHTMLやCSSを提供する手法は、ゼロサムゲームみたいなものかもしれません。クライアントにはコストが重くのしかかり、開発者には開発時間が重くのしかかります。ここには win-win のような関係は全くないでしょう。 「Responsive Web Design(レスポンシブ・ウェブデザイン)」 こんな時、少し考え方を変えて Responsive Web Design(レスポンシブウェブデザイン)を採用してはどうでしょう。スクリーンサイズに反応するようにレイアウトが変わるデザイン手法です。allWebクリエイター塾のスマートフォン講座では、一貫して 「Responsive Web Design(レスポンシブ・ウェ
先日、レスポンシブ・ウェブデザインのウェブサイトを集めた「mediaquri.es」を紹介しましたが、周りの人からそもそも「レスポンシブ・ウェブデザイン」が何かということを説明して欲しいと言われました。 レスポンシブ・ウェブデザインとは 「レスポンシブ」は「反応型」とも解釈することができます。何に反応するのかというと、「スクリーンの幅」です。「レイアウト」がデバイスのスリーンの幅に反応して可変をしていくのが「レスポンシブ・ウェブデザイン」です。現在では、iPhone のみならず Android など多様なスクリーンサイズをもったデバイスが出現しています。特定のデバイスのスクリーンサイズに合わせてウェブサイトのレイアウトを作成すると、他のデバイスで上手く表示されない問題などが発生します。デバイスを基準に考えるのではなくて、スクリーンのサイズを元に考えようというのがレスポンシブ・ウェブデザイン
allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 (IE6はすでに対象外かもしれません)へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。 「respond.js」は 非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した 「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。 利用方法 利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。 <head> <meta charset="utf-8" /> <
レスポンシブ・ウェブデザインで大きなポイントとなるのが、メディアクエリのサイズの設定です。以前に「mediaqueries」に掲載されているウェブサイトの メディアクエリのサイズを調査したことがありましたが、今回は メディアクエリのサイズの設定について詳しく紹介したいと思います。 メディアクエリのサイズメディアクエリのサイズですが、 800px –ネットブック、Nexus One、Dell Streak などのサイズ。 600px – タブレット端末、例えば SamuSung ギャラクシー、Blackberry Playbook。iPhone 4 のポートレートのサイズは少し大きい 640pxなので、800pxのスタイルシートが iPhone4 のポートレートでは適用される。 480px – スマートフォンでは一般的なサイズ、3GS以下のiPhone のポートレートモードもこのサイズ。 3
CSS3を勉強する際に大切なことは2つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。 今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」は プロパティではなく単位になります。単位表示でおなじみの「em:エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。 フォントサイズの指定を考えてみましょう。 「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。 ただし、IE では「em」を利用すると
スマートフォンのデザインをする際の UI のサイズには誰もが最初は悩んでしまいます。そんな時に役に立つのが、Android や iOSのUI のガイドラインです。その中から、ボタンのサイズに関する部分だけを抜き出して集めました。 ボタンのタッチ部分のサイズは最小で高さと幅は44ptが推奨されているみたいです。ただし、2010年に開催された Apple Tech Talk にてApple のUIデザイナーの Eric Hope 氏は、垂直方向へボタンがかさならないのであれば、例外として高さは 最小で22ptをOKとしていると話しています。事実、iPhone のランドスケープモードでは44px x 44px ではなく、48px x 38pxの高さのボタンも見受けられます。
allWebクリエイター塾 ブログでは、Responsive Web Design(レスポンシブ・ウェブデザイン) をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう?ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。 新聞編 About.comなんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが Responsive Web Design(レスポンシブ・ウェブデザイン)とは驚きですね。海外では
レスポンシブWebデザイン の為のツール Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか? そんな時に、「Resposive Design Testing」は最適なツールです。 このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。 ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。 また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。 まとめ 「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レス
セミナー開催情報 CSS Nite以外のセミナーへのお問い合わせは、 それぞれのイベントの主催者までお願いします。 #朝までフォトショ 2「生成AI」特集 #朝までフォトショ の第2弾は「生成AI」特集。21-25時のハーフポーションでお送りします。 開催日:2024年8月23日[金] オンライン 詳しく見る 誰も教えてくれない、制作単価を上げるための「ビジネスリテラシー」育成講座 仕事の成功に必要な「ビジネスリテラシー」の高め方について松尾 茂起さんにお話しいただきます。 開催日:2024年8月30日[金] オンライン 詳しく見る 心をつかむ「紙」のデザイン 〜生成AI時代におけるデザイナーの生存戦略とは 生成AIが急速に進化する2024年、デザイナーが生存戦略として考えるべきポイントについて倉又美樹(まるみ)さんにお話しいただきます。 開催日:2024年9月6日[金] オンライン 詳し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く