ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング