BLOGcssを書く人がブクマしておきたいジェネレーターサイト8選2015/02/04タムラツイートマークアップの田村です。今回は自分が使用している便利なジェネレータを紹介しようと思います。これだけブックマークしておけば迷った時にすぐ使用できます。コードから一気にcss作成「OneClickCSS」http://css.miugle.info/抜粋:OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。id,class名CSS、子孫セレクタCSS、セレクタCSS、Less、Sacc、Scssを1クリックで生成します。サイト内に記載がある通り、タグにclass、idを振ったhtmlコードを書いた後に上記サイトにソースをいれこんでクリックするだけで簡単にCSSを作成してくれます!sassなどにも対応しているので、とても便利です。htmlコードを一通り書いた後は「OneClickCSS」で生成してからcssを書きはじめることで時短と記述ミスが防げます。Generator」http://www.colorzilla.com/gradient-editor/よく使用するプリセットなども保存しておけるので便利!グラデーションを作成してぽちっとコピーしてソースに貼り付けるだけで、cssが反映されます。generator」http://apps.eky.hk/css-triangle-generator/cssでarrowなどの矢印を作成する場合、画像を書き出していることも多いのではないでしょうか。このジェネレーターを使用しcss作成することによって画像を書き出す手間がなくなりますDirection矢印方向Typesizeで変更できる箇所が変わります。Direction→正三角形isosceles→二等辺三角形Scalene→不等辺三角形size三角形のサイズを入れますcolor色を入れます。あとは右側にcssと記載されている箇所がありますのでそこをコピーするだけです。cssの:beforeで設定してあげて下さい。シェイプをcssで作成したい場合下記サイトもおすすめ。Shapesボックスのシャドウを簡単に生成「box-shadowジェネレーター」http://www.bad-company.jp/demos/box-shadow/ボックスにシャドウをcssで付けたいときに使用します。各値を変更することでソースコードの値が変更されるのでコピーしてから、コーディングしているcssにペーストするだけでcss3のbox-shadowが適用されます。CONVERTER」http://css2sass.herokuapp.com/cssをsassに変更できます。昔cssで書いたのをsass/scssで書きたい場合や、一部の箇所をsass/scssに変更するのにとても便利です。画面もとてもシンプルで使いやすいです。Generator」http://css3button.net/ボタンが簡単にcss3で作成できます。画像で多用をしないことで軽量化にもつながるかと思います。色変更やパターン変更も楽に作成できます。変更したいときにこのジェネレーターを使用します。Generator」を使用してます。タグの対応ブラウザも書いてあります。/>画像サイズ・背景色・テキスト色・フォーマット・画像の中に入る文字を入れることが出来ます。そこで変更したものはurlが画像下にありますのでコピーしてsrcのなかに入れるだけです。することでコーディング時に画像をフォルダに残さないのと、ダミーの画像の箇所がわかりやすいかと思います。メールアドレスのなどのエンティティ化http://hp.vector.co.jp/authors/VA022023/javascript/make_html_entity-ja.htmメールアドレスをサイト内に入れる際、エンティティ化をさせてますでしょうか?スパムメールからアドレスを守るためにもメールアドレスはエンティティ化させて対策しておくべきかと思います。TinyPNGhttps://tinypng.com/画像が多いサイトなどを作成していると、画像読み込みでサイトが重くなってしまいます。そんな時にすこしでも負担を軽くするために、画像の圧縮をかけて容量を減らしてあげることが大事かと思います。here!」部分をクリックしてファイルを選択するだけです。複数ファイル(最大数20ファイル)できるので、まとめてアップしてしまうととても効率がいいです。その後にDownloadボタンが出てくるのでそのボタンを押すことで、軽量化されたファイルがダウンロードされます。1ファイルづつのダウンロードになります。プラグインも出ているので購入してみるのもいいかも!https://tinypng.com/photoshopどうでしたでしょうか。知っているものも多いのではなかったでしょうか。ブックマークしておくことで「あれ、どうやって書くんだっけ?」という時にもさっとページが開けるので便利かと思います。