Hatena::ブログ(Diary)

ミショニポー このページをアンテナに追加 RSSフィード

Feedback

Menu Tags

2011-06-18

メディアクエリ(CSS3 media queries)とその周辺

先日、Gridressのメモを書いた。

メディアクエリに関する話題は事欠かないようで、今日は、Regions.js

どんなものなのか?

以下のhtmlブロックでarticleの中身を、 article-region のブロックに流し込みますよというもの

    <div id="article">
      <p>1Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>      ...
      <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="article-region" id="article-region-1"></div>
    <div class="article-region" id="article-region-2"></div>
    <div class="article-region" id="article-region-3"></div>
</div>

単純なブロックに流し込めるだけでなく、もう少しすごいよみたいな空気

CSS3 regions: Rich page layout with HTML and CSS3 | Adobe Developer Connection

f:id:tenman:20110619054130p:image

日本語では、まだ使えなさそうですが、皆、メディアクエリに 関心 集中?

CSS3html5は、とても新鮮なものですが、だからといって、例えば、メディアクエリは、完成されたものでもなく、もう2年も前から紹介されているもので、そんなに新しい物でもない

むしろ、こういったものが多くのWEBパブリッシングにかかわる人に受け入れられるものかどうか計り、標準化の計画をしているのだろうと思う。

ただ、htmlCSSだけで私たちは、パブリッシングのすべてをまかなっているわけではありません。

もう一方では、ユーザーエージェントもどんどん変化していくことでしょう。

例えば、PHPサーバサイドのものですから、ユーザーのブラウザのサイズを直接とることはできませんが、

<script language="javascript">
//if (window.location.search == "") {
<?php if(!preg_match('!(width=|height=)!',$_SERVER['QUERY_STRING'])){?>
window.location.href = window.location + "?width=" + screen.width + "&height=" + screen.height;
<?php }?>
//}
</script>

みたいな事をすれば、うまくいくかもしれないとか、組み合わせたりすることで、いろいろな工夫ができます。

だから、ルールの奴隷になる必要はなくて、むしろ、そういう工夫のほうが楽しいことが多いと思っている

memo

CSSnamespace ちょっと

<?xml version="1.0" encoding="utf-8"?>
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta name="author" content="" />
	<link rel="help" href="http://d.hatena.ne.jp/tenman/20110618" />
	<title></title>
	<style type="text/css">
		@namespace tenman url(http://www.w3.org/1999/xhtml);
		tenman|p{display:none;}
		tenman|p.color{color:red;display:block;}
	</style>
</head>
<body>
	<p>表示されない段落。</p>
	<p class="color">test</p>
</body>
</html>

CSS名前空間を指定することができます。

ChromeFirefoxでは上のhtmlソースで、testは、赤色で、表示されない段落は表示されません

namespace urlに http://www.w3.org/1999/xhtml シカ使えないのは何故?

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tenman/20110618/p1
TOP
keywordcloud
人力検索はてな はてなアンテナ はてなブックマーク はてなダイアリー はてなフォトライフ はてなグループ はてなグラフ はてなアイデア はてなスター はてなメッセージ はてなワールド はてなハイク Rimo
ページビュー
1110378

サービス

メモや備忘

ナンダーリン カンダリーン

カレンダー
<< 2011/06 >>
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
プロフィール

最近のコメント

砂場