初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。
ちなみに画像の作成は、フォトショップCS6で次のように作成しました。
(1)カンバスサイズを、幅800px、縦60pxで作成
(2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。
※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。
(3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える
(4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる
※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。
(5)手動にて連結した画像をカンバスサイズの位置に合わせる
(6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる
(7)上5つにある会社概要などの文字を一括コピーする。
(8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる
※大変でしたが、グリッド機能を使って、調整しました。
以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。
フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。
いろいろな方からご教示を頂きたいです。本当にお願い致します!!
<!-- /以下HTML -->
<ul id="globalnavi">
<li id="menu1"><a href="#"></a></li>
<li id="menu2"><a href="#"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="#"></a></li>
<li id="menu5"><a href="#"></a></li>
</ul>
<!-- /以下CSS -->
#globalnavi {
margin: 0;
padding: 0;
}
#globalnavi li {
width: 160px;
height: 30px;
float:left;
text-align: center;
line-height: 3.5;
margin:0;
padding-left:0;
}
#globalnavi a {
float:left;
display: block;
text-decoration: none;
width: 160px;
height: 30px;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}
#menu1 a { background-position: 0px 0px; }
#menu2 a { background-position: -160px 0px; }
#menu3 a { background-position: -320px 0px; }
#menu4 a { background-position: -480px 0px; }
#menu5 a { background-position: -640px 0px; }
#globalnavi a:hover {
text-decoration: none;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}
#menu1 a:hover { background-position: 0px -30px; }
#menu2 a:hover { background-position: -160px -30px; }
#menu3 a:hover { background-position: -320px -30px; }
#menu4 a:hover{ background-position: -480px -30px; }
#menu5 a:hover{ background-position: -640px -30px; }
No.1ベストアンサー
- 回答日時:
この様な作業は、画像までで後はテキストエディタを使うほうが楽ですね。
(5)移行の手順はテキストエディタで行いましょう。手順を追って説明しておきます。
たぶんtext-decorationのためでしょう。
[HTML]は 以下タブは_に置換してあるので戻してください。
<ul id="globalnavi">
_<li><a href="/index.html">TOP</a></li>
_<li><a href="/product"></a></li>
_<li><a href="/books"></a></li>
_<li><a href="/information"></a></li>
_<li><a href="/contact"></a></li>
</ul>
だけでよいです。
#globalnavi,#globalnavi li{
_display:block;list-style:none;/* ブロック要素に一旦変更 */
_margin: 0;padding: 0;/* 一旦消す */
_text-align:center;line-height:30px;/* 幅・高さの中心に来るように */
}
#globalnavi li{
_width: 160px;height: 30px;
_display:inline-block; /* よほど古いブラウザでない限りfloat:left;でないほうが良い */
}
#globalnavi a {
_display: block;
_text-decoration: none;
_width:100%;height:100%;
_background: url(./img/menu-all.gif) no-repeat 0 0 ;
_text-decoration: none;
}
#globalnavi a[href="/index.html"] { background-position: 0px 0px; }
#globalnavi a[href="/product"]{ background-position: -160px 0px; }
#globalnavi a[href="/books"]{ background-position: -320px 0px; }
#globalnavi a[href="/information"]{ background-position: -480px 0px; }
#globalnavi a[href="/contact"]{ background-position: -640px 0px; }
#globalnavi a[href="/index.html"]:hover,
#globalnavi a[href="/index.html"]:focus { background-position: 0px -30px; }
#globalnavi a[href="/product"]:hover,
#globalnavi a[href="/product"]:focus{ background-position: -160px -30px; }
#globalnavi a[href="/books"]:hover,
#globalnavi a[href="/books"]:focus{ background-position: -320px +30px; }
#globalnavi a[href="/information"]:hover,
#globalnavi a[href="/information"]:focus{ background-position: -480px -30px; }
#globalnavi a[href="/contact"]:hover,
#globalnavi a[href="/contact"]:focus{ background-position: -640px -30px; }
★ブラウザごとにpaddingやmarginの差があるので一旦消してください。
★a要素はblockにしたのち、whidth,heightを100%にするほうが良いです、
これは先でリキッドデザインにしたときなどに書き換えなくてすむとか色々利点があります。
★アクセスビリティ・ユーザビリティを考えるとli間にmarginをとるほうが良いです。
#globalnavi li{margin-left:4px;}/* #globalnaviに同系の背景色を指定すること。
★idをつけるより要素セレクタのほうが絶対に楽です。今回は一枚の画像でしたがそれぞれに画像を用意した場合に次のように書けますから、後々のメンテナンスが楽です。
#globalnavi a[href="/index.html"] { background-image:url(./images/goTop.gif); }
とかね。そうするとリストの順番を変えても良いでしょう。
★マウス以外のアクセスを考えると:hoverと一緒に:focusも指定しておきましょう。
★ついでに:activeと:visitedも記載順は
:link
:visited 以上二つは排他的なので順不同
:hover :focus
:active;
★スタイルシートを書くポイント
1) 同じ師弟を何度も書かないように出来るだけグループ化する。
2) 継承するプロパティは繰り返し書かない。
3) 同じ系統の指定はまとめて一行にする。
width:100%;height:100%
それだけで、一覧性が良くなってメンテナンスが楽になります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
safariでの横並びリスト(List...
-
画像と一緒にスライドするリン...
-
widthやheightの数値に単位(px...
-
hpビルダー 複数の表の罫線を...
-
<div>と<div>の間の10px程の...
-
ディスプレイのサイズに合わせ...
-
html5 2段組で行頭を揃える方法
-
divで囲まれたpaddingの指定を...
-
cssで投稿した画像を中央に表示...
-
embed タグを用いると表示が遅い
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報