先週、新しいWordPressのデフォルトテーマ、Twenty Twelveが公開されたので、
早速ローカルにインストールしてみました。

こんな感じにすっきりしたテーマになってます。

WordPress3.5 beta1も公開されたので、せっかくなのでWordPress3.5 beta1＋Twenty Twelveでスクリーンショットをとってみました。

これから色々いじってみる予定なのですが、まずはstyle.cssをさぁ〜っと眺めて気づいたことをメモ。

スタイルシートがすっきりしたっぽい

Twenty Elevenに比べてCSSが1000行近くも短くなっています。

Twenty Elevenが約2700行、Twenty Twelveが1685行、この差はけっこう大きいんんじゃないでしょうか。

これを見ただけでもカスタマイズしやすそうな気がしてきます

フォントサイズがremベースになってる

rem というのはCSS3で出てきた新しいフォントサイズの単位で、
htmlのフォントサイズを元にフォントサイズを設定するものです。

今まで%とかemとかでフォントサイズを決めることが多かったですが、
これには「継承」という厄介な問題があって、
意図しない大きさで表示されちゃたりすることがありました。

ulの入れ子とかで、フォントサイズがどんどんおっきくなっちゃって、
あれれれ？？？となったことのある方もいらっしゃるんじゃないでしょうか？

rem はその問題がなくなるので、フォントサイズの決め方がとっても楽になります。

ただしCSS3未対応のブラウザでは残念ながら使えないので、今のところpx指定も
同時にしてあげないといけません。

例えば437行目

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
     font-size: 87.5%;
}
body {
     font-size: 14px;
     font-size: 1rem;
     font-family: Helvetica, Arial, sans-serif;
     text-rendering: optimizeLegibility;
     color: #444;
}

こんな感じでpxと合わせて指定します。

マージンやパディングもremベースになってる

フォントサイズがrem指定になったことに合わせて
マージンやパディングもremベースになっていました。

たくさん書いてあるのでどこでもいいんですけど、　470行目

/* Page structure */
.site {
     padding: 0 24px;
     padding: 0 1.714285714rem;
     background-color: #fff;
}

とか730行目

.entry-content p,
.entry-summary p,
.comment-content p {
     margin: 0 0 24px;
     margin: 0 0 1.714285714rem;
     line-height: 1.714285714;
}

とか。

Twenty Elevenでは基本的に%指定でした。

これは何が違うかっていうと、マージンやパディングをフォントサイズに対する割合で決めてるので、当然フォントサイズが変わればその部分も変わります。

例えばレスポンシブで、画面サイズに合わせて読みやすいようにフォントサイズを指定したときなんかにも、余白なんかがそれにうまくマッチしてくれることになりますね。

もちろんレスポンシブ

Twenty TwelveもTwenty Elevenに引き続きレスポンシブです。

1351行から始まる部分。最小幅600pxの記述がここからはじまります。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {


.......

1514行め。最小幅960pxの記述がここからはじまります。

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) 
....

意外にすっきりしてました。

すべてのサイズに共通する部分をはじめに記述して、
600pxからのタブレットサイズ、960pxからのPCサイズ、という記述順です。

このようにすると、複雑になりがちなレスポンシブの記述も比較的すっきりさせることができます。

いわゆるモバイル・ファーストと呼ばれるやり方ですね。

いや、rem基準って言ったって計算余計わかんないから

レスポンシブの面倒なのは、スタイルシートに小数点以下延々と続く数字が書いてあってもそれを見ただけじゃいったい何を基準にした数字なのかさっぱりわからないことじゃないでしょうか？

CSSにどんな計算したかコメントでもあればまだしも、複雑になってくると、もう何がなんだか。。ってなりやすいです。

でもTwenty Twelveはスタイルシートの最初コメントにちゃんと書いてくれてました！

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
     padding: 5px 0;
     padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
     font-size: 16px
     font-size: 1.142857143rem; (16 / $rembase)
     line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
     margin: 24px 0;
     margin: 1.714285714rem 0; ( 24 / $rembase )
}

remのベースが14px。line-heightが24。これを基準に計算してね、ってことみたい。

最初のところは5pxのpaddingは5÷14で0.357142857になるよって事です。
フォントサイズを16pxにしたかったら16÷14で　1.142857143。

というように計算の仕方が書いてあります。

これを見ながらやれば、変更もしやすいですね。
よかったよかった。

というわけで、駆け足でTwenty TwelveのCSSを眺めてみたわけですが、
とってもすっきりしたテーマですし、CMSよりになっているという話もあります。
CSS的にもいじりやすそうな雰囲気がしてるので
これから実際にさわってみて色々やってみたいなーと思っています。

ではでは。