WEBサービス

【ホームページ作成初心者向け】誰でも使えるCSS自動生成ジェネレーター

投稿日:2014年7月23日 更新日:

ホームページの制作のフローの中でCSS(スタイルシート)という見た目を指定するものがあります。今回の記事は仕事で常日頃CSSに携わってる方向けというよりはブログのテンプレートをカスタマイズしたり、自分のホームページをなんとか立ち上げたけど、変更がなかなか難しい。。。という初心者の方向けに便利なジェネレーターとその使い方をご紹介します。

その名も「CSS見出しジェネレーター」

ジェネレーターとは自動生成の事で、この場合はCSSを自動的に生成してくれるプログラムツールのご紹介です。

ホームページの構成というのは大抵「見出し」「本文」「画像」「ボタン」の配置の集まりでしかありません。その中でも目につきやすい「見出し」を簡単に作れてしまうというものです。

なにか難しいことを覚えることも記述ルールも覚える必要はありません。
ただただ、直感的に思うがままに、好きなように指定するだけで思い通りの見出しが出来てしまうわけです。

使い方

1.まずは下記にアクセス

http://web-dou.com/tool/css_gen_h.php
引用:web道

CSS見出しジェネレーター

2.指定してみましょう

ページを下にスクロールするとジェネレーターが出てきます。

web2

まず、見出しの種類が【吹き出し、リボン、普通(枠上、枠下、枠上下)】の5タイプから選べるほか、影を付けてさらにその影の位置まで指定できたり、ぼかしを入れたり、角丸にしたりと、かなり細かく指定できます。

さらに極め付けがこれ、

web3

なんと色指定がカラーチャートから直感的に選択できてしまう。

3.書き出してみましょう

指定内容

web4

結果


web5

そうすると、見た目の生成と、指定するCSSとHTMLのサンプルコードが生成されます。
あとはこれらを自分のホームページのスタイルシートに貼り付ければOK。

プロのような細かい見せ方は出来ないかもしれませんが、シンプルなサイトであれば、十分すぎる見栄えが手にいれられるはず。このサイト、他にもいろいろ便利なジェネレーターがあるのでご利用してみてはいかがでしょうか。

-WEBサービス

関連記事

adwords サイトリンクを設定してクリック率アップ!

adwords サイトリンクを設定してクリック率アップ!

サイトリンクはきちんと設定していますか? サイトリンクとは広告表示オプションで設定できる広告文の下に表示されるリンクのことです。 サイトリンクをすると何がいいの? 画像は「東京 物件」で検索した時の広 …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

Windows7版最新IE(InternetExplorer11)がリリースされたのでさっそく試してみた

Windows7版最新IE(InternetExplorer11)がリリースされたのでさっそく試してみた

web制作の業界ではほぼ確認用としか使われていないIE。 制作者ならだれもが分かると思いますが動作が重く、昔から癖が強くアプデの度にその癖が変わる。 わがままなブラウザ。そんなイメージでした。 そんな …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

LINEのスタンプが誰でも制作・販売可能に!!

LINEのスタンプが誰でも制作・販売可能に!!

LINEのスタンプは国内外で500以上の有名キャラクターが使われており、 メールの顔文字・絵文字との差別化が成功し、LINEユーザー増加に一役かっているコンテンツだと思います。 これまでスタンプはLI …