マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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サービス

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

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

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

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

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

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

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(2)

こんにちは、デザイナーのAです! 前回、いいデザインと悪いデザインの見分け方・・・マージンの取り方についてご紹介しました。 デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(1) 今回 …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …