folderデザインしたい

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

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

簡単で便利!サイト制作に活用したいHTML/CSSタグジェネレータまとめ - https://do.gt-gt.org/tag-generator/

個人サイトを作るにあたって避けられないのが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ジェネレーターはたくさんあります。個人サイト制作に役立ちそうなものを見つけたら、随時追加していく予定です。

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

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法
folderデザインしたい favorite 61

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法
folderデザインしたい favorite 33

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方
folderデザインしたい favorite 55

個人サイトに可愛いアイコンを無料導入!Line Awesomeの使い方

【動画・画像あり】HTMLテンプレートカスタマイズに不可欠!デベロッパーツールの使い方を解説!
folderデザインしたい favorite 22

【動画・画像あり】HTMLテンプレートカスタマイズに不可欠!デベロッパーツールの使い方を解説!

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方
folderデザインしたい favorite 24

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】
folderデザインしたい favorite 30

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】