CSSのタブナビゲーションでコンテンツを切り替える方法を掲載している2サイト。

CSS Tabs

Tabbed CSS only website template

デモサイト：My very nice CSS tabbed portfolio

Operaで、ちょっと工夫が必要。

Cool Sprites – Free overlapped CSS menu using CSS Sprites

このボタンの画像ファイルがHTML、CSS、PNGのファイルがセットでダウンロードできます。

Sample HTML Code

<div class="navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="#"></a></li>
  </ul>
</div>

Sample CSS Code

.navi1 {
    display:block;
    height:72px;
    margin:0 auto;
    position:relative;
    width:525px; }
.navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.navi1 ul li {
    background-image:url(tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.navi1 ul li:hover {
    z-index:1000; }
.navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
    background-position:-498px -75px; }

PSDファイルもダウンロードできます。

最近CSS3のボタンばかり紹介していますが、いろいろいじってて楽しくなってきてまして・・・
またまたCSS3のメニューボタンの作り方をご紹介させていただきます。

CSS3で作成するボタンテクニック

jQuery style menu with CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Radioactive Buttons

CSS3でアニメーションを使ったボタン。
Webkitブラウザ（Safari、Google chromeなど）でみると、ぼわ～っと光ってきます。
FireFox3.6やIE8では、このボタンの効果は表現されません。

作り方は以下ZURBのPlaygroudの通り。

@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

  a.green.button {
   -webkit-animation-name: greenPulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
  }

CSS3のメニューボタンを簡単に作成してくれるソフトウェア「CSS Menu Maker」
これがあれば、簡単にボタンを出力してくれます。
フリーウェアです。
CSS3のみでボタンが作られるので、SEO的にも良い。
サポートブラウザは、FireFox、Chrome、Safari、Opera、IE（IE6は除く）に対応。
対応OSは、WindowsとMac。

CSS3 Menu. Free CSS Menu Maker

便利です。

BonBon Sweet CSS3 Buttons

カワイイCSS3のボタン。
CSS3のみを駆使してこのようなボタンを作っています。
ダウンロードして、いろいろ数値などを変更してみると立体感や形、光沢の具合が変わります。
CSS3のみでボタンが作られているのでSEOにも優しいです。
ブラウザごとに少し見た目が変わります。
ちょっと勉強で試してみるのもいいかもしてません。

私もHTML5やCSS3に全然ついていけていないので、勉強中です。
もっと早く勉強しておけばよかったぁ

参考になるサイトが数多く掲載されています。

CSSのデザインショーケース

CSS Mania

CSS REMIX

WPGlobe

XAMPP（ザンプ）をインストールすれば、お金をかけてレンタルサーバーなど借りなくてもデータベースやプログラムのテストなどができるようになります。
サーバーなどの知識は、とりあえずは必要なく、一般のソフトウェアと同様にインストールするだけです。

勉強のためにお金を最初からかけなくても、自分のPCの中でWEB制作の環境をつくれることができます。

XAMPPとは

名前のAMPP部分は、Apache、MySQL、PHP、Perlの頭文字をつなげたもの。
これらのアプリケーションをひとつにまとめ、簡単にインストール・アンインストールできるようにしたアプリケーション。
もともとLINUXのアプリケーションで、そのときはLAMPPだったみたい。複数OSに対応するようになってXAMPPという名前になったようです。
対応OS：Windows、Linux、Mac OS X、Solaris
フリーウェアなので、無料です。

XMAPPの中身

• Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l
• MySQL 5.1.41 + PBXT engine
• PHP 5.3.1
• phpMyAdmin 3.2.4
• Perl 5.10.1
• FileZilla FTP Server 0.9.33
• Mercury Mail Transport System 4.72

がインストールするだけで、自分のPC内（ローカル）で使えるようになる！しかも、無償で！インストールも簡単！

XMAPPをとりあえず、インストール

1. XAMPPのダウンロードをする。
   http://www.apachefriends.org/jp/xampp-windows.html
   こちらにアクセスして、スクロールしていくと、EXEとあるので、そこをクリック！
   
   

   XAMPP　ダウンロード

2. 「インストールする！」Cドライブ直下にインストールした方が良いです。
3. コマンド画面（黒い画面）がでてきますが、そのままEnterで進めていって、最後はxを押して終了させましょう！
4. コントロールパネル内ApacheのStartボタンをクリック！Runingとなる。
   
   

   XAMPPコントロールパネル

5. ブラウザで
   http://localhost/
   にアクセスしてこの画面が開けばインストールは成功！