カテゴリー : CSS

CSSタブナビゲーションでコンテンツ切り替え

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

CSS Tabs
css タブメニュー 切り替え


Tabbed CSS only website template
Tabbed-CSS-only-website-template

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

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

ちょっと変わったCSSメニューボタン

Cool Sprites – Free overlapped CSS menu using CSS Sprites
CSS3 メニューボタン sprite

このボタンの画像ファイルが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のメニューボタンの作り方をご紹介させていただきます。

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

jQuery style menu with CSS3
css3 botton jQuery style

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

CSS3アニメーションボタン「Radioactive Buttons」

Radioactive Buttons
css3-animation

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 ボタン

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

CSS3 Menu. Free CSS Menu Maker

便利です。

カワイイCSS3のボタン

CSS3 BonBon Sweet
BonBon Sweet CSS3 Buttons

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

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

WordPressとCSSデザインショーケース(リンク集)

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

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

CSS Mania
css mania

CSS REMIX
css remix


WordPressデザインショーケース

WPGlobe
WPGlobe

XAMPPで自分のPC内(ローカル)WEB環境をつくる。

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 ダウンロード

    XAMPP ダウンロード

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

    XAMPPコントロールパネル

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