ブラウザ上でのタブ・シフトタブの動きについて質問です。
JSPを使って開発していて、
ブラウザはネットスケープ4.7を使用しているのですが・・・。

タブキーだと、ブラウザ上の項目を順番に
上から下へ下がっていき、一番上のアドレスを書き込む所まできて、
順にぐるぐる回るのですが・・・。
シフトタブとなると、きちんと一周しません。
(途中で、一番上のアドレスを書き込む所にいきなりもどってしまう。)

シフトタブでも、タブと全く逆の動きをさせたいのですが、
それを制御することはできるのでしょうか?

もし、知っている方がいらっしゃったら、教えて頂きたいです。
参考になりそうなHPなどありましたら、
それも教えていただきたいです・・・。

すみませんが、よろしくおねがいいたします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

ども^^



javascriptの記述を除いてテストしてみました。
すると、テキストボックス自体が表示されませんでした。
むっちゃ、びっくりしました。
ソース削った時に削りすぎたんでしょうね。(ほんとにびっくりしました)
それで、テストした結果は同じ現象が出ました。

正式な回答は出来ないのですが、もう一度タグの閉じ忘れや
下手に入れ子状態になっていないか、調べてください。

それとあやふやな記憶で申し訳内のですが、netscapeってtableタグに
弱いような。。。
ですので、tableタグのネストは、避けた方がいいかも。
こんな感じで変更するしか思い付きませんでした。

#適当サンプル
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
<html>
<body>
<form>
<table align="center"
width="450"
border="0"
name="tab_items2">

<tr bgcolor="#FFFFCC">
<td width="40%" height="30"> 経過日数</td>
<td height="30">
<input type="text" name="txtKeika" size="5" maxlength="3" tabindex="1">
</td>
</tr>
<tr>
<td><a href="">aaa</a></td>
<td><a href=""><img src="" name="search" border="0" alt="検索"></a></td>
<td><a href=""><img src="" name="clear" border="0" alt="取消"></a></td>
</tr>

</table>

</form>
</body>
</html>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

これでは、きちんとシフトタブでも動作しますので、少し変更されるのが
良いかと思います。(あくまで個人的に。)
他に誰かがいい案を出してくれるかもしれません。
時間がなくて、とりあえずこう言う風に変更できるなら変更してみるのも
いいかもしれません。
がんばってください。
    • good
    • 0
この回答へのお礼

mkimさん、ほんとうにありがとうございました!
とても参考になりました!
mkimさんに言われたとおり、タグの閉じ忘れなど、
ちょっと見てみたのですが、やはりうまくいきません。
IEだと、きちんと思うようにうごくので、
先輩と検討しました結果、mkimさんのおっしゃる通り、
ネスケのバグじゃないのかな?という結論にいたりました。
ネスケは「Table」にやはり、弱いみたいです。
今、プロジェクトマネージャーに「バグではないか?」と。
問い合わせ中です。
色々教えて頂いて、本当にありがとうございました!
こんなに、親切にして頂いて、とてもうれしいです。
がんばります!

お礼日時:2001/06/11 15:36

ども^^



私の所では、タブ移動順(tabindex)は、指定しておりませんでした。
作成したコンポーネント順にきれいに動いています。
シフトタブでも、きれいに動いています。(netscape4.75で確認)

ただ、chitamaさんと違う所と言えば、javascriptで別ウィンドウを
作成し、アドレスを打ち込むテキストは、表示させないようにしています。
アドレスを打ち込むテキストボックスに何か関係あるのでしょうかね^^;;

#すいません。お力になれず。また、何かわかりましたらご連絡いたします。

この回答への補足

調べて頂いて、本当にありがとうございます!
やはり、特に何もしてしておりませんでしたか・・・。
普通だったら、他から何かとくに指定していない限り、
タブと全く逆の動きをシフトタブでするということなのでしょうねぇ・・・。

もういちど、シフトタブで通らないコンポーネントを何か余計な
制御をしていないか、調べてみます!

あと、アドレスを打ち込むテキストボックスというのは・・・
ネットスケープの上にある、
(戻る・進む・中止・更新・ホーム・・・がある、バー)の下の、
アドレス(D)の所の事です (^_^;)
<アドレスバー?のことです>

専門用語を今いちまだ、使いこなしきれてないので、
うまく説明できませんでした!

すみませんでした!そして、
ありがとうございました!

補足日時:2001/06/11 11:03
    • good
    • 0
この回答へのお礼

すいません!お礼じゃなくて、コレは補足になるぶぶんなのですが・・・。
やっぱり、ソースを見てみても、きちんとシフトタブが効いてるものと
比べても、とくに怪しいところはないような気がします・・・(×_×;)


コレ(↓↓↓↓)がソースなのですが・・・

単純に、『経過日数』と書かれた文字の横にひとつテキストボックスがあり、
その下に、リンクがあり、その隣に、GIFを貼り付けたボタンがあるだけです。
*******************************************************
<table align="center"
width="450"
border="0"
name="tab_items2" >

<tr bgcolor="#FFFFCC">
<td width="40%" height="30" class="head2" > 経過日数</td>
<td height="30" class="textvar" >
<input type="text"
name="txtKeika"
size="5"
maxlength="3"
onFocus="selectAll(this);">
</td>
</tr>

</table>

<!-- ボタンなどの作成 -->
<table align="center"
width="450"
border="0"
name="tab_foot">
<!-- 一般用へのリンク -->
<tr bgcolor="#FFFFCC">
<td height="40" colspan=4>
<table border=0 cellspacing=0 cellpadding=4 width="100%">
<tr>
<td align=top>
<span class="head2">
<a href="../pwstatus/n_wqpwst.jsp" >一般用</a>

</span>
<span class="textvar">
</td>

<!-- ボタン -->
<!-- 検索ボタン -->
<td align=right>
<a href=""
onMouseOut="searchOff();"
onMouseDown="searchOn();"
onMouseUp="searchOff();"
onClick="doSearch(); return false;">

<img src="../Common/bt_search4.gif" name="search" border="0" alt="検索"></a>

<!-- 取消ボタン -->
<a href=""
onMouseOut="clearOff();"
onMouseDown="clearOn();"
onMouseUp="clearOff();"
onClick="doClear(); return false;">

<img src="../Common/bt_clear.gif" name="clear" border="0"           alt="取消"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
*******************************************************
特に怪しいところはないのですが、
タブキーだと、
「テキストボックス」
  ↓
「リンク」
  ↓
「検索」ボタン
  ↓
「取消」ボタン
と流れていくのですが、

シフトタブとなると、
「取消」ボタン
  ↓
「検索」ボタン
  ↓
「リンク」
  ↓
ブラウザの上にある、アドレスバー
と移動してゆくのです・・・ (-_-;)

なんだか、ちんぷんかんぷんになってきました・・・
クラスの内容は、スタイルシートなので、
ただ、文字の色や大きさを指定しているだけです・・・

何か、これで気づかれることがありましたら、お願いいたします!

お礼日時:2001/06/11 11:25

どもども^^



私もJSPを使ってwebサイトを構築しておりましたが、
タブ移動順は、正常に動きましたよ。
(仕様によりネットスケープ4.75&IE5.5で動作確認)
なので、できると思います。

今は、家からで会社でないと環境が整いませんので
月曜日でよければ調べてみたいと思います。
(テスト段階でシフトタブが漏れていなければ大丈夫なはず。。。)

この回答への補足

調べていただけますか!?
わざわざありがとうございます!
タブ順は、なにかタグで指定されていたのですか?
それとも、コンポーネント作成順で
うまくいくのでしょうか・・・。
うまく、テキストボックスの部分だけを
よけてから、シフトタブでは動くのですよねぇ・・・。
テキストボックスがなにかしらあるのでしょうか??

補足日時:2001/06/10 16:15
    • good
    • 0

お使いのブラウザの問題ではないですか?


他のブラウザでも同様の減少が起こるか試してみてはいかがでしょうか?
    • good
    • 0
この回答へのお礼

ありがとうございます!
早速IEで試してみたいと思います。

お礼日時:2001/06/10 16:14

コンポーネントを作った順番が関係しているのではないかとおもうので、もう一度、タブ移動させたいコンポーネント順に作り直すってゆうのはどうですか?



的外れだったらすみません。

この回答への補足

ご解答、ありがとうございます。
カーソルが移動して欲しい順番に、
コンポーネントは作成してあります・・・。

タブキーだと、順番に思うように移動してくれるのですが、
シフト+タブ(タブと全く逆の動きをする)だと、
ある項目を無視して一順するのです・・・。

この設定、不可能な事なのでしょうか?

タブではきちんと動くのに、
シフトタブになると、上手く行かない、
という理由が分からなくて困っています。

何か原因などは考えられますか?

補足日時:2001/06/08 15:37
    • good
    • 0

こんにちは。



JSPというや、アドレスを書き込む所・・・などがよく分かりませんけど(^^;
おそらくフォーム関係のことだと思われましたので、それについて
アドバイスさせて頂きます。

通常ならシフトタブで上に遡っていくはずですが、
tabindex属性で指定してみてはいかがでしょう?

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
・・・

と。これで動くと思います。

この回答への補足

ご解答、ありがとうございました。
わけの分からない言葉をかいてしまいまして、すみません (>_<)
アドレスを書き込む所とは、ブラウザの上の、現在いるアドレスを表示する、
テキストボックスのことです (*_*)
変な表現をしてしまい、すみませんでした!。

さっそく、「TubIndex」でやってみたのですが、全く効いてないようです・・・。
タブキーでも、指定した「TubIndex」を無視して、
上から流れるようにカーソルが動いていきます。
(何も(「TubIndex」を)指定してなかった状態と全く同じ動きになります)
書き方がまずかったのでしょうか?

何か他に方法はありませんか?

補足日時:2001/06/08 14:52
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QIE8のタブの着色の意味と解除方法

IE8で,新たに開くタブが,緑や青や黄色になる場合があります。

それぞれどんな意味や機能があるのでしょうか。
また,色つきのタブが並ぶと,どのタブのページを見ているかがわかりづらいので,着色されないようにしたいのですが,方法があればお教えください。

IEは好きなので,出来れば他のブラウザ変えたくはありません。

※OS: Win. 7

Aベストアンサー

タブグループで色分けする機能のようですね。
http://www.atmarkit.co.jp/fwin2k/productreview/ie801/ie801_04.html

次の手順の設定で、色が付かないようにできませんか?
(Internet Explorer 8 でタブに色をつけないようにする設定)
IEのメニュー[ツール] → [インターネットオプション]→ [全般] タブ の タブ の [設定] ボタンをクリック→ [タブグループを有効にする] のチェックを外す

Qタブブラウザのタブに、画像を表示するには

普段、タブブラウザ(Netscape)を使っているのですが、タブの先頭に画像が表示されるサイトがあります。たとえば、「goo」であれば、四角の中に「g」の文字が入っているマークが表示され、そのあとテキストで「goo」とあります。
この画像を表示させたいのですが、HTMLでどのように指定すれば良いのでしょうか?

Aベストアンサー

<head>タグと/head>の間で他に影響の出ないところ(分からない場合は</head>直前に)

<link rel="shortcut icon" href="アイコン名">

を入れてみてください。

テストしてないので分かりませんがこれで出来ると思います。
アイコン名にはちゃんとしたicoアイコンファイルを使ってください。
ネットスケープなのでpng画像でも表示されるかもしれません。(←テストしてないので分かりません。)

QBookSyncのIEタブの「変換前に削除する」チェックボックスの意味が分かりません。

BookSync2.43をダウンロードして設定を行っていますが、BookSyncのIEタブの「変換前に削除する」チェックボックスの意味が分かりません。

「変換ボタンを押してIEのお気に入りを変換先に指定する時に既存のお気に入りを削除したい場合にチェックを入れてください」とマニュアルには書かれていますが、意味不明です。

「変換前に削除する」チェックボックスにチェックを入れてBookSyncの「同期」または「変換」をクリックすると具体的にはどのようになるのでしょうか?もう少し噛み砕いて教えて下さい。

BookSyncの「同期」または「変換」の実行対象はGoogle ChromeとIE(IE7)の二つのブラウザーだけです。

Aベストアンサー

返還前に削除しないと、変換前には存在していて返還元には存在しないお気に入りが返還後に残ってしまうので。それを避ける機能です。

QDreamweaverCS6上とブラウザ上の表示違

DreamweaverCS6でホームページを作成しております。

画像に吹き出しをつけて、そこにテキストを配置するように、
下記のようにコーディングしています。

<div style="position: relative;"><img src="../img/aaaa.gif" alt="aaaa"><br />
<div style="position: absolute; top: 150px; left: 60px; width: 120px; height: 30px; font-size: 9pt; font-weight: bold; color: white; line-height: 180%; text-align: center;">
<p>あいうえお</p>
</div>
<div style="position: absolute; top: 150px; left: 370px; width: 80px; height: 30px; font-size: 13pt; font-weight: bold; color: white; line-height: 180%;">
<p>あいうえお</p>
</div>
<p>あいうえお</p>
<p>あいうえお</p>
</div>

ホームページは、一般的な2カラムで、左にメニュー、右にコンテンツといった配置です。

上記コードをブラウザ上で表示させると、Firefox,IE,chromeいずれも、きちんと右のコンテンツに表示されます。

しかし、DreamweaverCS6のソフト上でみると、左メニューの枠内に画像がはみ出ており、ブラウザ上ではきちんと表示できているのでいいのですが、なんだか気持ち悪くて、解決策がないかずっと考えています。

どうすれば、ソフト上でもきちんと表示できるのでしょうか?
それとも、相対位置や絶対位置を指定した場合は、ソフト上でバグのようなものがでることは仕方ないのでしょうか?

ご回答よろしくお願い致します。

DreamweaverCS6でホームページを作成しております。

画像に吹き出しをつけて、そこにテキストを配置するように、
下記のようにコーディングしています。

<div style="position: relative;"><img src="../img/aaaa.gif" alt="aaaa"><br />
<div style="position: absolute; top: 150px; left: 60px; width: 120px; height: 30px; font-size: 9pt; font-weight: bold; color: white; line-height: 180%; text-align: center;">
<p>あいうえお</p>
</div>
<div style="position: absolute; top: 150px; left: 370px...続きを読む

Aベストアンサー

デザインビューは効率よくコーディングするためツールで、確認用途のものではありません。
確認にはライブビューやブラウザ、スマートフォンを使います。

バグではありません。使い分けを。

デザインビューの基本的な使い方は、以下を参考にどうぞ
★デザインビューもできる子
http://oshare.jugem.cc/?eid=767
★第1回:デザインビューは使えない?
http://www.atmarkit.co.jp/fwcr/design/tool/dw01/01.html

他にも、カスタマイズすることでもっともっと便利になります。

Qタブが増えて…意味不明なサイトが…?

最近、普通にネットを見ていたら、勝手にタブが増えて、見知らぬサイト(フランス語のサイトとか、ゲームサイトとか…。)が出ます。
興味がないので、現れたらすぐ閉じていますが…。
あれにも、何かしらの原因があると思いますね。
その原因が分かる方、おられますか?

Aベストアンサー

怪しげなツールバーとか、アドオンが原因の可能性があります

http://support.microsoft.com/kb/2539143/ja

アドオンなしで同じ現象が起きるかどうかを一度確認

Qドリームウィーバー上での行間とブラウザ上での行間に違いが出て、困っております。

毎度、助けられております。
ドリームウィーバーでWEBサイトを作っております。
テキストをフォントの大きさを変えて入力しているのですが、

ご覧のように、
http://pandeiro.jp/suda/images/okwave.jpg

行間が違っています。
ずっと調べたり、考えたりしていたのですが、解決方法が見つかりません

どなたか助けていただけないでしょうか・・・

ソースはこちらから、ご確認くださいませ。
http://pandeiro.jp/suda/index.html


お手数かけますが、よろしくお願いいたします。

Aベストアンサー

>バージョンは、MX 2004 と記載があります。

このバージョンの、Dreamweaver では、CSS の解釈は結構怪しいと思います。余り信じない方が無難だと思います。CSS に関してはエディターで記載した方が良いと思います。

Dreamweaver MX 2004 で CSS を何とかしようとするのは、時間の無駄と思った方が良いと思います。個人的な意見ですが・・・。

>IE6は現在確認がとれておりません。
海外では判りませんが、国内はまだ多くの利用者がいます。一度位確認するのをお勧めします。

Qタブブラウザ「DonutRAPT」のRAPTってどういう意味ですか?

RAPTと翻訳サイトにぶち込むと「心奪われる」という意味になるらしいのですが、これでいいのでしょうか?
知っている方いらっしゃいましたら教えてください。

Aベストアンサー

直接的には、製作者さんのハンドルネームですね。>RAPT氏
由来はHypocrite_kさんご推測の通りのようですよ。

以下2行転載
>夢中だ〔形容詞〕、((格式語)) 心を奪われた,(...)でうっとりした、
>((格式語)) (...に)熱中した,夢中の,没頭している

RAPT氏のHP「RAPT's room」のURLを紹介します。(リンクフリー確認)
タイトルの「RAPT」の部分をクリックしてください。

参考URL:http://www.atmark.gr.jp/~s2000/rapt/

Qブラウザで表現できる動きやデザイン

ブラウザで表現できる動きやデザインを、生かすためには
どのような言語や技術が選択肢としてあげられますか?
(ブラウザの構造、仕組みを知りたいのではなく、ブラウザはどんな言語を解読してどんな表現ができるのかを知りたいです。)

世の中の、インターネットサイトには、目をひくような動きのある楽しいサイトがあります。
サイトの作り方の入門本を読むと、HTML、CSS、JavaScriptの言語を駆使して
作られていますが、世の中のサイトは、この3点だけで、作られているのでしょうか?

以下に例を示してみます。

<表現1 写真切り替え時のなめらかな動き>
以下は音響メーカーのサイト。中央に製品紹介の大きな写真があります。この写真のサイドに矢印があり、クリックすると、次の製品の絵が表示されます。この写真の切り替わり時に、少しずつ写真を変えるような動きがあります。
http://www3.jvckenwood.com/

<表現2 常に前方に文字を表示>
以下は、ファッションブランドを扱う会社のサイト。ページをスクロールしても常に前方に「chanel news」と表示されています。
http://chanel-news.chanel.com/ja_JP/home.page.3.html#2013_10_making-of-the-press-kit-spring-summer-2014-ready-to-wear


<表現3 前のページを「背景」にして、新しいページを表示する>
以下は、音楽フェスのサイト。ミュージシャンを選択すると、小さなプロフィールページを表示します。
プロフィールページは、ブラウザの真ん中に位置し、プロフィールページで隠せない背景は半透明な膜がかかっているかのようです。http://rsr.wess.co.jp/2013/artists/lineup/index.html


これらのサイトは、入門書に乗っているような地味なサイトとはかけ離れています。
アイデアで実現しているのでしょうか?それとも、JS,HTML,CSS以外の方法があるのでしょうか?
特定のブラウザだけで通用する技術ではなく、一般的な技術をご教授ください。

以上、宜しくお願いします。

ブラウザで表現できる動きやデザインを、生かすためには
どのような言語や技術が選択肢としてあげられますか?
(ブラウザの構造、仕組みを知りたいのではなく、ブラウザはどんな言語を解読してどんな表現ができるのかを知りたいです。)

世の中の、インターネットサイトには、目をひくような動きのある楽しいサイトがあります。
サイトの作り方の入門本を読むと、HTML、CSS、JavaScriptの言語を駆使して
作られていますが、世の中のサイトは、この3点だけで、作られているのでしょうか?

以下に例を示してみます...続きを読む

Aベストアンサー

ウェブサイトは仰るとおりHTML、CSS、javascriptの3点でデザイン、動きを表現しています。


表現1
これは写真の切り替えに、javascriptとcssを利用しています。
「jquery スライドショー」で検索してみてください。
javascriptを使用した様々なスライドショーがたくさん見つかります。


表現2
これはHTML+CSSで作られています。
ヘッダーをブラウザの上から17p下の位置に常に固定し、最前面に表示するように
CSSで指定しています。


表現3
これは表現1と同じく、javascriptとcssを利用しています。
ソースを確認するとfancyboxというスクリプトを使っているみたいですね。
これと似たもので有名なものに、LightBox2というものがあります。



他にもCSSだけで作るアコーディオンメニューや、
CSSとjavascriptで作るアコーディオンメニューなど面白いものもありますし、
アイデア次第でいろいろなものを作れるので、気になったサイトのソースを覗いて
調べてみると良いと思います。

IEやChoromeだったら、F12を押せば開発者ツールが表示されて、
気になったところの要素を簡単に調べることができますよ。

ウェブサイトは仰るとおりHTML、CSS、javascriptの3点でデザイン、動きを表現しています。


表現1
これは写真の切り替えに、javascriptとcssを利用しています。
「jquery スライドショー」で検索してみてください。
javascriptを使用した様々なスライドショーがたくさん見つかります。


表現2
これはHTML+CSSで作られています。
ヘッダーをブラウザの上から17p下の位置に常に固定し、最前面に表示するように
CSSで指定しています。


表現3
これは表現1と同じく、javascriptとcssを利用しています。
ソー...続きを読む

QMS_Accessでタブコントロールにコマンドボタン等を関連付ける方法

タブコントロールに最初からコマンドボタン等のオブジェクトを貼り付けるとそのタブに関連付けられますが、(そのタブに設定される?)
別のタブやタブ以外のフォーム上にいったん設定してしまったオブジェクトを、後から特定のタブに関連付けられますか?
単にタブ上に移動しても、そのタブには関連付けられていないようで、タブを切り替えても何も変化しません。
わかる方、よろしくお願いいたします。
(私の言いたい意味がわかるでしょうか?)

Aベストアンサー

そのオブジェクトを選択して、Ctrl-Xでカット、
タブストリップのコンテント部にフォーカスさせた状態で、Ctrl-Vで貼付ける、
って手順でどうでしょう。

Qタブ式グローバルナビのブラウザ崩れの件で

はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。
IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。
添付ご参照ください。
FireFOXだと大丈夫なのです。
ブラウザの崩れなので、どの様に修正すればよいか不明です。
どなたか教えてください。
宜しくお願い致します。
----html-------
<ul id="nav">
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
-----------

---------css-----------
#nav {
background-color: #ffffff;
margin: 0;
padding: 0;
list-style-type: none;
height: 2em;
width: 800px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00645C;
}
#nav li {
text-align: center;
float: left;
line-height: 2em;
}
#nav li a {
display: block;
width: 100px;
text-decoration: none;
color: #333333;
}
#nav li a:hover {
display: block;
width: 100px;
color: #00645C;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}
#nav .current_page_item a {
color: #FFFFFF;
background-color: #00645C;
}

はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。
IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。
添付ご参照ください。
FireFOXだと大丈夫なのです。
ブラウザの崩れなので、どの様に修正すればよいか不明です。
どなたか教えてください。
宜しくお願い致します。
----html-------
<ul id="nav">
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a ...続きを読む

Aベストアンサー

#nav li a {
display: block;
width: 100px;
text-decoration: none;
color: #333333;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
#nav li a:hover {
display: block;
width: 100px;
color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}
#nav .current_page_item a {
color: #FFFFFF;
background-color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}

この部分を置き換えてみてください。
最初から白いボーダーを表示することでレイアウトの崩れを防ぎます。

#nav li a {
display: block;
width: 100px;
text-decoration: none;
color: #333333;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
#nav li a:hover {
display: block;
width: 100px;
color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
border-left-color: #00645C;
}
#nav .current_page_item a {
color: #FFFFFF;
background-color: #00645C;
border-top-color: #00645C;
border-right-color: #00645C;
...続きを読む


人気Q&Aランキング

おすすめ情報