とは、
- フラットデザインって何？
- フラットデザインに有効利用したいcss
を行いました。
フラットデザインって何？
フラットデザインの話をする中で、真中さんが「フラットデザインはユニバーサルデザインに通じるなあ」と言っていたのが印象に残りました。
まとめを書いていたら長くなったので、別のエントリーにまとめました。流行に終わらないフラットデザインのポリシーをお読みください。
フラットデザインに有効利用したいcss
フラットデザインのついでに、いくつかの新しいcssの技術を覚えましょう。
box-sizing
cssのボックスモデルでは、パディングとボーダーを幅と高さに含めません。box-sizingプロパティを使うと、パディングとボーダーを幅と高さに含めるように設定を変える事ができます。
MDN : box-sizing
calc
MDN : calc
calcはcssの値で「長さ」や「整数」などの指定に四則演算を使える仕組みです。
vw,vh,vmin,vmax
vh
ビューポートの高さの 1/100
vw
ビューポートの幅の 1/100
vmin
ビューポートの高さまたは幅の、最小値の 1/100
vmax
ビューポートの高さまたは幅の、最大値の 1/100
真中さんがいくつかを試してくれました。css3で簡単横並びレスポンシヴデザインも、あわせてお読みください。
ピンバック: 2013-6-14 勉強会 | パソコン倶楽部りんご
ピンバック: 2013-6-21 勉強会 | パソコン倶楽部りんご