LOG IN

web制作でよく使うジェネレーター3選

by みやちゃけ

いろいろな便利ツールが溢れかえっていますが、その中で私がweb制作するときによく使うジェネレーターを紹介します。

下記のCSS3を使ったものは、IE8あたりまである程度捨ててます。
みんな!過去にとらわれないで未来を見ようよ!

CSSで簡単に三角を作って軽量化!「CSS triangle generator」

テキストリンクやボタンの横によく三角置きますよね?

背景透過していつもpngで作っていましたが、これがあれば大丈夫!

360度どの方向でも、簡単にCSSを作ってくれます。

ある程度形が決まったら、あとはブラウザで調整。
色を変えたい時も、矢印を下方向に変えたい時も、CSSを触るだけで簡単に出来ちゃいます!

私の場合、テキストリンクの左に置くときは

iタグにスタイルはっつけて、
display:inline-block、vertical-aline:top、margin:0.3em 10px 0 0てな感じで、あまりposition使わないです。
昔は空タグを嫌いましたが、iタグはどっかのサイトで使ってて「…私もそうしよう!」と、使っております。:beforeの方がhtmlは綺麗ですが、なんとなくcontent入れるのやだな〜と思って使ってませんです。

CSS triangle generator

ハックもカバー!便利なグラデーションジェネレーター「Ultimate CSS Gradient Generator」

グラデーションのきいたボタン、昔は画像しかありませんでしたが、これもCSS!いろんな色が簡単につくれちゃう!!

PCで使うときはold ブラウザのコメントがあるものまで入れてますが、スマホに使うときは、moz、webkit、linearのを入れてます。

過去に、どれか抜けるとandroidで表示されなかったことがありますた。

Ultimate CSS Gradient Generator

もうtableの為だけにDreamweaverは立ち上げない!Table Tag Generator

そんなことしない?
立ち上げてたんですよ、私は!ψ(`∇´)ψ

列と行の数を選んで、どこをthにするか選んで、必要ならマージしたり。

十分!!シンプルイズザベスト!!
最後にはtbodyは消しちゃいます。
横にあるCSSは使ったことありません。

Table Tag Generator

いかがでしょう?
自分で書くのもいいけれど、時短出来るとこはしちゃいましょうよ!

「このジェネレーター便利だよ」というのがあれば、ぜひ教えてください!*\(^o^)/*



みやちゃけ
OTHER SNAPS