今回はWeb2.0的なお洒落なロゴを動画で紹介しようと思う。完成図は以下のような感じ。自分はデザイナーでもなく我流でPhotoshopを覚えたので、使い方がちょっと変な箇所もあるかと思うがそこはご愛嬌ということで。。
2009年5月アーカイブ
|今回は画像を使用したグローバルメニューでのCSSの記述を書こうと思う。
前回はテキストのみでの記述だったが、恐らくこちらのほうがよく使うであろう。ポイントは2点
■ 画像置換
■ cssのbackground-positionを使用してボタンの表示
■ cssのbackground-positionを使用してボタンの表示
画像置換はSEOスパムとして判断されるか意見がわかれる。実際、画像置換を使用するのを嫌う人もいる。ボタン画像をCSSのbackground-positionで表示するのは結構みんなよくやる。ただロールオーバーの画像の位置が1pxでもずれてたらロールオーバーした際ちょっとずれてかっこ悪い。今回作ったメニュー画像はちょっとずれているがそこはご愛嬌ということで。。
globalmenu.gif
index.html※↓いくつか<li>の閉じタグが消えています
01.<!--■グローバルメニュー■ START-->02.<div id="g-navi">03.<ul>04.<li id="menu1"><a href="editor-content.html?cs=UTF-8#">Home</a>05.</li><li id="menu2"><a href="editor-content.html?cs=UTF-8#">会社概要</a>06.</li><li id="menu3"><a href="editor-content.html?cs=UTF-8#">事業概要</a>07.</li><li id="menu4"><a href="editor-content.html?cs=UTF-8#">IR情報</a>08.</li><li id="menu5"><a href="editor-content.html?cs=UTF-8#">採用情報</a>09.</li><li id="menu6"><a href="editor-content.html?cs=UTF-8#">お問合わせ</a>10.</li></ul>11.</div>12.<!--■グローバルメニュー■ End-->common.css
01./*-----------------------02. 03. グローバルナビゲーション04. 05.-----------------------*/06. 07.#g-navi{08. margin: 0;09. padding: 0;10. width: ***;11. height: 40px;12.}13. 14.#g-navi ul{15. list-style-type: none; /*リストスタイルタイプを外す*/16. margin: 0;17. padding: 0;18.}19. 20. 21.#g-navi li{22. text-indent: -9999px; /*画像置換処理*/23. float:left;24. width: 100px;25. margin: 0;26. padding: 0;27.}28. 29.#g-navi a{30. display: block;31. width: 100%;32. height: 40px;33. background-image: url(globalmenu.gif);34. background-repeat: no-repeat;35.}36. 37.#menu1 a{background-position: 0 0;}38.#menu2 a{background-position: -100px 0;}39.#menu3 a{background-position: -200px 0;}40.#menu4 a{background-position: -300px 0;}41.#menu5 a{background-position: -400px 0;}42.#menu6 a{background-position: -500px 0;}43. 44.#g-navi a:hover{45. background-image: url(globalmenu.gif);46. background-repeat: no-repeat;47.}48. 49./*マウスオーバー*/50.#menu1 a:hover{background-position: 0 -40px;}51.#menu2 a:hover{background-position: -100px -40px;}52.#menu3 a:hover{background-position: -200px -40px;}53.#menu4 a:hover{background-position: -300px -40px;}54.#menu5 a:hover{background-position: -400px -40px;}55.#menu6 a:hover{background-position: -500px -40px;}今回はWEBサイトで必須要素と言ってもいいグローバルメニューをCSSで記述してみたいと思う。一般に横並びのメニューのCSSでの記述は<LI>タグで各ボタンを設置し、<LI>タグにフロートをかけることで横並びになる。あと、注意する箇所は<LI>タグはデフォルトでリストタイプが設定されているので外さなければならない。
01.<div id="globalnavi">02.<ul>03. <li><a href="editor-content.html?cs=UTF-8#">ホーム</a>04. </li><li><a href="editor-content.html?cs=UTF-8#">会社情報</a>05. </li><li><a href="editor-content.html?cs=UTF-8#">事業概要</a>06. </li><li><a href="editor-content.html?cs=UTF-8#">IR情報</a>07. </li><li><a href="editor-content.html?cs=UTF-8#">採用情報</a>08. </li><li><a href="editor-content.html?cs=UTF-8#">お問合わせ</a>09.</li></ul>10.</div>01./*-------------------------02. グローバルナビゲーション03.--------------------------*/04. 05.#globalnavi{06. margin: 0;07. padding: 0;08. width: 600px; /*各リストの合計の幅*/09.}10. 11.#globalnavi ul{12. list-style-type: none; /* リストスタイルタイプを外す*/13. margin: 0;14. padding: 0;15.}16. 17.#globalnavi li{18. float: left; /* フロートで横に並べていく */19. width: 100px;20. margin: 0;21. padding: 0;22.}23. 24.#globalnavi a{25. text-align: center;26. display:block;27. padding: 0.5em 0;28. width: 100%;29. background-color: black;30. color: white;31.}32. 33./* ロールオーバー */34.#globalnavi a:hover{35. background-color: red;36. color: white;37.}最近ではいろんなサイトでWEB2.0的なデザインのサイトが多くなった。どうもWEB2.0デザインが今は主流みたいである。ところでWEB2.0デザインは何か？実は明確な定義がないのだが、どうもMacOSXやiTunes StoreなどApple製品のGUIがベースみたいである。透明ガラスみたいなデザインをイメージで概ね間違いないだろう。自分はプログラマー寄りの人間なので、基本的にデザインをすることは少ないのだが、少しぐらいはできるようにと今回ちょっと作成してみた。
[1]図形を描く
まずはPhotoshopを開いて「角丸長方形ツール」で長方形を描く。この際色はなんでもいい。角丸は8pxぐらいがよりWeb2.0っぽくなる。
まずはPhotoshopを開いて「角丸長方形ツール」で長方形を描く。この際色はなんでもいい。角丸は8pxぐらいがよりWeb2.0っぽくなる。
[2]グラデーションエディタの編集
先ほど描いた長方形のレイヤーを選択しておく。次に、「レイヤー→レイヤースタイル→グラデーションオーバーレイ」を実行。以下のような画面が開くので「グラデーション」のバーをクリックしてグラデーションエディタの編集に入る。
先ほど描いた長方形のレイヤーを選択しておく。次に、「レイヤー→レイヤースタイル→グラデーションオーバーレイ」を実行。以下のような画面が開くので「グラデーション」のバーをクリックしてグラデーションエディタの編集に入る。
グラデーションバー下を3箇所クリックするとカラー分岐点が自動的に作成される。図では「57%」「61%」「92%」の位置にカラー分岐点を作成した。カラー分岐点をクリックすると下にあるカラー指定欄でカラーを指定できる。グラデーションバーを見ながら各カラー分岐点に好みの色を着けていく。
[3]微調整
これでほぼ完成。以下の図ではグレーの境界線を描き光彩(外側)で少し微調整した。しかし、[2]までの作業だけでも十分。これをベースに文字やアイコンなど入れるといろいろな場所で活用できる。
これでほぼ完成。以下の図ではグレーの境界線を描き光彩(外側)で少し微調整した。しかし、[2]までの作業だけでも十分。これをベースに文字やアイコンなど入れるといろいろな場所で活用できる。
前回CSSでの3カラムレイアウトについてコードを記述した。しかしBoxA、BoxB、BoxC全てが左にフロートしている組み方はあまりない。BoxA、BoxBをDivで囲んだものと、BoxCで2段組にするという「2段組」を基本にしたやり方がよく使われる。今回そのやり方でソースを記述してみた。
html ※↓いくつか<li>の閉じタグが消えています
01.<div id="wrapper">02.<div id="header"><h1>SITE TITLE</h1></div>03.<div id="box_ab">04. <div id="box_a">05. <div id="navi">06. <ul>07. <li>MENU08. </li><li>MENU09. </li><li>MENU10. </li><li>MENU11. </li><li>MENU12. </li><li>MENU13. </li></ul>14. </div>15. </div>16. <div id="box_b">17. <div id="navi">18. <h2>SUB TITLE</h2>19. <p>text text text text text text text text text text text20. text text text text text text text text</p>21. <p>text text text text text text text text text text text22. text text text text text text text text te</p>23. </div>24. </div>25. </div>26.<!--id="box_ab" End-->27. 28. 29.<div id="box_c">30. <div id="navi">31. <ul>32. <li>MENU33. </li><li>MENU34. </li><li>MENU35. </li><li>MENU36. </li><li>MENU37. </li><li>MENU38. </li></ul>39. </div>40.</div>41.<!--id="box_c" End-->42. 43. 44.<br clear="all">45.<div id="footer"><p>FOOTER</p></div>46. 47.</div>48.<!--id="wrapper End-->01.@charset "shift_jis"; 02./* ----------------------- 03.common.css 04.共通 05.------------------------ */06. 07./*初期設定*/08.body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,09.table,form,blockquote,pre,address{10. margin : 0;11. padding : 0;12.}13. 14./*個別整形*/15.h1,h2,p{16. margin-bottom:0px;17. margin-top:0px;18.}19. 20./*全体*/21.#wrapper{22. width:800px;23. border: 1px solid #000000;24. margin-right: auto;25. margin-left: auto;26.}27. 28./*ヘッダー*/29.#header{30. background-color:#FF0066;31. margin: 0px;32. padding: 0px;33.}34. 35./*フッダー*/36.#footer{background-color:#FF33FF;}37. 38./*box_aとbox_bを囲むdiv*/39.#box_ab{40. float:left;41. margin: 0px;42. padding: 0px;43.}44. 45./*左メニュー*/46.#box_a {47. float:left;48. width:150px;49. background-color:#FF99FF;50. height: 300px;51.}52. 53./*センターコンテンツ*/54.#box_b {55. background-color:#FFCCFF;56. float: left;57. width: 500px;58. height: 300px;59.}60. 61./*右メニュー*/62.#box_c {63. float:right;64. width:150px;65. background-color:#CC99FF;66. height: 300px;67.}68. 69./*textエリア整形*/70.#navi{padding:1em 1em; 20em; 1em;}71.#box_abc {72. float: left;73.}今回は最も頻繁に使用されるであろうCSSでの3カラムレイアウトについて。CSSでの3カラムの組み方はいろいろある。左から順にBoxA,BoxB,BoxCと横並びにする場合
1.BoxAを左にフロート、BoxBとBoxCを囲む。さらにBoxBを左にフロートBoxCを右にフロート
2.BoxAとBoxBを囲んで左にフロート、BoxA・BoxB自身にも左にフロート
3.BoxAを左にフロート、BoxBを右にフロート ※この場合BoxCはセンターになる
4.BoxA、BoxB、BoxC全て左にフロート
2.BoxAとBoxBを囲んで左にフロート、BoxA・BoxB自身にも左にフロート
3.BoxAを左にフロート、BoxBを右にフロート ※この場合BoxCはセンターになる
4.BoxA、BoxB、BoxC全て左にフロート
今回書いたコードは4であるが、このやり方はあまり見かけない。簡単な組み方だけに、全体を囲んでいる#mainの幅は#sidemenuの幅+#contentsの幅+#affiriateの幅が同じでないとレイアウトが崩れる。
index.html01.<div id="header">02. ヘッダエリア03.</div>04.<!--//id header-->05. 06.<div id="main">07. <div id="sidemenu">08. メニューエリア09. </div>10. <!--//id sidemenu-->11. <div id="contents"> 12. コンテンツエリア13. </div>14. <!--//id contents-->15. <div id="affiriate">16. 広告用エリア17. </div>18. <!--//id affiriate-->19. </div>20.<!--//id main-->21. 22.<div id="footer">23. フッタエリア24.</div>25.<!--//id footer-->01.@charset "shift_jis";02./* -----------------------03.common.css04.共通05.------------------------ */06. 07.body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,08.table,form,blockquote,pre,address{09. margin : 0;10. padding : 0;11.}12. 13.body{14. width : 100%;15.}16. 17./* ヘッダー */18.#header{19. width : 760px;20. height : 50px;21. margin : auto; /* 標準モードなので、これでセンタリング */22.}23. 24./* メニューと本文と広告部分をひとくくりするためのID */25.#main{26. width : 760px; 27. margin : auto;28.}29. 30.#sidemenu{31. width : 150px;32. float : left;33.}34. 35.#contents{36. width : 460px;37. float : left;38.}39. 40.#affiriate{41. width : 150px;42. float : left; /* 指定しないとFirefox,Operaで落ちる */43.}44. 45./* フッター */46.#footer{47. width : 760px;48. clear : both;49. margin : auto;50.}MT42BlogBetaInner
