[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめCSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめiPhone, iPadなどのモバイル用にスタイルシートを分けるためのフレームワークを紹介します。 Hardboiled CSS3 Media Queries [ad#ad-2] スタイルシートの分け方は2種類あります。 プロパティ単位 ファイル単位 プロパティ単位でデバイスごとにスタイルシートを設定 「/* Styles */ 」の箇所にスタイルシートを記述。 スマートフォン（（縦長・横長）
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
Less Framework
An adaptive CSS grid system. What It Is Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Default Layout 10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width
【レポート】黄金比でどのスクリーンにも適したデザインを「Less Framework 3」 | エンタープライズ | マイコミジャーナル
Less Framework is a cross-device CSS grid system based on using inline media queries. iPhone、iPad、PC、Androidベースのスマートフォンやタブレットデバイスなど、インターネットを利用するデバイスの多様化が進んでいる。スクリーンサイズの異なるデバイスで動作するブラウザ向けにそれぞれ最適化されたWebデザインを提供するテクニックのひとつに、CSS3で策定が進められているメディアクエリを使う方法がある。このテクニックをベースにして開発されたCSSフレームワークのひとつにLess Framework 3がある。 Less Framework 3は、言ってしまえばデバイスのスクリーンサイズや表示領域サイズに応じて幅を変更するシンプルなフレームワークだ。Less Framework 3のサイトにアクセ
携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About
携帯サイトの作り方 第1回 作成方法の基礎携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。 (注) 本記事の解説は、ガラケーサイトの作成方法です。 本記事は、ガラケー(フィーチャーフォン)端末向けのウェブサイトを作成する方法の解説です。スマートフォン端末向けのウェブサイトの作成方法ではありませんのでご注意下さい。スマートフォン向けモバイルサイトの作成方法に関しては、下記の記事などをご参照下さい。 スマートフォン対応サイトを作る際の注意点 レスポンシブ・ウェブデザインの簡単な作り方 レスポンシブCSSで使うブレイクポイントの決め方 モバイルファーストでデザインする際のCSSの書き方 ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選
![携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/99ea29bf657cd4dbe096c25bd4423077e189e7a5/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F9%2F9%2F201610192029%2Ftopimg_original.jpg)
iモードHTMLとiモードXHTMLを正しく切り替える方法 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
最近発売されているドコモの機種（FOMA）のブラウザにはたいてい iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。 例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、 iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。 これは、携帯電話が機能向上するのと並行して、 携帯に対応したHTMLもバージョンアップを繰り返すためです。 このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。 さて、携帯サイトを作成する際のポイントについてふれますが、 多くの方が勘違いされているのは、 ドコモの機種が割と新しい機種、つまりX
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
