html5-wordpress

html5で作るWPオリジナルテーマ:2

は、

  • フラットデザインって何?
  • フラットデザインに有効利用したいcss

を行いました。

フラットデザインって何?

フラットデザインの話をする中で、真中さんが「フラットデザインはユニバーサルデザインに通じるなあ」と言っていたのが印象に残りました。
まとめを書いていたら長くなったので、別のエントリーにまとめました。流行に終わらないフラットデザインのポリシーをお読みください。

フラットデザインに有効利用したいcss

フラットデザインのついでに、いくつかの新しいcssの技術を覚えましょう。

box-sizing

cssのボックスモデルでは、パディングとボーダーを幅と高さに含めません。box-sizingプロパティを使うと、パディングとボーダーを幅と高さに含めるように設定を変える事ができます。
MDN : box-sizing

calc

MDN : calc
calcはcssの値で「長さ」や「整数」などの指定に四則演算を使える仕組みです。

vw,vh,vmin,vmax

MDN : Length

vh

ビューポートの高さの 1/100

vw

ビューポートの幅の 1/100

vmin

ビューポートの高さまたは幅の、最小値の 1/100

vmax

ビューポートの高さまたは幅の、最大値の 1/100

真中さんがいくつかを試してくれました。css3で簡単横並びレスポンシヴデザインも、あわせてお読みください。

html5で作るWPオリジナルテーマ:2」への2件のフィードバック

  1. ピンバック: 2013-6-14 勉強会 | パソコン倶楽部りんご

  2. ピンバック: 2013-6-21 勉強会 | パソコン倶楽部りんご

コメントを残す

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

CAPTCHA