今回は画像を使用したグローバルメニューでの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級対策問題集購入はこちらへ   |

コンテンツエリアの幅が可変するデザインはリキッドデザインと呼ばれる。似たような用語でグリッドデザインという用語があるが、こちらはレイアウトの配置だけを決めたデザインである。具体的なデザイン作業に入る前に行われる。グランドデザインは長期間にわたる計画全般を指す。

以下を参考にして定義リスト(dlタグ)でコードを書け

<dl>はDefinition Listの略で、<DL>~</DL>の範囲が定義リストであることを表す。<DT>タグで定義する用語を記述し、<DD>タグでその用語の説明を記述する。また、定義語と定義説明のセットは<DL>の中に複数並べることができる。
<dl>
<dt>IT系国家資格</dt>
<dd>Webデザイン技能検定</dd>
</dl>

GIFは8ビット256色。JPEGは24ビットで約1678万色。PNGは24ビットだと約1678万色で48ビットだと約280兆色。

リンクのスタイルは順番が大事。a:link, a:visited, a:hover, a:activeの順番で記述すること。

XMLHTTPRequestを応用したWebアプリケーションには、Googleマップ、Facebookなとがある。

人気ブログランキングへ

　いろいろ調べてみた所、Ajaxが何かしら"非同期通信"という言葉と深い関わりがあるところまではわかった。しかし肝心の"非同期通信"の意味が難しくてよくわからない。

　Ajaxの非同期通信とはAsynchronous JavaScriptとあるようにJavaScriptでHTTP通信を行うということみたいである。JavaScriptでHTTP通信？そう、実際Ajaxという方法論が普及する前はJavaScriptから通信をしようなどと考える人はほとんどいなかった。

　JavaScriptでHTTP通信を行うには、一般的にXMLHTTP、またはXMLHttpRequestと呼ばれるオブジェクトを利用する。

人気ブログランキングへ

　最近よく耳にするようになった"Ajax"。しかし実際、自分はよくわかっていなかった。ウェブデザイン技能検定でも、もちろん出題される予想が高い。この機会にAjaxというものを体系的に理解してみた。

　Ajaxは、Asynchronous JavaScript and XMLの略である。ポイントは二つ。

　ちなみにAsynchronousの読み方は"アシンクロナス"。非同期通信とは、ユーザーがブラウザで次の画面に移動しようとするタイミングとは異なるタイミングで通信をするという意味である。ダイナミックHTMLは、ユーザーがブラウザで次の画面に移動しなくても、ページの一部を書き換える仕組みだ。

人気ブログランキングへ