html_css

HTMLとCSSのページ

HTMLの読み取り

jQueryではセレクタを用いることでDOMを容易に取得操作できる。Pyqueryではセレクタの記法を用いてDOMをオブジェクトにできるため、パースが非常に楽。

HTML5

サイトの基本構成

ナビゲーションやフッターなどの要素を<div>ではなく、専用のタグとして<nav>や<footer>などが用意されている。

CSS3

影

文字の影、ずらし方をプラス（右下）にすると浮かんでいるように見え、マイナス（左上）にして半透明にすることで、凹んでいるように見せられる。

text-shadow: -1px -1px 0 rgba(0, 0, 0, 30);

グラデーション

モダンブラウザの場合は

background: -moz-linear-gradient(center top, #555 0%,#000 100%);

webkitを使用したブラウザ（chromeやsafari、各種スマートフォンの大半）の場合は

background: -webkit-gradient(
linear, 
left top, 
left bottom, 
color-stop(0, #555),
color-stop(1, #000));

角丸

webkitの先行実装されている方式の場合

-webkit-border-radius: 8px;
-webkit-border-radius: 8px 8px 8px 8px;

下の記述はスマートフォンでは使用不可iOS3.2とAndroid1.6で確認）

スマートフォン向けのサイト

新しめな分野なだけあり、最新の技術を使用してもある程度ブラウザ間の互換性を保つことができる。（メジャーなiPhone,Android,BlackBerry,Nokiaなどは、いずれもwebkitを使用したブラウザを搭載している）このため、HTML5やCSS3の使用も比較的安易に行える。ただし、解像度まわりに関しては特にAndoridはメーカー毎にコアになる部分をいじっているため、表示を揃えるのが非常に困難。

サンプル

Q&A