今回はWeb2.0的なお洒落なロゴを動画で紹介しようと思う。完成図は以下のような感じ。自分はデザイナーでもなく我流でPhotoshopを覚えたので、使い方がちょっと変な箇所もあるかと思うがそこはご愛嬌ということで。。

  |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

今回は画像を使用したグローバルメニューでのCSSの記述を書こうと思う。

前回はテキストのみでの記述だったが、恐らくこちらのほうがよく使うであろう。ポイントは2点

画像置換はSEOスパムとして判断されるか意見がわかれる。実際、画像置換を使用するのを嫌う人もいる。ボタン画像をCSSのbackground-positionで表示するのは結構みんなよくやる。ただロールオーバーの画像の位置が1pxでもずれてたらロールオーバーした際ちょっとずれてかっこ悪い。今回作ったメニュー画像はちょっとずれているがそこはご愛嬌ということで。。

Home
会社概要
事業概要
IR情報
採用情報
お問合わせ

/*-----------------------

 グローバルナビゲーション

-----------------------*/

#g-navi{
  margin: 0;
  padding: 0;
  width: ***;
  height: 40px;
}

#g-navi ul{
  list-style-type: none; /*リストスタイルタイプを外す*/
  margin: 0;
  padding: 0;
}


#g-navi li{
  text-indent: -9999px; /*画像置換処理*/
  float:left;
  width: 100px;
  margin: 0;
  padding: 0;
}

#g-navi a{
  display: block;
  width: 100%;
  height: 40px;
  background-image: url(globalmenu.gif);
  background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -100px 0;}
#menu3 a{background-position: -200px 0;}
#menu4 a{background-position: -300px 0;}
#menu5 a{background-position: -400px 0;}
#menu6 a{background-position: -500px 0;}

#g-navi a:hover{
  background-image: url(globalmenu.gif);
  background-repeat: no-repeat;
}

/*マウスオーバー*/
#menu1 a:hover{background-position: 0 -40px;}
#menu2 a:hover{background-position: -100px -40px;}
#menu3 a:hover{background-position: -200px -40px;}
#menu4 a:hover{background-position: -300px -40px;}
#menu5 a:hover{background-position: -400px -40px;}
#menu6 a:hover{background-position: -500px -40px;}

|  ブログ村 ＩＴ系資格 へ1票お願いします   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

今回はWEBサイトで必須要素と言ってもいいグローバルメニューをCSSで記述してみたいと思う。一般に横並びのメニューのCSSでの記述は<LI>タグで各ボタンを設置し、<LI>タグにフロートをかけることで横並びになる。あと、注意する箇所は<LI>タグはデフォルトでリストタイプが設定されているので外さなければならない。

 
ホーム
 
会社情報
 
事業概要
 
IR情報
 
採用情報
 
お問合わせ

/*-------------------------
  グローバルナビゲーション
--------------------------*/

#globalnavi{
  margin: 0;
  padding: 0;
  width: 600px; /*各リストの合計の幅*/
}

#globalnavi ul{
  list-style-type: none; /* リストスタイルタイプを外す*/
  margin: 0;
  padding: 0;
}

#globalnavi li{
  float: left; /* フロートで横に並べていく */
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  text-align: center;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: black;
  color: white;
}

/* ロールオーバー */
#globalnavi a:hover{
  background-color: red;
  color: white;
}

|  ブログ村 ＩＴ系資格 へ1票お願いします   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

最近ではいろんなサイトでWEB2.0的なデザインのサイトが多くなった。どうもWEB2.0デザインが今は主流みたいである。ところでWEB2.0デザインは何か？実は明確な定義がないのだが、どうもMacOSXやiTunes StoreなどApple製品のGUIがベースみたいである。透明ガラスみたいなデザインをイメージで概ね間違いないだろう。自分はプログラマー寄りの人間なので、基本的にデザインをすることは少ないのだが、少しぐらいはできるようにと今回ちょっと作成してみた。

|  ブログ村 ＩＴ系資格 へ1票お願いします   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

前回CSSでの3カラムレイアウトについてコードを記述した。しかしBoxA、BoxB、BoxC全てが左にフロートしている組み方はあまりない。BoxA、BoxBをDivで囲んだものと、BoxCで2段組にするという「2段組」を基本にしたやり方がよく使われる。今回そのやり方でソースを記述してみた。

SITE TITLE

    

      

        

          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
        
      
    
    

      

        
SUB TITLE
	      
text text text text text text text text text text text
           text text text text text text text text
	      
text text text text text text text text text text text
           text text text text text text text text te
        
    
  




    

           

              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
           
    






FOOTER

@charset "shift_jis"; 
/* ----------------------- 
common.css 
共通 
------------------------ */

/*初期設定*/
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,
table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}

/*個別整形*/
h1,h2,p{
    margin-bottom:0px;
	margin-top:0px;
}

/*全体*/
#wrapper{
	width:800px;
	border: 1px solid #000000;
	margin-right: auto;
	margin-left: auto;
}

/*ヘッダー*/
#header{
	background-color:#FF0066;
	margin: 0px;
	padding: 0px;
}

/*フッダー*/
#footer{background-color:#FF33FF;}

/*box_aとbox_bを囲むdiv*/
#box_ab{
	float:left;
	margin: 0px;
	padding: 0px;
}

/*左メニュー*/
#box_a {
	float:left;
	width:150px;
	background-color:#FF99FF;
	height: 300px;
}

/*センターコンテンツ*/
#box_b {
	background-color:#FFCCFF;
	float: left;
	width: 500px;
	height: 300px;
}

/*右メニュー*/
#box_c {
	float:right;
	width:150px;
	background-color:#CC99FF;
	height: 300px;
}

/*textエリア整形*/
#navi{padding:1em 1em; 20em; 1em;}
#box_abc {
	float: left;
}

|  この記事に拍手   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

今回は最も頻繁に使用されるであろうCSSでの3カラムレイアウトについて。CSSでの3カラムの組み方はいろいろある。左から順にBoxA,BoxB,BoxCと横並びにする場合

今回書いたコードは4であるが、このやり方はあまり見かけない。簡単な組み方だけに、全体を囲んでいる#mainの幅は#sidemenuの幅+#contentsの幅+#affiriateの幅が同じでないとレイアウトが崩れる。

  

    ヘッダエリア
  
  
  
  

    

      メニューエリア
    
	
    
 
      コンテンツエリア
    
	
    

      広告用エリア
	
    
    
  
  
  

    フッタエリア
  
  

@charset "shift_jis";
/* -----------------------
common.css
共通
------------------------ */

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,
table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}

body{
  width : 100%;
}

/* ヘッダー */ 
#header{
  width : 760px;
  height : 50px;
  margin : auto;        /* 標準モードなので、これでセンタリング */
}

/* メニューと本文と広告部分をひとくくりするためのID */
#main{
  width : 760px;        
  margin : auto;
}

#sidemenu{
  width : 150px;
  float : left;
}

#contents{
  width : 460px;
  float : left;
}

#affiriate{
  width : 150px;
  float : left;         /* 指定しないとFirefox,Operaで落ちる */
}

/* フッター */
#footer{
  width : 760px;
  clear : both;
  margin : auto;
}

|  にほんブログ村 ＩＴ系資格 へ1票  |  ウェブデザイン技能検定2級対策問題集購入はこちらへ  |