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

関連記事

フォントをまとめて比較!ウェブサービス「wordmark-it」

フォントをまとめて比較!ウェブサービス「wordmark-it」

こんにちは。マーカーネットスタッフのSです。 今回はデザイン制作に便利なサービスをご紹介したいと思います。 デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。 …

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

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

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

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

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

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

【これから始めるWEB制作】いろはの”い”!PDCAサイクルって?

【これから始めるWEB制作】いろはの”い”!PDCAサイクルって?

突然ですが皆さん、『PDCAサイクル』ってご存知ですか? ある程度、WEB制作に関わったことがある方には馴染み深い言葉かもしれませんが、 もちろん、ご存知ない方も沢山いらっしゃると思います。 実はこの …

WEBデザイナーが厳選する 年賀状に使えるフリー素材まとめ!

WEBデザイナーが厳選する 年賀状に使えるフリー素材まとめ!

2014年の残りあとわずかですね。 年末といえば、年賀状! これから作り始める方もまだまだいらっしゃるのではないでしょうか。 そこで・・・ 今回は、そんな方にお役立ちの無料で高クオリティーなデザインハ …