- Back to Home »
- css , HTML , WEBデザイン »
- ごく簡単なメニュー
Posted by : Izumikawa Fukumi
2012年11月13日火曜日
今回初心者さん達の参考に、っと思い簡単なメニューを作ってみました。
誰でも真似が出来るので、試してみて下さい。
このメニューは、ボタン風に作ってみました。
あまりボタンの様には、見えませんが、とりあえずと言う事で、
CSS3を使って角を丸くしました。
ちょっと可愛いメニューですね
このメニューは、激ノーマルですね^^;
実際は、背景画像で、オリジナルのメニューを作成出来るのですが
画像を配布すると手間がかかるので、このブログでは、画像を使わない様に、
紹介いたします。
※ここで、紹介しているメニューは、自由に使っていただしていいのですが、
もしこのメニューのせいで、何か起きた場合責任はとりませんのでご了承下さい。
今サイトを作成途中の方は、編集中のファイルを開いて、
メニューを配置したい場所に<!--HTML-->の部分の下のタグを貼り付けて下さい。
次に、<style type="text/css">っと言う部分から</style>っと言う部分まで、コピーして下さい。
コピー出来たら<head>内に貼り付けをして下さい。
以上で、設置完了です。
プレビューで、ご確認下さい。
Q? ぜんぜんうまく行かない場合は、この記事にコメントに書いてくださったら回答いたします。
誰でも真似が出来るので、試してみて下さい。
このメニューは、ボタン風に作ってみました。
あまりボタンの様には、見えませんが、とりあえずと言う事で、
CSS3を使って角を丸くしました。
ちょっと可愛いメニューですね
このメニューは、激ノーマルですね^^;
実際は、背景画像で、オリジナルのメニューを作成出来るのですが
画像を配布すると手間がかかるので、このブログでは、画像を使わない様に、
紹介いたします。
※ここで、紹介しているメニューは、自由に使っていただしていいのですが、
もしこのメニューのせいで、何か起きた場合責任はとりませんのでご了承下さい。
実際にメニューを使う方法!
こちらで、紹介しているメニューを実際に使う方法をご説明させていただきます。今サイトを作成途中の方は、編集中のファイルを開いて、
メニューを配置したい場所に<!--HTML-->の部分の下のタグを貼り付けて下さい。
次に、<style type="text/css">っと言う部分から</style>っと言う部分まで、コピーして下さい。
コピー出来たら<head>内に貼り付けをして下さい。
以上で、設置完了です。
プレビューで、ご確認下さい。
Q? ぜんぜんうまく行かない場合は、この記事にコメントに書いてくださったら回答いたします。