簡単で便利!サイト制作に活用したいHTML/CSSタグジェネレータまとめ

サイト作成に活用したいHTML/CSSタグジェネレーターまとめ

個人サイトを作るにあたって避けられないのがHTML/CSSタグを書くこと。せっかくなら自分好みのサイトにしたいけど、こだわって作るのもなかなか面倒です。

そんなわけでこの記事では、感覚的な操作で複雑なタグを一瞬で生成できるジェネレーターをまとめました。紹介しているのは日本語のサイトか、海外のサイトでも感覚的に使えるものばかりなので、簡単に利用できるはずです。

私もよくお世話になっているサイトさんばかりです。ぜひ使ってみてください!

思い通りのテーブルが簡単に!Table Tag Generator

テーブルタグジェネレーター

おなじみテーブルタグ。行数や列数が単調なものなら良いですが、複数の枠を結合したい場合などはちょっとタグが複雑になります。

上記のサイトなら、複雑な形をしたテーブルでも、クリックだけで簡単に作れちゃいます。好みのテーブルをつくったら、生成されたHTMLタグをコピペするだけ!

影付き・角丸の枠が自由自在。box-shadowとborder-radiusジェネレーター

角丸・影のジェネレーター

box-shadowでボックスに影を指定するのって、慣れないうちはちょっと大変。そんな方にぴったりのジェネレーターです。影の位置やぼかしの強さ、色も指定できます

またボックスの背景色、縁取りや角丸もデザインを見ながら調整できるので、角丸ボックスジェネレーターとしても使えそうです。なんと角丸は4つの角を同時に調整するのはもちろん、ひとつずつ角の丸さを変えることもできちゃいます。ちょっと個性的なボックスが欲しいときに便利かも。

CSSだけで吹き出しをつくる!CSS arrow please

CSS arrow please

かわいい吹き出し型ボックスもCSSだけで作れちゃうんです。こちらは英語サイトですが、設定はとても簡単。吹き出しのしっぽの位置と大きさ、吹き出しの背景色と枠の色・太さを指定するだけ。

生成されたCSSをコピーしてstyle.cssなどに張り付けたら、あとはclass="arrow_box"を指定したdivなどのボックスが吹き出し型になります。

ストライプ・ボーダー・チェックを作る CSS STRIPE GENERATOR

CSS STRIPE GENERATOR

こちらはCSSでストライプを作るジェネレーターです。サイトの背景はもちろん、枠などにも使えます。

方向の違う複数のストライプを組み合わせれば、チェック柄にもなります。左上の「GALLERY」ボタンを押すと作例が出てくるので、参考にして作るのもあり。

綺麗なグラデーションを作る CSS Gradient

CSS Gradientでグラデーションを作ります

こちらもサイトの背景やボックスなどに使えるジェネレーター。線形・円形のグラデーションを生成することができます。

右下に作例が出ているので、作りたいイメージに近いものを選んでベースにすれば、好みのグラデーションがサクッとできそうです。

ジェネレーターは随時追加します

その他にも便利なHTML/CSSジェネレーターはたくさんあります。個人サイト制作に役立ちそうなものを見つけたら、随時追加していく予定です。

ジェネレーターを使って、好みのサイトをサクサク作っちゃいましょう!

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較