ようこそ Guest さん
ログイン
ログインID

パスワード:


パスワード紛失
管理人愛用ソフト

本格的なサイト制作にはやはり DreamweaverとFireworksは必需品です。 むしろこの2つのソフトだけでサイト制作はまったく問題ありません。
管理人もこの2つだけで制作しています。
まぁ値段も値段ですが、それだけの価値は十二分にあります。 本格的なサイトを作る方、
Webデザイナーを目指したい方には必須のソフトと言えます。

フラッシュを作りたい方には、やはり業界標準ソフトのAdobe Flash。
お値段は張りますがとにかく高機能です。
ただ、本を買わないと実際は難しいでしょう・・・。

DreamweverやFireworksが初めての方は無理せず本を買いましょう。そのほうが結果的に早いので得です^^;

アースマラソン応援バナー
トップ (メニュー)  >  すぐに使えるJavaScript  >  javascriptとCSS(スタイルシート)を利用した タブメニューの作り方
yahooのトップページのニュース欄などにも使われているタブメニュー。
このサイトのトップページ右側にもあるjavascriptとCSSを使ったタブメニューの作り方。
実際ものすごく簡単です!

わかりやいようにサンプルソース内にjava、cssのすべてを記述しています。
たった一つのhtmlファイルでOK!

気になる人はjavaとcssを外部に置くとスマートですね。

サンプルはこちら→

以下がサンプルソースです。シンプルですね〜^^
無駄な記述を極力省きました(汗
たったこれだけです^^

head部に記述 (クリックで全選択)

ここまでをhead部分に記述します。
まぁこの部分は外部に置いたほうがスマートだったりしますが・・・。

以下をbody内に記述すればOK。
一番下のjavaの記述部分はとにかく一番下に置きましょう。
じゃないと反映されません。

body部に記述(クリックで全選択)

javaの記述は2箇所だけです。
CSSで好きなようにカスタマイズできます。
IDのtab-wrapperで全体の幅を指定しているので、数値を変えれば幅を自由に変えられます。

また、これは単純にスタイルシートだけで実現していますが、画像等を使うとさらにかっこよくなりますね。

トップページのタブメニューはタブ部分に背景画像を設定しています。
参考までにこんな感じ。

また、メニューの数を増やすのも簡単です。
.螢好班分に項目を付け足します。

(例
 

▲好織ぅ襯掘璽箸#news1, #news2, #news3の部分に#news4を付け足す。
例)news1, #news2, #news3,#news4

0貳峅爾javaの部分にも付け足します。(カンマを付け忘れないように!news4の部分(最後尾)には付けません)
例)

たったこれだけで増やせます!簡単しょ!?!(^^)!
プリンタ用画面
投票数:255 平均点:6.31

カテゴリートップ
すぐに使えるJavaScript
次
すぐに使えるちょっとおしゃれなJavascriptスライドショーいろいろ。設置法、使い方など
Copyright (c) ケンズキューブ All Rights Reserved.