マーカーネット株式会社

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

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

関連記事

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

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

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

【3.11を振り返る】WEBで伝えられること

【3.11を振り返る】WEBで伝えられること

2011年3月11日の震災から3年。 各所でさまざまな取り組みが行われていましたが、 WEB業界でもWEBならではのサービスや支援などが行われていました。 ■Yahoo 「3.11、検索は応援になる。 …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 スマホサイト編

こんにちは、デザイナーのAです。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その(2) いいデザインと悪いデザインの見分け方 その(3) いいデザインと悪 …

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

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

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