みなさんこんにちは。
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。
前回に引き続き、9月下旬に行われた「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！
午前中はHTML5についての話題でしたが、
午後はCSS3についてのセッションが開催されました。
CSS3からは、属性の一部を抜き出してくれるセレクタが一気に追加されました。以下一覧です。
E[foo^="bar"] 属性fooの値が「bar」で始まる場合に適用
E[foo*="bar"] 属性fooの値の一部に「bar」が含まれる場合に適用
E[foo$="bar"] 属性fooの値が「bar」で終わる場合に適用
(※以下、Eは要素(タグ名のことです)を指しています)
例えばdivタグの中の「idがmenuから始まるものだけ」に対して文字を赤くしてみます。
今まではそのタグに「class="red"」と指定する・・なんてことをしないといけなかったのですが、
div[id^="menu"] {
color: red;
}
と書けばできるようになりました。
CSS3で追加された主な擬似クラスは以下のとおりです。
E:nth-child(n) 同じ親要素内の最初からn番目の要素に適用
E:nth-last-child(n) 同じ親要素内の最後からn番目の要素に適用
E:only-child 指定した要素が親要素内で唯一の場合に適用
E:first-of-type 同じ親要素内の最初の要素に適用
E:last-of-type 同じ親要素内の最後の要素に適用
E:nth-of-type(n) 同じ親要素内の最初からn番目の要素に適用
E:nth-last-of-type(n) 同じ親要素内の最後からn番目の要素に適用
E:only-of-type 指定した要素がひとつの場合に適用
E:empty 空の要素に適用
擬似クラスを使うと、例えばリストの１行目だけ灰色にして太字にしたい！とか、リストの奇数行目を白に、偶数行目を黄色にしたい！ということが簡単に実現できるようになります。
li:nth-child(1) {
background-color: gray;
text-weight: bold;
}
と指定すればできるようになります。
簡単ですね！
nth-child を応用して、
li:nth-child(odd) {
background-color: white;
}
li:nth-child(even) {
background-color: yellow;
}
と指定すれば、１行ごとに交互に色がついたリストを作れるようになりました。
ほかにも便利なクラスがたくさんあります。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときに便利になりそうです。
Android、iPhoneではほとんど対応していますが、一部のPCブラウザではほぼ全滅のようです。PCサイトの場合ユーザーの使っているブラウザシェアを見極めながら判断したほうがよさそうですね。
気になる機能はスマフォでもチェックしていました！
ここでは特に重要だと思った「box」、「border-radius」、「shadow」に絞ってまとめてみようと思います。
CSS2ではレイアウトを作るとき、ボックス要素に対してfloatを設定し、横並びにさせて・・・としてきましたが、CSS3からは新しく「ボックスレイアウト」という考え方が登場しました。
横並びレイアウトにしたい要素達をまとめる「１つ外側の要素」に対してdisplay:box を使うことで中の要素が横並びになり、floatではうまくできなかった各要素の高さも一番高いものに合うようになります。各要素を%指定で横ならびに配置して、さらにマージンを指定・・なんてこともできるようです。
(現状ではdisplay: -webkit-box; (おもにsafariやchrome、iOSやAndroid向け)、display: -moz-box; (おもにfirefox向け)というようにブラウザごとに設定します。)
「box-original-group」
中に作られたブロック要素の表示順を変えることができます。HTMLの記述に関係なく順序を変えられます。
「box-flex」
中の要素で横幅を可変にしたいものがある場合、ブラウザが自動的に横幅を計算して適切な長さを指定してくれます。
「box-sizing」
CSS2まではpaddingとmargin(ボックスの余白)が横幅とは別に計算されていたため横並びのレイアウトの時にうっかり計算間違いをするとうまくレイアウトができなかったのですが、「box-sizing」プロパティを使うと横幅の値にmarginやpaddingを含めるかどうかCSS側から指定できるようになりました。
CSS3からは枠線の角の丸みをCSSからコントロールできるようになりました。
角の丸さはピクセル数で指定でき、また角ごとに別の値を指定することもできるので便利です。
(これも現状では-webkit-border-radius: 10px; (safariやchrome、iOSやAndroid向け)や-moz-border-radius: 10px; (おもにfirefox向け)とブラウザごとに設定しておいたほうが丁寧なようです。)
Androidでは要注意
Androidではborder-radiusを指定すると表示に時間がかかってしまい、スクロールしたときにカクカクした動きになったり、スクロールに追いつかなくなることがあるのでスマフォ用のサイトに使うときは注意が必要なようです。
シャドウには
・text-shadow(テキストに影をつける場合)
・box-shadow(ボックス要素に影をつける場合)
の２つしかありませんが、
・影の色
・ずれ具合(ピクセル単位)
・ぼかし具合
・ぼかし距離
を設定することができ、複数の影も指定することができるので、うまく組み合わせれば
・エンボスのように浮き出て見える効果
・光っているような効果
・暗闇にぼやっと浮かび上がるような効果
が、CSSだけで作れるようになりました。
実例が載ったサイトがたくさんありますので、
「CSS3 シャドウ」で是非検索してみてください！
休憩時間には海をながめながらゆっくり。夕日がきれいでした！
CSS3のアニメーションは
・プロパティの変化を操る CSS3 Transitions
・フレームを操る CSS3 Animations
の２種類に分けられます。
どちらもCSSで設定されたプロパティを設定した時間にあわせて少しづつ適応させてくれるすごく便利な機能なんですが、指定方法が少し違います。
CSS3 Transitionsは
「背景色を３秒かけて白にして！エフェクトはease-inで！」
CSS3 Animationsは
「背景色をキーフレームに従って３秒かけて実行して！繰り返しは４回！」
・・わかりませんよね。。
Transitionには「transition-timing-function」という指定ができます。
「エフェクトはease-inで！」のところです。
これは「イージング」とも呼ばれていますが、「最初ゆっくりで次第に早くなって最後まやゆっくり」とか「ボールがバウンドするような動き」といった変化させるタイミングやその割合のパターンのことです。何も指定しないと一定のスピードで次第に変化していくアニメーションとなりますがこれを指定することで変化に動きをつけて、リアルなアニメーションを手軽に作ることができるようになります。
Animationでは「transition-timing-function」の代わりに
「キーフレーム」に従ってアニメーションを作ります。
「キーフレーム」はCSSに記述することができるので、お手軽さはなくなりますが、より細かい動きを指定して動きを細かくコントロールできるようになります。また回数の指定もできるので、繰り返しアニメーションを動かすことがかんたんにできます。
こちらも実例がたくさんありますので
「CSS3 animation」で検索してみてください！
長々と書いてしまいました。
１日缶詰になって集中したおかげで、飛躍的に理解が深まった気がします。最後までお付き合いいただき、ありがとうございました！
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。
前回に引き続き、9月下旬に行われた「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！
午前中はHTML5についての話題でしたが、
午後はCSS3についてのセッションが開催されました。
３ CSSセレクタについて
①属性セレクタ
CSS3からは、属性の一部を抜き出してくれるセレクタが一気に追加されました。以下一覧です。
E[foo^="bar"] 属性fooの値が「bar」で始まる場合に適用
E[foo*="bar"] 属性fooの値の一部に「bar」が含まれる場合に適用
E[foo$="bar"] 属性fooの値が「bar」で終わる場合に適用
(※以下、Eは要素(タグ名のことです)を指しています)
例えばdivタグの中の「idがmenuから始まるものだけ」に対して文字を赤くしてみます。
今まではそのタグに「class="red"」と指定する・・なんてことをしないといけなかったのですが、
div[id^="menu"] {
color: red;
}
と書けばできるようになりました。
②擬似クラス
CSS3で追加された主な擬似クラスは以下のとおりです。
E:nth-child(n) 同じ親要素内の最初からn番目の要素に適用
E:nth-last-child(n) 同じ親要素内の最後からn番目の要素に適用
E:only-child 指定した要素が親要素内で唯一の場合に適用
E:first-of-type 同じ親要素内の最初の要素に適用
E:last-of-type 同じ親要素内の最後の要素に適用
E:nth-of-type(n) 同じ親要素内の最初からn番目の要素に適用
E:nth-last-of-type(n) 同じ親要素内の最後からn番目の要素に適用
E:only-of-type 指定した要素がひとつの場合に適用
E:empty 空の要素に適用
擬似クラスを使うと、例えばリストの１行目だけ灰色にして太字にしたい！とか、リストの奇数行目を白に、偶数行目を黄色にしたい！ということが簡単に実現できるようになります。
リストの１行目だけ灰色にして太字にする
li:nth-child(1) {
background-color: gray;
text-weight: bold;
}
と指定すればできるようになります。
簡単ですね！
奇数行目が白、偶数業目が黄色の、交互に色のついたリストを作る
nth-child を応用して、
li:nth-child(odd) {
background-color: white;
}
li:nth-child(even) {
background-color: yellow;
}
と指定すれば、１行ごとに交互に色がついたリストを作れるようになりました。
ほかにも便利なクラスがたくさんあります。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときに便利になりそうです。
③スマフォはほとんど対応しているが、PC版のブラウザは要注意
Android、iPhoneではほとんど対応していますが、一部のPCブラウザではほぼ全滅のようです。PCサイトの場合ユーザーの使っているブラウザシェアを見極めながら判断したほうがよさそうですね。
４ CSS3のプロパティについて
気になる機能はスマフォでもチェックしていました！
ここでは特に重要だと思った「box」、「border-radius」、「shadow」に絞ってまとめてみようと思います。
①新しいレイアウトの考え方「Box」
CSS2ではレイアウトを作るとき、ボックス要素に対してfloatを設定し、横並びにさせて・・・としてきましたが、CSS3からは新しく「ボックスレイアウト」という考え方が登場しました。
横並びレイアウトにしたい要素達をまとめる「１つ外側の要素」に対してdisplay:box を使うことで中の要素が横並びになり、floatではうまくできなかった各要素の高さも一番高いものに合うようになります。各要素を%指定で横ならびに配置して、さらにマージンを指定・・なんてこともできるようです。
(現状ではdisplay: -webkit-box; (おもにsafariやchrome、iOSやAndroid向け)、display: -moz-box; (おもにfirefox向け)というようにブラウザごとに設定します。)
Boxでで使える主なプロパティ
「box-original-group」中に作られたブロック要素の表示順を変えることができます。HTMLの記述に関係なく順序を変えられます。
「box-flex」中の要素で横幅を可変にしたいものがある場合、ブラウザが自動的に横幅を計算して適切な長さを指定してくれます。
「box-sizing」CSS2まではpaddingとmargin(ボックスの余白)が横幅とは別に計算されていたため横並びのレイアウトの時にうっかり計算間違いをするとうまくレイアウトができなかったのですが、「box-sizing」プロパティを使うと横幅の値にmarginやpaddingを含めるかどうかCSS側から指定できるようになりました。
②枠線を角丸に「border-radius」
CSS3からは枠線の角の丸みをCSSからコントロールできるようになりました。
角の丸さはピクセル数で指定でき、また角ごとに別の値を指定することもできるので便利です。
(これも現状では-webkit-border-radius: 10px; (safariやchrome、iOSやAndroid向け)や-moz-border-radius: 10px; (おもにfirefox向け)とブラウザごとに設定しておいたほうが丁寧なようです。)
Androidでは要注意Androidではborder-radiusを指定すると表示に時間がかかってしまい、スクロールしたときにカクカクした動きになったり、スクロールに追いつかなくなることがあるのでスマフォ用のサイトに使うときは注意が必要なようです。
③文字や枠に影を設定する「shadow」
シャドウには
・text-shadow(テキストに影をつける場合)
・box-shadow(ボックス要素に影をつける場合)
の２つしかありませんが、
・影の色
・ずれ具合(ピクセル単位)
・ぼかし具合
・ぼかし距離
を設定することができ、複数の影も指定することができるので、うまく組み合わせれば
・エンボスのように浮き出て見える効果
・光っているような効果
・暗闇にぼやっと浮かび上がるような効果
が、CSSだけで作れるようになりました。
実例が載ったサイトがたくさんありますので、
「CSS3 シャドウ」で是非検索してみてください！
５ CSS3のアニメーションについて
休憩時間には海をながめながらゆっくり。夕日がきれいでした！
①大きく分けると２種類
CSS3のアニメーションは
・プロパティの変化を操る CSS3 Transitions
・フレームを操る CSS3 Animations
の２種類に分けられます。
どちらもCSSで設定されたプロパティを設定した時間にあわせて少しづつ適応させてくれるすごく便利な機能なんですが、指定方法が少し違います。
CSS3 Transitionsは
「背景色を３秒かけて白にして！エフェクトはease-inで！」
CSS3 Animationsは
「背景色をキーフレームに従って３秒かけて実行して！繰り返しは４回！」
・・わかりませんよね。。
②Transitionsの設定
Transitionには「transition-timing-function」という指定ができます。
「エフェクトはease-inで！」のところです。
これは「イージング」とも呼ばれていますが、「最初ゆっくりで次第に早くなって最後まやゆっくり」とか「ボールがバウンドするような動き」といった変化させるタイミングやその割合のパターンのことです。何も指定しないと一定のスピードで次第に変化していくアニメーションとなりますがこれを指定することで変化に動きをつけて、リアルなアニメーションを手軽に作ることができるようになります。
③Animationsの設定
Animationでは「transition-timing-function」の代わりに
「キーフレーム」に従ってアニメーションを作ります。
「キーフレーム」はCSSに記述することができるので、お手軽さはなくなりますが、より細かい動きを指定して動きを細かくコントロールできるようになります。また回数の指定もできるので、繰り返しアニメーションを動かすことがかんたんにできます。
こちらも実例がたくさんありますので
「CSS3 animation」で検索してみてください！
長々と書いてしまいました。
１日缶詰になって集中したおかげで、飛躍的に理解が深まった気がします。最後までお付き合いいただき、ありがとうございました！
