スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSメニューの作り方

CSSメニューの作り方

投稿日:2006年10月31日   レベル:中級者    ソフトウェア:DreamWeaverGoLiveFrontPage



このチュートリアルでは、3種類のCSSメニューをcsszengarden.comにあるようなhtmlコードを使って作成しようと思います。しかし、ここで紹介するもののほうがよりシンプルなものです。」

これからh1、ul、liタグについて紹介します、そしてhtmlのソースを変えることなくスタイルを変更します。


Step1 − スタイル1

スタイル1

<div id = "style1">

<h1>My Site:</h1>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<div class = "content_box1">

Style 1 Content box

</div>

完成
スタイル1
実際に見るにはここをクリックしてください。


Step2 − スタイル1のためのCSS


#style1 {

font-family:Arial;

}


フォント=Arial


Step3 − H1のためのCSS


#style1 h1 {

font-size: 14px;

font-weight: bold;

text-transform: uppercase;

background-color: #FF6600;

width: 120px;

text-align: right;

padding: 5px;

margin: 0px;

float: left;

border-top: 1px solid #FF6600;

border-right: 1px solid #FF6600;

border-left: 1px solid #FF6600; }

H1のためのCSS
フォントサイズ=14px
ボールド
テキストを大文字に変換
背景色=#FF6600
幅=120px
テキストを右揃え
周囲に5pxのパディング
マージン=0
H1リスト横並びを左揃え
上に1pxの境界線
右に1pxの境界線
左に1pxの境界線


Step4 − ULのためのCSS


#style1 ul {

font-size: 14px;

font-weight: bold;

margin: 0px;

padding: 0px;

list-style: none; }


フォントサイズ=14px
ボールドフォント
マージン=0
パディング=0
リストスタイルではない


Step5 − LIのためのCSS


#style1 li {

background-color: #FF9900;

float: left;

border-top: 1px solid #FF6600;

border-right: 1px solid #FF6600;}

背景色=#FF9900
LIタグを左に
上に1pxの境界線
右に1pxの境界線


Step6 − リンクのためのCSS


#style1 li a {

width: 100px;

color: #FFFFFF;

text-decoration: none;

display: block;

padding: 5px 0px 5px 5px;

text-transform: uppercase;}

幅=100px
フォント色=白
アンダーラインなし
ブロック表示
パディング:上=5、右=0、底=5、左=5
テキストは大文字に


Step7 − 訪問済みリンクのためのCSS


#style1 li a:visited {

color: #FFFFFF;

text-decoration: none;}

フォントカラー=白
アンダーラインなし


Step8 − ホバー効果リンクのためのCSS


color: #000000;

text-decoration: none;

background-color: #FFCC33;}

フォントカラー=黒
アンダーラインなし
背景色=#FFCC33


Step9 − コンテンツボックスのためのCSS


.content_box1 {

font-family: Arial;

font-size: 11px;

clear: left;

background-color: #FFFF91;

border: 1px solid #FF6600;

width: 720px;

padding: 15px;}


フォント=Arial
フォントサイズ=11px
左横並びの消去
背景色=#FFFF91
周囲に境界線=1px
幅=720
周囲のパディング=15


引用:Web Design Library 著者:Nick La翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング