今回は
紹介します。
（以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ）
リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。
その色が設定出来るんです。
今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。
iOS・Androidのハイライト表示の設定について
まず初めに。
今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。
CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。
HTML５ではコンテンツの構造的な区切りにsectionを使うのが基本である。
それらの中でも特定の役割を持つものにはnav、article、aside、hgroupなどを用いる。
これらはセクションという性格を備えつつ、さらに特定の役割を持つことに理解をしておこう。
セクション定義要素の中では、通常のブロックレベル要素で内容をマークアップすればよい。
divはCSS適用の為に限定的に使い、構造を示す目的では使わない。
(WebDesigning 2011 11月号より)
こんな感じで、マークアップについてはその他いろいろあるのですが、
HTML5ではこれまでより、
よりマークアップについて細かく記述しなければならなくなりました。
今回は、ページの構造を示すセクションについてお話を。
(more…)
ｊQuerymobileのblogページにて。
１０月１９日の記事です。
「ｊQuerymobile1.0RC2がリリースされました」
とのことです。
そして、そこに、以前「jQuery mobileでiphoneぽい日時セレクト画面。」で書いた
日付・時間をいっぺんに選択でき、iphoneのようにくるくる選択出来る仕様のものが！
←クリックでブログページ行けます。
しかも今回はHTML５を使用したinputタグの入力タイプで出すことができるようです。
中身の量が違うボックスを指定するだけで、
そのボックスのheightを同じ高さに揃えられるというjsを紹介します。
私がコーディングするときにいつもお世話になっているDreamweaver。
いろんな機能があって、便利ですよね。
私は全て使っているわけではないですが、自分なりに使いやすくカスタマイズしています。
その中で、「こんな機能があったらいいのになあ・・」と思っていた?機能。
KAYACが作っていました！
先日、読んだ本の紹介。
とりあえず、読む人は
HTML・CSSなどが分かっていることが大前提。
そして、DWを使ったことある、サイト制作をしたことがある、という人のが分かりやすい
といった内容でした。
一言でいうと、「読みやすい！」本でした。
・ブラウザには、初期状態で適用されるスタイルがある
・各要素に対して文字の装飾やマージンなどの指定がされる
・強制的なスタイルがオリジナルスタイルの邪魔になることがある
などなど。
そんなデフォルトで適用されてしまうスタイルを”リセット”するのがリセットスタイルです。
高さが異なるボックスをきれいに並べる際、便利なプラグインです。
このようなデザイン、たまに見かけます。
cssではちょっと工夫が必要なレイアウトですが、この、「jQuery Masonry」を使うと、きれいに・簡単に出来るんです。
ちょっと見にくいかもしれませんがサンプルを・・・
CSS3:opacityとrgba()を使用した透明度の指定。
今回は画像やボックスを半透明にする方法を紹介します。
使うのはCSS3。
使えるブラウザはIE9・Firefox・Chrome・Safari・Operaです。
また、-webkit-や-moz-のようなベンダープレフィックスの必要もないようです。
(more…)
画像を選択できる、セレクトボックス。
そんなセレクトボックスが使える、ｊQueryのプラグイン。
デモ：http://www.sprouthead.com/sample/blog_test/page_jquery/20111007_select.html
