この記事は2015年5月12日に公開されたものです。この記事の内容は最新でない可能性がありますのでご注意ください。

【ホームページ作成】初心者でも簡単にコピペでボタンが作れる!

ホームページ作成 グラデーションや角丸等cssだけで実装する時に手打ちしてるとけっこう大変なので、ジェネレータを使わせていただいております。 コードを自動生成してくれるので、初心者の方でもコピペで実装できます。 ジェネレーターのほとんどが海外サイトで英語のみというケースが多いです。その分、初めて使う方にはハードルが高くなってしまうのですが、使い方を覚えてしまえばコピペで簡単にボタンが作れるようになります。

ボタンを画像で作らないわけ

以前は、ボタンは画像で作っていました。 今でも画像で作るものもあるのですが、cssだけで実装できれば楽なんです。 なぜ、楽かというと、スマホへの最適化を行う場合やボタンのテキストを変更する時に、ボタンを作り直す必要がなく、全部コードですぐに修正できてしまいます。

ジェネレーターって何?

ジェネレーターというのは、平たく言うと、指定した条件によってコードを自動で生成してくれる仕組みのことです。 htmlやcssのコードを知らなくても、項目を選んでいくだけでコードを生成してくれるので、生成されたコードをコピペするだけでいいんです。 もちろん、どこにコピペするか…ということは知っておかなければなりませんが。

CSS3 Button Generator

css3buttongenerator 項目を設定するだけで、右側にコードが生成されていきます。 ・BACKGROUND:背景色。ここではグラデーションの背景が自動で作成できます。 ≪BORDER / PADDING≫ ・COLOR:枠線の色 ・WIDTH:枠線の線幅 ・RADIUS:角丸の丸み ・TOP+BOTTOM:文字の上下の余白 ・LEFT+RIGHT:文字の左右の余白 ≪DROP SHADOW≫ ・COLOR:ボタン自体の影の色 ・OPACITY:影の透明度(数字が1に近くなるほど、影が濃くなります) ・xとy:上下左右の位置 ・size:影の長さ ≪INNER SHADOW≫ COLOR:ボタンの内側の影の色 ・OPACITY:影の透明度(数字が1に近くなるほど、影が濃くなります) ・xとy:上下左右の位置 ・size:影の長さ ≪TEXT FONT≫ ・COLOR:文字の色 ・size:文字の大きさ ≪TEXT SHADOW 1(2)≫ 1と2は文字の上下に2つの影(光)がついているので、それを設定できます。 ・OPACITY:影の透明度(数字が1に近くなるほど、影が濃くなります) ・xとy:上下左右の位置 ・size:影の長さ サイト:http://css3button.net/ 他のユーザーが作ったボタンのデータが見たい方向けのページも用意されています。 http://css3button.net/showcase/

Grad3

grad3 日本人の方が作成されたジェネレーターサイトです。 このジェネレーターについては、詳しく解説されているサイトがありましたので、そちらを参照ください。 サイト:http://grad3.ecoloniq.jp/ 参考サイト:http://weboook.blog22.fc2.com/blog-entry-327.html

関連記事

ホームページに動画をつかうことで得られるメリット

IEでwordファイルがダウンロードできない

IE8で印刷が崩れる場合の対処方法

ブログのネタに困ったら…

ホームページはコンテンツが命!

ベーシック認証のかけ方

【ホームページ作成】面倒な都道府県のセレクトボックス一覧

【ホームページ作成】プロが使う国内の無料素材サイト

他のブログ記事をチェック