2016.02.29 まとめコーディングジェネレーター

コーディングがちょっと楽になるジェネレーターまとめ

先日、某案件でソースを見ていたら、
とても懐かしいものを見つけました。

「DD_belatedPNG.js」
な、懐かしい、、、

昔のIEには、本当に泣かされました、、、
でも、今となっては良い思い出ですね。

その昔、レスポンシブサイトで、IE7も対応とか、
もう訳わからん発注されたことも、今となっては良い思い出です。

respond.jsを入れて必死に対応したのを覚えています。
だって、IE7とか、「display:table;」系ことごとく使えないんだもの。

そんな話は置いておいて、コーディングの時にちょっと便利な、
ジェネレーターを紹介しようと思います。

CSSでボタンをつくってくれるジェネレーター。

ボタンって簡単なようなんですが、クリックエリアとか考えると、
意外と面倒臭いところがあったりしますよね。

そんな面倒な手間を省いてくれる便利なものです。

よくアイコンなどで使う、三角をCSSだけで作成するジェネレーターです。

ボーダーのラインの書き方を利用して、三角を作るんですね。
IE6なんて化石なブラウザにも対応しているとのこと。
凄いですね。

グラデーションを作成するツール。

iOSがフラットデザインを取り入れてから、
それ以前より使う頻度は低くなりましたが、
それでも、使うことは多々ありますね。

いちいち直書きしていられないので、
ジェネレーターを使ってサクっと書きましょう。

最後に、ジェネレーターではありませんが、
このブラウザにこのプロパティ、セレクタ支えたっけ？
という時の確認に。

ブラウザの対応・非対応が表になっていて、一目瞭然です。

例えば、マージンは最初の要素に入れるべきか、最後の要素に入れるべきか、
そういったサイトの設計時にも役に立ちますね。

コーディングを進めた後で、
「しまった！IE8なのに最後の要素にマージン入れてた！」
そんなミスも減らせます。

デザインを作成する際は、しっかりサイトの仕様を確認して作成したいですね。