PostCSS

PostCSSは、高速にCSSをごにょごにょできるツール。プラグインが沢山あって色々なことができる。

postcss/postcss
PostCSS とは何か by Yoshihide Jimbo
PostCSS まとめ
Webpack2でpostcssを使う
postcss/postcss-loader

プラグインは下記を使ってみることにした。
autoprefixer
cssnano
precss
react-css-modules

webpack2で使ってみる

$ npm install –save-dev postcss postcss-loader autoprefixer cssnano precss react-css-modules

postcss.coonfig.js

webpack.config.js

hoge.css

$ webpack

style.css

IEでみるとスクロールバーと画面のコンテンツが重なっている

参考:IE でスクロールバーがコンテンツに重なる問題を解決する

viewportが原因だそうです。今viewportの設定は、となってますが、IE11とかは、device-widthが入ってるとスクロールバーも含めてしまうらしい。CSSに下記のように書けばいいらしい。

おーできた。

画面の高さに画像サイズを合わせる

トップページのでっかい画像を画面の高さに合わせることで、スマホでもPCでも最初の表示は画面全体に画像が表示されるようにしたい。

画面の高さは、$(window).height()なんじゃないかと思っている。だから最初に、$(‘#top_img’).height($(window).height())みたいにすればいいだけなのではないかと思っております。しかし、画面リサイズ時の画像サイズ調整も考えた方がいいかもしれない。画像を入れるdivと、画像自体のサイズを変更しないといけないかもしれない。

HTML

CSS

.top_boxの背景画像は、別のところで設定している。

Javascript

これだけ。画像リサイズは考慮しなくていいと思った。

スマホでfixedをサポートするのはめんどくさい

参考:
iPhone、Android position:fixed 対応状況と対応方法
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
user-scalable=noを使う理由と弊害(スマホのviewportを見直す)

スマホではfixedがサポートされていないのがある。ios5から対応していて、Android 4.1は対応しているらしい。Android 2.3は、viewport で、content=”user-scalable=no” にすると対応されるらしい。あら、自分のAndroidは、4.1.2となってるが、fixedには対応されていないな。user-scalable=noを設定してもうまくうごかない。

今時点では確かにfixed使うと問題が多いなあ。解決は、jQuery Mobileとか、iScrollとかいうのを使う必要があるらしい。Bootstrapは大丈夫だった気がするが、あれは上記のようなツールと同じように、javascript含めて色々な調整がされているのかもしれない。

とりあえず、スマホでfixed使うのやめることにしよう。画面狭くなるしな。

いい感じにくっつけたフッターとヘッダーの間にあるコンテンツの背景を白く塗りつぶしたい

ヘッダーとフッターの間にあるコンテンツ空間はコンテンツ量によって高さが変動しますので、普通にbackgroundの背景色を設定しても、コンテンツ量が少ない場合、余白が出来てしまいます。この余白をださずに背景色で埋めたいです。

display: flexってやつが使えないだろうかと思いましたが、flexでコンテンツかこっちゃうというのは今更現実的でないので、結局javascript使っちゃうことにしました。

f = 94というのは、コンテンツのfooterと重ならないようにするためのpadding-bottomの値になります。jqueryのheight関数は、paddingを除いた高さのことみたいです。

Androidで背景画像が固定できない!!

これでPCだと問題なく固定できますし、iPhoneでも問題なく固定されます。しかしながらAndroidだと固定されません!!!

PC/スマートフォンで背景画像を固定するここに書いてある方法(下記)をやってみたら、Androidだと固定されますが、今度はiPhoneで今までのAndroidと同じように固定されなくなって笑いました。残念です。

仕方ないので、UserAgentでAndroidのときだけ、上記を適用するようにしました。

フッターをいい感じに下にくっつける

今まで僕はフッターをいい感じに下にくっつけたことがありませんでした。本日ついにいい感じに下にくっつけることが出来るようになりました。height:auto !importantというのはIE対策だそうですのでIE考えないなら不要です。wrapにcontentsとfooterを入れて、html,bodyをheight100%にして、wrapもmin-height100%にして、footerをposition:absoluteにしつつ、bottom:0にすると下にくっつきますし、コンテンツが多ければちゃんとコンテンツの最後に表示されます。基本のきだとは思いますが嬉しかったです。

CSS リストの頭に画像をずれないように表示する

LESS

CSSをシンプルに書くことができるLESS使ってみた
Twitter Bootstrapを使ったサイト構築の流れ (後編)

便利だの。twitter bootstrap3というのは、昔のbootstrapと結構違いますね。LESSというのを使っているので、勉強してみようと思いました。LESSというのはCSSの値をパッケージングできまっす。なのでbootstrapのややこしいcssも簡単にカスタマイズできるようになっているのかもしれません。

http://incident57.com/less/

これがMac用のLessコンパイラーというやつらしいです。Lessを作ってコンパイラーでCssにするそうです。twitter bootstrapは全部Lessでcssを管理しており、bootstrapのgithubにそのLessがあります。これをカスタマイズしてコンパイラーでcssにして、bootstrapのcssを入れ替えればいいそうです。

ただ、どうも、上記コンパイラだとエラーがでる。&:extend(.clearfix all)というやつに対応できていないっぽい。有料版の下記だと問題なくコンパイルできました。

http://incident57.com/codekit/

下記のようにネストもできるようです。関数的なこともできるし、計算もできるようです。いいっすね。

LESSと同じようなメタ言語として、Sass、Stylusなどがあるらしい。聞いたことはある。

twitter bootstrapの吹き出し

参考:http://getbootstrap.com/2.3.2/javascript.html#popovers

静的に吹き出しを使いたい場合は、下記のような感じでやります。

CSS3 ボタンつくってみた

スクリーンショット 2013-05-23 16.23.35

参考:
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
CSS Button Generator