CSS3の講座に行ってきました

29

9月

2011

某イベントのじゃんけん大会であたった無料WEB講座券を使用して、
CSS3の講座に行って来ました。

CSS3自体はそれなりに知っていたけど、なんとなく使っている部分もあり、
CSS3の知識を整理・深めることが目的です。

以下、自分用にメモ。

プログレッシブエンハンスメント

コンテンツにフォーカスを当てた考え方で、
最新技術に対応しているブラウザにはその機能を使い、そうでないブラウザは機能はなくとも、
コンテンツだけは問題なく見られるよう提供するという考え方。

nth-childとnth-of-type

要素を取得するセレクタ。似ているが、取得する要素が異なる

html

<dl>
	<dt>リスト1</dt>
	<dd>リスト1の内容</dd>
	<dt>リスト2</dt>
	<dd>リスト2の内容</dd>
	<dt>リスト3</dt>
	<dd>リスト3の内容</dd>
</dl>

css

dt:nth-child(3);

「<dt>リスト2</dt>」が取得される

dt:nth-of-type(3);

「<dt>リスト3</dt>」が取得される

linear-gradient

古いバーションのwebkit系ブラウザではlinear-gradientではなく、gradientプロパティとして実装されている。

E:empty

tableの空要素などに使える

td:empty {background:#f00}

box-orient:vertical & box-ordinal-group

display:box時に横並びではなく、縦並びにできる。
box-ordinal-groupと組み合わせることで、表示順を変える事ができる。
もちろん、横並びの順番も変えられる。

html

<div id="a">
	<div id="b">bbb</div>
	<div id="c">ccc</div>
</div>

css

#a{
    width:400px;
    display:-webkit-box;
    display:-moz-box;
    display:box;
    -webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	box-orient:vertical;
}
#b{
	-moz-box-ordinal-group:2;
	-webkit-box-ordinal-group:2;
	box-ordinal-group:2;

}
#c{
	-moz-box-ordinal-group:1;
	-webkit-box-ordinal-group:1;
	box-ordinal-group:1;
}

これはHTMLは正しい文書構造で、見た目は変えたいという時に使える。

スマホサイト時のアドレスバーの消し方

window.addEvnetListener("load",function(){
  setTimeout(scrollTo,100,0,1)
},false);

その他メモ

  • Android2.2以前は機種によって表示に差異があることをクライアントに理解してもらう必要がある
  • 開発のプレビューはMacユーザーはiPhoneシュミレーターを使うと便利
  • Androidエミュレータは重い、仕様が頻繁に変わる
  • リンクの領域は44px以上にする
  • viewportの設定で、「maximum-scale」を取ればピンチインができるが、横にした際大きく表示される。


Tags:CSS3,セミナー・勉強会

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック:http://blog.orangemittoo.net/post/css3_seminar/trackback/