前からメニューバーが欲しかったんで、作成していたんですがどうせならCSS3を使って作ってみようと考えていましたがやっと出来ました。
Webプログラミング･デザインの知識って正直あまりなくて苦労しました。
でもCSS3を使ったDEMOも公開されていたので、色々なサイトを参考に作りました。
最初はデモと同じように作っていたんですがやめました。
IEだとやっぱり角丸が表示できないんでちょっとだけ丸くしてデザインを変えてみました。
ちゃんと表示されるのはやっぱりFirefoxとかChromeですね。
とりあえず私が最初に作ったやつ。
CSS3 Menu DEMO
公開されているデモみたいに作ったんですが、やっぱりかなり角を丸くするとサイトの統一感がかけるのではないかと思い、このデザインはやめました。
CSSも良く分からないです。良く分からなくなったというのが却下した本当の理由です。
それで色々考えて現在表示されているメニューの構造へ変更。やっぱりブラックの方がいいかな、私のサイトのデザインは地味だし。
幅を1200pxに合わせて折り返さないように色々いじりました。
ちゃんと影も地味に付けてはいるんですが、ブラウザによっては表示されませんね。
それで完成したのがこちら
CSS3 Menu DEMO 2
何日もかかってようやく出来ました。
感想
正直素人には難しかったです。
色々勉強していかないといけませんね。デザインとかを考えるのがホントに苦手で、CSSのエディタも使いやすいのがなかなか無くて結構な時間を費やしてしまいました。
最初はCSS補助のツールとか色々使って後で細かい部分をエディタで編集していくという感じで進めていたんですが自分で編集するのはやっぱり難しいです。
でも出来ました。
多分もっと簡素に出来たんだと思いますが許してください。
注:もしメニューのリンクが違っていたり、表示がおかしくなっていたらお知らせください。
タグ：CSS
↓もしこの記事が役に立ったらクリックお願いします。
【お知らせの最新記事】
ところで気になったのですが、Yuichiさんのサイトを開きっぱなしにしているとタブが更新しているかのように一定間隔で一瞬だけブレるのですがこの現象は自分だけでしょうか？
ブラウザはFirefoxです。関係ありそうなアドオンも特になさそうです。そんなに気になるわけではないので、もしわからなければスルーして頂いて結構です。
Yuichiさんのサイトはとても見やすいのですがこのアドオン（自動で次のページに更新）を入れているとコメントをクリックする辺りで、更新がかかってコメント欄がカットされて見れないのです。。
ワンクリックで無効に出来ますし問題ないですから気にしないでくださいね^^;
先ほどコメントを残した以上中途半端にしたくなかったもので。。
まずは素敵だなんていっていただいてありがとうございます！サイトも地味な配色ですし、そんな風に言っていただけるとはとてもうれしい限りです！！
さて、「一定間隔で一瞬だけブレる」とのことなんですが、おそらくアクセスカウンターの「Now Visitor(現在の閲覧者は〜ですというやつ)」が関係しているかもしれません。
90秒毎にリロードするのでそれとAutoPagerの相性が悪いかもしれませんね。
私のほうではブレの確認が出来なかったので、Now Visitorを消してみました。
暇なときに確認してみてください。
あとAutoPagerは私もさっき入れてみて使ってみたんですが、確かにコメントのところで更新されますね。
設定を変更してやれば何とかなるかななんて思ったのですがまだこのアドオンのことを良く分かっていないのでこれは今のところ解決策が思いつきません。
ご不便をおかけして申し訳ないです。
色々試行錯誤してみますので、現状ではコメントを読むときAutoPagerを「無効」でお願いしたいと思います。
どうやら、自分の場合その「Now Visitor」が原因だっようです。
今30分ほどサイト巡回しましたが以前のような現象は起こらなかったです。
自分はサイト作り・運営のことは全くわかりませんが「Now Visitor」必要なようであればまた設置してくださいね。
本当に好奇心で少し気になっただけですから^^;
Yuichiさんのサイトは有用な情報が多くて得した気分になります！
これからも運営頑張ってください。
色々見やすいようにいじっても結局は主観になってしまうので何かちょっとでもおかしなところとかがあったときに言ってもらえるととても助かります。
Now Visitorは面白いかなと思って設置しただけなので、何かに影響があるならやっぱり撤去ですね。気にしないでくださいね。
もし、また不具合などありましたらご連絡いただけると幸いです。
応援もありがとうございます！！がんばっていきます！