Window7
IE8を使っています。

ホームページにcssを使ったドロップダウンメニューを導入したいのですが、
li:hoverが効きません。
cssかhtmlが間違っているのかと思い、念のためいろいろなサイトから
cssドロップダウンメニューの例文をもらってきて
書き込んでみましたが、どうしてもサブメニューが表示されません。

たとえば、

【css】
/* メインメニュー */

#menu ul {
display:block;
list-style-type: none;
margin:0;
padding:0;
}

/* サブメニュー1段目 */
#menu ul ul{
display:none;
position:absolute;
top:100%;
left:0;
}

/* サブメニュー2段目以降 */
#menu ul ul ul {
top:0;
left:100%;
}

/* リスト */
#menu li {
float:left;
}

#menu li li {
clear:both;
}

#menu li:hover {
position:relative;
}

#menu li:hover > ul {
display: block;
}

【html】
<body>
<div id="menu">
<ul>
<li><a href="#">menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a>
<ul>
<li><a href="#">submenu3-1</a></li>
<li><a href="#">submenu3-2</a></li>
<li><a href="#">submenu3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul>
<li><a href="#">submenu6</a></li>
<li><a href="#">submenu7</a></li>
<li><a href="#">submenu8</a></li>
<li><a href="#">submenu9</a></li>
</ul>
</li>
</ul>
</div>
</body>


メニューにカーソルをもってきても、
サブメニューが表示されません。

原因や回避方法を教えていただけないでしょうか。
よろしくお願いします。

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

A 回答 (3件)

たぶんIEを使ってらっしゃる。


IEではDOCTYPEの記述などで標準モードか互換モードかをスイッチしますから、互換モード用にかかれたHTML/CSSを標準モードと混在して使うことは不可能です。
 私は基本的にすべて標準モードで作成しています。今は他のブラウザも多いし、IEもそちらを思考していますから将来的には・・

 スタイルシートをどちらでも使えるように書き換えるしかないでしょう。問題はここだけではないと思われますので
    • good
    • 1
この回答へのお礼

ありがとうございます。

標準モードに変更して、CSSを書き換えることにします。

BAがお一人にしかつけられなくて心苦しいですが、
標準モード・互換モードを教えていただき、今後の作業を決定することが
できたということで、ORUKA1951様をBAにさせていただきます。

お二方ともありがとうございました。

お礼日時:2011/04/13 16:26

HTML4.01の場合は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
システム識別子と呼ばれる後半の部分がないと動作しませんね。

ページ全体がどのようなレイアウトになっているのかわかりませんけど、システム識別子を入れた状態で css を調整されたほうがよいと思います。

DOCTYPE宣言も css も、そのままでと言われると私ではわかりませんので、他の回答者さんにお願いします。
    • good
    • 0
この回答へのお礼

何度もありがとうございます。

やはり、宣言文を変更した上で、cssを書き換えることにしました。

お礼日時:2011/04/13 16:23

DOCTYPE宣言が入っていると動作し、入っていない場合は動作しませんでした。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
以上、ご報告まで。

この回答への補足

ありがとうございます。
DOCTYPE宣言文を調べたところ、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

となっていました。

XHTMLは使えないので、今の宣言文はこのままで、
教えていただいた宣言文から後半のURL部分を追加したところ、動作しました。
が、HPの体裁が崩れました。

cssをこのまま活かしながら、動作させる方法はないでしょうか?
何度も申し訳ありません。

補足日時:2011/04/13 11:08
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qマンガ家かイラストレイターか。。

私は将来、絵関係の仕事に就きたいと思っております。

それで今年の秋にイラストレイターを目指そうと思い東京に持ち込みに行くべく、イラストを描いていたのですが、
なぜか描いている時にマンガを描きたい・・と思って悩みだし、手が止ってしまうのです;それにこのごろはなぜかイラスト描いていても楽しいと思えないのです。。

イラストレイターになりたいことは本当のはずなのに
どうしてかマンガを描きたくなってしまう。。
実際、1番初めはマンガ家になりたいと思っていたのですが
「なるのはイラストレイターより難しいだろう。。」とか描いても「上手くいかないなぁ。向いてないのかな?」と思いやめてしまったのです。

もう就職しないといけない時期になってしまったので
この秋の持ち込みの結果でこれからのことを決めようと
思い余計に焦ってしまっています;

家の経済が苦しいということもあり、絵の仕事に就くという夢は諦めるつもりはないのですがどうしても家のことについても悩んでしまいどうしたらいいのかわからなくなってしまっている状況です;

このようなことは自分で決めるものだと思いますが
自分でもわからなくなってしまったので。。
なにか参考になる意見がありましたらよろしくお願い致します。

私は将来、絵関係の仕事に就きたいと思っております。

それで今年の秋にイラストレイターを目指そうと思い東京に持ち込みに行くべく、イラストを描いていたのですが、
なぜか描いている時にマンガを描きたい・・と思って悩みだし、手が止ってしまうのです;それにこのごろはなぜかイラスト描いていても楽しいと思えないのです。。

イラストレイターになりたいことは本当のはずなのに
どうしてかマンガを描きたくなってしまう。。
実際、1番初めはマンガ家になりたいと思っていたのですが
「なるのはイラ...続きを読む

Aベストアンサー

私はイラストレーターと漫画家、両方やっております。
といっても漫画家はデビューしたばかり、
主たる肩書きはイラストレーターです。

私の場合も、漫画家をめざしたのが先でして、
それがなかなかうまくいかずに、イラストレーターとしての営業を開始しました。
もちろん、すぐに結果が出るものでもないので、
プロの漫画家さんの下でアシスタントもしていました。
イラストレーターの仕事が来るようになってからも、暇を見つけて漫画を描き、
ネットで公開していたところに、漫画編集部からお声がかかって現在の状況に至ってます。

絵の種類にもよりますが、
やはり人物・背景・お話しの3点が必要な漫画に比べ、
人物と簡単な背景だけで勝負できるイラストは、
プロを目指すには近道なような気がします。
イラストレーターはとにかく営業!一件でも多く出版社にファイルを見てもらうのが肝心です。
営業ファイル作りは、最初はつまらないものですよ。
漫画家も目指していたなら、迷いが生じるのは仕方ないことだと思います。
でも、営業ファイルに漫画も入れて「こういうのも描けるんです」
と逆に武器にしてしまう手もあります。

漫画家アシスタントもお薦めですよ。
漫画業界を肌で感じることができますし、
なにより訓練されるので、絵が旨くなります。
(そしてお金ももらえます^_^)

質問者さんの状況が、数年前の自分とあまりにも似ていたので、
じっとしてられずあれこれと書いてしまいました。
うまくまとまらずに、すいません。
何か参考になれば幸いです。

私はイラストレーターと漫画家、両方やっております。
といっても漫画家はデビューしたばかり、
主たる肩書きはイラストレーターです。

私の場合も、漫画家をめざしたのが先でして、
それがなかなかうまくいかずに、イラストレーターとしての営業を開始しました。
もちろん、すぐに結果が出るものでもないので、
プロの漫画家さんの下でアシスタントもしていました。
イラストレーターの仕事が来るようになってからも、暇を見つけて漫画を描き、
ネットで公開していたところに、漫画編集部からお声がか...続きを読む

QCSSのa:hoverが急に一部だけ効かなくなった

Web制作初心者です。

セオリー通りグローバルナビゲーションを

<ul><li><a href="***">内容</a></li></li>

で作り、CSSでa:hoverを設定し普通に機能していたのですが、急に
5項目あるナビのうち1つだけロールオーバーしても色が変わらない状態に陥ってしまいました。

どんな要因が考えられるでしょうか??

因みに、他のWeb制作時は全く同じやり方でしっかり機能しています。

Aベストアンサー

ウェブ製作ならfirefoxと開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )をお使いだと思いますが、それにfirebugというアドオンがあります。
それを使って、他の要素が上にかぶさっていないか確認してください。
また、
・その要素にhoverされているか
・hoverされた要素にスタイルが適用されるか

 たぶん、HTMLかスタイルシートの書き方に問題なければ、他の要素がかぶさっていることが原因でしょう。

Q漫画家さんにファンレター(イラスト)を送ろうと思っているのですが

よく漫画の最後の方に紹介されるファンからのイラストコーナーがありますよね?
私も今度送りたいと思うのですがわからないことがあり、質問しました。

イラストをハガキに描いてそのまま送っても(ファンレターの中に入れないで)いいのでしょうか?
あと、名前はHNだけではなく、本名も描いたほうがいいのでしょうか?

Aベストアンサー

はがきに直接描いて送っても大丈夫です。
が、スクリーントーンなど貼る場合、剥がれてくる可能性もあると汚れから守るためにも封筒に入れた方がいいです。

本名・住所は絶対に入れてください。

住所・氏名(本名)を入れることは常識ですよ。
お礼の手紙などを送ってくれる作家さんもいます。
それ以前にあて先が間違えたりした場合、あて先不明で帰ってくることも。。。郵便屋さんが困っちゃうでしょう。

QCSSで、リスト
  • の、アンカー行の、hover された行の、前行・次行の、色を変えたい
  • a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ(プラス記号)を用いて、
    a:hover + a {色を指定する指示} 
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可能にするには、

    一旦
    hoverしている当該行が
    リスト内の何番目かをしめす数値
    li:nth-child(数値)
    の数値を何らかの手段で取得して

    その
    数値-1
    数値+1
    を用いた何らかの指定方法で
    hover行の、前行・次行
    をセレクトするような
    セレクタを書かねば
    駄目なのかな??
    と思っています。

    これってCSSで出来ますでしょうか
    それか
    CSSにjavascriptを併用して
    やっと可能でしょうか

    どんなコード(スクリプト)
    になりますでしょう

    どなたか是非
    御指南くださいませ。
    よろしくお願い致します。

    a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ(プラス記号)を用いて、
    a:hover + a {色を指定する指示} 
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可...続きを読む

    Aベストアンサー

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
     でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは_に置換してあるので戻す。
    ★リキッドでデザインされています。
     HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    _<meta charset="utf-8">
    _<title>サンプル</title>
    _<meta name="description" content="">
    _<meta name="author" content="IRUKA">
    _<link rel="stylesheet" href="css/style.css">
    <style media="screen">
    <!--
    html,body{margin:0;padding:0;}
    h1,h2,h3,h4{margin:0;line-height:1.6em;}
    header,section,footer{
    _width:90%;
    _max-width:1000px;margin:0 auto;
    _position:relative;
    }
    header nav{
    _position:absolute;
    _top:100%;
    _left:10px;
    _width:160px;
    _z-index:100;
    }
    header nav ul,header nav ul li{
    _text-align:center;
    _list-style:none;
    _margin:0;padding:0;
    _line-height:30px;
    _position:relative;
    }
    header nav ul,header nav ul li{
    _margin-top:5px;
    }
    header nav ul,header nav ul li a{
    _display:block;
    _width:100%;height:100%;
    _text-decoration:none;
    _z-index:100;
    _position:relative;
    }
    header nav ul li{
    _height:30px;
    _width:100%;
    _border:2px outset gray;
    }
    header nav ul li:hover{
    _background-color:lime;
    _position:relative;
    }
    header nav ul li+li:hover:before{
    _content:"\A";
    _display:block;
    _width:100%;
    _height:100%;
    _position:absolute;
    _top:-39px;
    _left:0;
    _z-index:5;
    }
    section h2,section p,section section{
    _margin:0 180px;
    }
    section{min-height:300px;}
    section section p,section section section{
    _margin:0 10px;min-height:0;
    }
    section aside{
    _position:absolute;
    _top:0;right:0;
    _width:160px;
    _height:100%;
    }
    /* 色づけ */
    header{background-color:rgb(200,255,255);}
    section,header nav{background-color:silver;}
    section section{background-color:white;}
    section aside{background-color:fuchsia;}
    footer{background-color:rgb(255,255,160);}
    header nav ul li{background-color:white;}
    header nav ul li:hover{background-color:lime;}
    header nav ul li:hover+li{background-color:yellow;}
    header nav ul li+li:hover:before{background-color:aqua;}
    -->
    </style>
    </head>
    <body>
    _<header>
    __<h1 id="title">Your title</h1>
    __<nav>
    ___<ul>
    ____<li><a href="/Some">Some</a></li>
    ____<li><a href="/nav">navigation</a></li>
    ____<li><a href="/Products">Products</a></li>
    ____<li><a href="/Books">Books</a></li>
    ____<li><a href="/Links">links</a></li>
    ___</ul>
    __</nav>
    _</header>
    _<section>
    __<h2>A smaller heading</h2>
    __<p>
    ___記事色々
    __</p>
    __<section>
    ___<h3>見出し</h3>
    ___<p>
    ____記事・・・・・
    ___</p>
    __</section>
    __<aside>
    ___<h3>Something aside</h3>
    __</aside>
    _</section>
    _<footer>
    __<h3>A nice footer</h3>
    _</footer>
    </body>
    </html>

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
     でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは_に置換してあるので戻す。
    ★リキッドでデザインされています。
     HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    _<meta charset="utf-8">
    _<title>サン...続きを読む

    Q絵(イラスト)について回答お願いします。漫画家志望です

    絵について回答お願い致します。
    私は高校一年生の、漫画家志望で、少年漫画を目指しています。
    この絵についてなのですが…評価ではなく、この絵柄でも少年漫画でいけるかどうか、判断お願い致します。
    スキャンやアップの際に大分画像が伸びてしまっているかもしれません;
    申し訳ありません。

    Aベストアンサー

    これでだめということはありません。
    ただし劇を構成するには絵のバラエティが必要であり
    主役級の美形を数人描き分けることと
    美形でない主役級をたくさん描けることと
    街の八百屋とか魚屋とか銀行員とかいろんなタイプの
    あらゆる年代の人物を描く必要があります。
    ストーリーの大筋にかかわらなくても
    脇役をたくさん描けることが武器になるのです。
    あなたが示した顔を描く人はそれひとつしか描けずに
    終わってしまうケースが多いので、
    たくさんのキャラクタを描きわけることを
    こころがけてください。

    QIE9でa:hoverが効かない

    IE9でa:hoverが効かなくて困っています。
    droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか?
    以下ソースです。
    html

    <div id="navi">
    <div class="inner">
    <ul>
    <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する -->
    <li>
    <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する -->
    <ul>
    <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効かない -->
    <li><a href="メニュー1-2のURL">メニュー1-2</a></li><!-- ←ここのa:hoverが効かない -->
    </ul>
    </li>
    </ul>
    </div>
    </div>

    css

    #navi {
    background: url(naviの背景画像のURL) repeat-x left top #000000;
    border-bottom: 1px solid #000000;
    -moz-box-shadow: 0 0 3px #484848;/* Firefox用 */
    -webkit-box-shadow: 0 0 3px #484848;/* Safari,Google Chrome用 */
    box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    }
    #navi .inner {
    margin: 0 auto;
    width: 940px;
    }
    #navi .inner ul li {
    float: left;
    margin: 15px 0;
    padding: 0 10px;
    position: relative;
    }
    #navi .inner ul li a {
    padding: 5px 11px;
    color: #ffffff;
    text-decoration: none;
    }
    #navi .inner ul li a:hover {
    border: 1px solid #ffffff;
    padding: 5px 10px;
    color: #333333;
    background: #ffffff;
    background:linear-gradient(#eaeeee, #e2e3e3);
    background: -moz-linear-gradient(top, #eaeeee, #e2e3e3);/* Firefox用 */
    background: -webkit-gradient(linear, left top, left bottom, from(#eaeeee), to(#e2e3e3));/* Safari,Google Chrome用 */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3);/* IE6,7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#eaeeee, endcolorstr=#e2e3e3)";/* IE8 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
    behavior: url(/PIE.htc);
    }

    #navi .inner ul li ul {
    position: absolute;
    top: 39px;
    left: 0;
    zoom: 1;
    display: none;
    background: #dae4d7;
    border: 1px solid #8db0a0;
    border-top: none;
    border-bottom: none;
    font-size: 85%;
    width: 150px;
    }
    #navi .inner ul li ul li {
    float: none;
    padding: 0;
    margin: 0;
    background: none;
    }
    #navi .inner ul li ul li:hover {
    background: none;
    }
    #navi .inner ul li ul li a {
    color: #2d595f;
    text-align: left;
    display: block;
    background: url(icon画像のURL) no-repeat 5px center;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #8db0a0;
    padding: 5px 5px 5px 20px;
    }
    #navi .inner ul li ul li a:hover {
    background: url(hoer用icon画像のURL) no-repeat 5px center #2d595f;
    color: #ffffff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-top: 1px solid #2d595f;
    border-bottom: 1px solid #2d595f;
    border-left: none;
    border-right: none;
    padding: 5px 5px 5px 20px;
    margin: 0;
    }

    どこがおかしいのかわからないのでnaviv部分全体を載せます。
    宜しくお願いします。

    IE9でa:hoverが効かなくて困っています。
    droppy.jsというJavaScriptを使ってドロップメニューにしているのが原因でしょうか?
    以下ソースです。
    html

    <div id="navi">
    <div class="inner">
    <ul>
    <li><a href="サイトトップのURL">トップ</a></li><!-- ←ここのa:hoverは正常に動作する -->
    <li>
    <a href="メニュー1のURL">メニュー1</a><!-- ←ここのa:hoverは正常に動作する -->
    <ul>
    <li><a href="メニュー1-1のURL">メニュー1-1</a></li><!-- ←ここのa:hoverが効...続きを読む

    Aベストアンサー

    親要素のliにもhoverが効いてますね。
    a要素をdisplayblockにして、
    スタイルを統合したほうがいいのかもしれません。

    Q家(いえ)と家(うち)の違いは何ですか。

    家(いえ)と家(うち)の違いは何ですか。
    出来れば、例文も教えてください。
    3Q

    Aベストアンサー

    家とうちの違いについては既に説明がありますが、外国人が実際に使う場合は戸惑うことがあるでしょう。「うち」は内と書き外と区別します。つまり自分の家庭、家族であり、配偶者(うちの人)を指します。転じて家屋(家)を指すようになったため家(いえ)と家(うち)のように同じ漢字を当てたのでしょう。

    使用例:
    *隣の家は新しいがうちのは古いです・・・家
    *新しい家は気持ちがいい・・・家
    *うちにいる時はネクタイはしません・・・家、家庭
    *今度の日曜日うちにおいで・・・家、家庭
    *うちのは出かけています・・・妻(夫)
    *うちの会社はケチです・・・所属する団体
    *あまりうちを空けるな・・・家

    QCSSがFirefoxで効かない(IEでは効く)

    body{
       font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    }

    という記述をしているのですが、IE7では有効なのに、Firefox3では有効になりません。
    なぜなのでしょうか?

    ご存じの方いらっしゃいましたら、お教えいただけると幸いです。

    よろしくお願いいたします。

    *当方環境は、vista ultimate 64bitです

    Aベストアンサー

    簡単の指定は。
    <pre>タグと</pre>タグで挟まれたテキストは、記述されたスペースや改行等がそのままブラウザに表示されます。また、フォントは等幅フォントになります。
    別の方法では。
    margin-leftを使用していますが。IE7とFirefoxでは1pxの差が有りますので。必要のページは、javascriptを使用してIE7とFirefoxによりcssを変更していますが。

    Qイラストのギャラの相場についての質問です

    先日あるお医者様が書かれる本のイラスト3点の依頼を受けました。イラストの内容は細胞の構造のようなものですが特別複雑なものではありません。
    普通このような医学書で個人的に依頼されたものである時にいくら位が妥当といえる金額なのでしょうか…(-c-;

    Aベストアンサー

    長年専業イラストレーターでメシを食っているものです。ほとんど広告業界が守備範囲で、出版関係はそれほど経験がないのですが。
    ともあれ、イラストの見積もりは難しく、いまだにぼくも悩みます。
    とはいえ、既出のみなさんの回答はイラストレーターにとってやや気の毒なレベルに思えますが・・・。

    うちの高校生の息子のファミレスの皿洗いの時給が800円前後のようですから、ま、
    イラストの作成は一応クリエイティブな仕事、最低でもその3倍くらいの時給(2500円)をもとに考えてはどうでしょう。
    時給といっても、自分で失敗したロス時間は入れるべきではないでしょうし、逆に、先方の都合で修正したり、描き直したりした分は加算したいところです。

    ”特別複雑なものではない”といっても、実際のところどんな手間のものかわからないのですが、全体的な印象からは、トータル1万から3万、5万はむずかしそーというふうに感じます。

    先に書いた時給計算で、1万を下回るようであれば、1万円くらいは請求、3万以上になってしまえば、出た分はまけておく、くらいにお考えになってはいかがでしょう。

    長年専業イラストレーターでメシを食っているものです。ほとんど広告業界が守備範囲で、出版関係はそれほど経験がないのですが。
    ともあれ、イラストの見積もりは難しく、いまだにぼくも悩みます。
    とはいえ、既出のみなさんの回答はイラストレーターにとってやや気の毒なレベルに思えますが・・・。

    うちの高校生の息子のファミレスの皿洗いの時給が800円前後のようですから、ま、
    イラストの作成は一応クリエイティブな仕事、最低でもその3倍くらいの時給(2500円)をもとに考えてはどうでしょう。
    ...続きを読む

    QCSS:hoverでナビボタンの背景画像を変えたいのですが・・

    CSS:hoverでナビボタンの背景画像を変えたいのですが・・

    ナビボタンの左端に20pxくらいの余白をあけたいと思い、

    #navi li{
    list-style-type: none;
    line-height: 38px;
    font-size: 14px;
    padding-left: 20px;
    }

    としていました。が、hoverで背景画像が変わるように設定したところ、
    Paddingの部分だけリンクが無効になっていて、変更画像が右に20pxずれて表示されます。
    (リンク元のテキストの始まる部分からしかリンクが有効にならないので)
    display:block;の設定もしています。

    結局、私の知識ではPadding-leftを削除して、テキストの左側にスペースを挿入するという
    不細工な方法でしか思い通りの表示がされない状況です。

    CSSでの正しい設定方法を教えていただけないでしょうか。

    Aベストアンサー

    No1です。

    N02様がすでにお答えですが…

    >「IEを除く」とは?
    IEはリンク要素以外にhoverは設定されていません。


    どのような全体構成なのか不明ですが、動作するようにするには
    1)a要素をブロックにしてサイズを設定し、a要素の背景を変えるようにする
     (文字の表示位置の調整が必要かと思われます。)
     (=No2様のご回答)

    2)IEでもリンク要素以外のhoverが可能なようにして、li要素の背景を変える。
       ↑javascriptのライブラリを利用。 (ぐぐればすぐに見つかると思います)

    のような方法が考えらます。


    *他のサイトで実現できているのたいていのことは、ご自分でも実現可能です。
     ソースを見たり解説サイトを見るなどで、仕組みを研究してみましょう。


    人気Q&Aランキング