レスポンシブウェブデザインにするためにSusy – Responsive Grids for Compass

レスポンシブウェブデザインについて

あらゆるデバイスにwebの表示を合わせます。webを見てくれる方へ見やすく表示することが出来ます。
よっぽど大事な情報では無い限り、表示が見にくく拡大などしないとみれないwebページの場合は、僕はそっと閉じています。
大事な情報ではないと思っても表示が見やすいと読んでしまう時がある。

スマホなどへの対応としていくつか方法があります。

更新記事などのURLは同一にしたい。
プラグインで対応したり、スマホ用に別サイトを作り表示デバイスにより振り分けたり、しかしgooglebotごとにクロールする必要があったりとシンプルじゃないなぁと思ったりもすることがあるので、レスポンシブデザインで制作しようと。
でも、いずれの手法でもスマホなどに対応してないより対応するほうが大事だと思います。

続きを読む “レスポンシブウェブデザインにするためにSusy – Responsive Grids for Compass”

SCSS rem,config.rbに記述して演算桁数を増やす方法

どうもです。もうすぐtwentythirteenのテーマがでてくるのかなぁ。なんて思っていますけどtwentytwelveのテーマcssでなんだろうと疑問に思い調べてみたことをちょこっと

/* =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 )
}

cssの先頭に書いてある記述ですが、なんですかこの桁数は?と、わざわざ計算してるはずないよねと思うわけでScssで計算しコンパイルしているだろうとmixinを作り出力したら5桁までだとしかられて、、ふむ。なぜ9桁までだしているのか疑問に思い調べてみるとブラウザにより5桁までだと9桁の時と比べておよそ3pxずれる可能性がある模様、、ふむ。それで9桁まで出力しているのかと9桁に変えたかったわけです。
続きを読む “SCSS rem,config.rbに記述して演算桁数を増やす方法”