それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。
") }) jQuery.noConflict()(document).ready(function(){ /**ページャーが気に入らないので修正**/ //やるべきこと // pre・next のいれかえ jQuery('span.pager-next').insertAfter('span.pager-prev') // pre/next に矢印を入れる jQuery('a[rel=next]').text(jQuery('a[rel=next]').text()+"> ") jQuery('a[rel=prev]').text("< "+jQuery('a[rel=prev]').text()) // pre/next をヘッダにもってくる //jQuery(".date.first").css("display","inline-block") jQuery('div.permalink.pager').clone().insertAfter(".date.first") jQuery("header .pager a").css("padding","0px 15px"); //pre/next をAjaxで取得してタイトルを取る。 //取得したタイトルをpre/next のタイトルに jQuery('span.pager-next,span.pager-prev').css("display","inline-block") jQuery('span.pager-next,span.pager-prev').css("width","250px"); jQuery('span.pager-next,span.pager-prev').css("overflow", "hidden"); jQuery('span.pager-next,span.pager-prev').css("white-space", "nowrap"); jQuery('span.pager-next,span.pager-prev').css("text-overflow", "ellipsis"); jQuery("a[rel=next],a[rel=prev]").each(function(idx,e){ var anchor = e jQuery.get(anchor.href,null,function(html){ jQuery(anchor).text() var title = jQuery("
").html(html).find(".entry-title").text().trim() jQuery(anchor).attr("title", title); text = jQuery(anchor).text() text = text.slice(0,10); text = text.replace(/の記事/, "の記事 ["+title+"] "); jQuery(anchor).text(text) }) }); }); })
トップ > 携帯用スタイルシートを自動切替えをCSS media query を使って実現する

携帯用スタイルシートを自動切替えをCSS media query を使って実現する

Opera Meeting Up 2010-11-07でDanielさんに教えて貰った。

CSS media query がCSS3で定義されている。

画面の width が640 以下なら携帯用表示にする。

なんてことが可能。いままで、カラム段落ち問題って言ってたのが、解決するんだよ。
なのに、Videoタグだとかそういうことに注目が言っちゃうのが悲しいよね。


細かいことは省いてコリスからサンプルを引用
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ | コリス

iPad（縦長・横長）

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

iPad（横長）

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

簡単ですね。このコリスのページのブクマ数が少ないのは何でだろう。カラムの問題は解決したのに、まだCSSを切り分けるスクリプト使ってるんかなぁ。バッドノウハウで十分なのかなぁ。