必読！5分でわかるレスポンシブWebデザインまとめ その2 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの野田です。 前回書かせていただいた「必読！5分でわかるレスポンシブWebデザインまとめ」が、大変好評だったため、今回も続編を書かせていただきます。 今回は、応用編のつもりでしたが、前回だけでは足りていない事が多かったので、もう少し基本となる部分を固めていきたいと思います。 本当に基本的な事ですが、大切な事ですので、少しでも皆様のお役にたてればと思います。 レスポンシブWebデザインで必ず考えなければならない事 「レスポンシブWebデザイン」で制作する際には、必ず考えなければならない事がいくつかあります。 これは、考えていなければ制作する際に必ずつまずく事でもございます。 ■対応デバイスの確認 まずは、対応デバイスの確認をしましょう。 現在、様々な解像度を持つデバイスがございます。大体のサイズとして下記のものが挙げられます。 ※PCの解像度に関しては、今回は省略させていただきます
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
PCサイトスマホ変換「shutto（シュット）」サービス終了
shutto（シュット）サービス終了 PCサイトのスマホ変換サービス「shutto（シュット）」は、2024年3月31日をもってサービスを終了しました。 今まで多くのお客様にご愛顧いただきましたこと、スタッフ一同深くお礼申し上げます。 ※Webサイト多言語化ツール「shutto翻訳」は「shutto」とは別サービスとなります。 「shutto」はサービス終了となりますが、「shutto翻訳」には影響ございません。 「shutto翻訳」はこちら shutto終了後のスマートフォン変換にお困りの方 株式会社アイスリーデザイン様が提供している「flamingo」サービスでスマートフォン変換が可能です。 詳細は株式会社アイスリーデザイン様にご確認ください。 ■「flamingo」に関してのお問い合わせ先 株式会社アイスリーデザイン 営業本部： 担当 原島(はらしま)/野林（のばやし） お電話でのお
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
スマートフォン向けサイトに使えるjQuery UI Theme「Aristo」 | Web活メモ帳
jQueryでスマートフォン向けのアプリケーションを作成する際に使えそうなライブラリ「Aristo」を見つけたのでご紹介。 設置もクロスブラウザ対応非常に簡単にできるようになっています。 ボタン、アイコン、モーダルウインドウ、スライダー、アコーディオンメニュー、タブ、プログレスバーなどおよそ使いそうなデザインはひと通り用意されています。 HTML5向けのサイトに良さそうですね。 ダウンロードは下のリンクからどうぞ。
ブログやWebサイトをスマートフォン向けに最適化してくれるWebサービス・Mippin Mobilizer - かちびと.net
なかなか便利だなと思ってご紹介。 自分のブログなどをスマフォ向けに 最適化したいけど時間が無かったり スキルがなかなか追いつけなかっ たり、という方も多いかと思います。 Mippin Mobilizerはその最適化を してくれるWebサービスです。 要はRSSを使ってこのWebサービス上でスマフォ向けレイアウトにしてくれる、というものですので、アドレスはMippin Mobilizerのドメインを使います。この点はmobifyと同じですね。 日本でもガラケー向けに最適化してくれるサービスがあります（名前忘れた）が、そのスマフォ版のようなもの。コーディングやマークアップも知識も不要で、マウスのみで作成可能です。 アドレスを入力する 最適化したいサイトのURLを入力します。矢印をクリックすると右側にプレビューが表示されますよ。RSSが発行されていればどんなサイトでもOKです。同時にレイアウトを
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
