レスポンシブウェブデザインについて | CSS Radar | For Frond End Developers
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
CSS3 セレクタ チートシート
以前、CSS3 セレクタをまとめたエントリーを 3回にわたって上げましたが、それらをまとめる意味で CSS3 セレクタのチートシートを作ってみました。 本当は、サンプルソースとか、セレクタに関する説明とか色々入れようと思ったんですけど、A4 サイズ 1枚にまとめるのはスペース的に不可能だったので、単純な CSS3 セレクタ一覧になっちゃいました。残念。 CSS3 セレクタチートシート （PDF） ※PDF ファイルは URI が変わる可能性がありますので、ブクマする際はできればこのエントリーにして頂いた方が安全です。 今回、チートシートのフォーマットは、Microformats Cheat Sheet を参考に作らせてもらいました。右サイドに IE7、IE6、Firefox、Opera、Safari それぞれでの各セレクタ対応状況を簡単にまとめてあります。 なお、対応状況のチェックには、c
Wii と CSS ／miniturbo::Blog
自己紹介 詳細 しょうの です。 最近は、Wiiにはまっています。 Wiiを持っている方は、是非「Wiiばんごう」交換してください＞＜ 3395 2337 7032 7974です！ 本日のアジェンダ インターネットチャンネルとは CSSの対応状況 ネックとなる"解像度" いつでもどこでも"screen" CSS3のMedia Queryを利用する インターネットチャンネルってなに？ Wii用に作られたWebブラウザ ...とはいっても、中身はほぼOpera 9 CSS1, CSS2, CSS2.1にほぼ対応 Ajax, Flash (～7)に対応 現段階ではお試し版(正式版は3月末リリース予定) （これよりインターネットチャンネルをWii Operaと表記します）
jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる
IE6以下では、:hover擬似クラスが <a> 以外では適用されません。が、この問題の解決策が紹介されているサイトを発見しました。 » WEBFACTORY ::: BLOG: IEでhoverをa以外に効かせる » Hackadelic: csshoverを使ったWeb StandardなCSSコーディング それぞれで紹介されているとおり、Whatever:hover で配布している csshover.htc というスクリプトを使えば、IEでもいろんな要素に:hoverを適用させることが出来ます。（ダウンロードの場所がちょっとわかりづらいですが、Changes のなかにあります。） 使い方は、css で以下のように書くだけ。
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child
CSS セレクタに関するおさらい 3
前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line
備忘録030112-20／趣味のWebデザイン
平成15年1月20日 数日間、更新が滞るかもしれません。 平成15年1月20日 横山秀夫「半落ち」が直木賞を取り損ねた。選考委員の誰かが「受刑者はドナーになれないことを忘れている」などという愚にもつかない批判をして、なぜかそれが支持を得てしまったからだ。受刑者がドナーになれなくたって、物語に破綻が生じないのは明々白々。宮部みゆき「火車」が「主人公の姿が見えない」として、天童荒太「永遠の仔」が「長すぎる」として落とされた以上のバカバカしい落選。ふざけるな、と。 真保裕一が落選を繰り返しているのは百歩譲って認めてもいい。宮部みゆきも「理由」まで待たされたとはいえ、最終的に直木賞作家になったことは喜ばしい。けれども福井晴敏「亡国のイージス」や東野圭吾「秘密」「白夜行」などの落選は、どうにもなんというか「空気を読め」と。ミステリーにばっかり賞を与えていられないのでしょうけれどもね。まあミステリーフ
CSS3 の否定疑似クラスの使いどころ - lucky bag
CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。 input[type="text"]:not([size]) { width: 15em; } 上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。 自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で wi
CSS 3 セレクタ最終草案リリース - 我的春秋
CSS 3 セレクタ最終草案がほぼ予定の１ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。 ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。（残念ながら IE や Opera では未対応。） サイト内へのリンク サイト外へのリンク メールアドレスへのリンク（ダミー） PDF ファイルへのリンク（ダミー） MS Word ファイルへのリンク（ダミー） MS Excel ファイルへのリンク（ダミー） テキストファイ
Lucky bag::blog: CSS3 の Selectors と CSS3 Advanced Layout Module
増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。 E[foo^="bar"] foo 属性値が文字列 bar で始まる E 要素にマッチ E[foo$="bar"] foo 属性値が文字列 bar で終わる E 要素にマッチ E[foo*="bar"] foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ E:root ドキュメントのルートである E 要素にマッチ E:nth-child(n) 親の中で n 番目の子である E 要素にマッチ E:nth-last-child(n) 親の中で最後から数えて n 番目の子である E 要素にマッチ E:nth-of-type(n) 同じ要素名を持つ兄弟の n 番目の E 要素にマッチ E:nth-last-of-type(n) 同じ要素名を持つ兄弟の最後か
IE7 の CSS レンダリングを検証
IE7 の日本語版もリリースされ、ぼちぼち使い始める人たちも増えてきそうな今日この頃。 IE7 からは今まで Firefox 等に比べて遅れていた CSS への対応も進み、サイト制作者にとってはうれしい限りなのですが、実際 IE7 のCSS レンダリングはいかがなものか、簡単に検証してみました。 今回検証したのは、IE7 におけるボックスモデルの取り扱いと、セレクタへの対応状況。 まずはボックスモデルの検証ですが、用意したのは下記の XHTML と CSS。 <ul> <li class="first_list">First element of list</li> <li class="second_list">Second element of list is a bit longer to illustrate wrapping.</li> </ul> ul { margin:0;
hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ
記事データ 投稿者 望月真琴 投稿日時 2006-10-20T03:57+09:00 タグ CSS Firefox IE Opera まとめ 概要 IE 7 の正式版がリリースされたので、 CSS Selectors testsuite の IE 6 と IE 7 と Firefox 1.5.0.7 と Opera 9.02 での検証結果をまとめてみました。 リプライ 4 件のリプライがあります。 IE 7 の正式版が出たので CSS Selectors testsuite でチェックしてみた IE 7 の正式版がリリースされたので、かねてから便利だと思っていた、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite で紹介されていた CSS Selectors testsuite - CSS3 .
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RetujyOu.com is for sale | HugeDomains
[CSS3] FirefoxでもSafariでも見られる丸角ボックスを作る
ねこめしにっき（2002年2月下旬）