ホームページ作成 質問過去ログ

                                Page     992
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫   
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ▼CSSでテキストを画像に置き換える方法について  きんたろう 05/4/11(月) 17:58
   ┗Re:CSSでテキストを画像に置き換える方法について  カヅサツ 05/4/11(月) 18:12
      ┗Re:CSSでテキストを画像に置き換える方法について  きんたろう 05/4/11(月) 18:34
         ┣Re:CSSでテキストを画像に置き換える方法について  Pid 05/4/12(火) 1:32
         ┃  ┗Re:CSSでテキストを画像に置き換える方法について  naka@sukiero 05/4/12(火) 3:16
         ┃     ┗Re:CSSでテキストを画像に置き換える方法について  Pid 05/4/12(火) 11:54
         ┗Re:CSSでテキストを画像に置き換える方法について  Pid 05/4/12(火) 17:23

 ───────────────────────────────────────
 ■題名 : CSSでテキストを画像に置き換える方法について
 ■名前 : きんたろう
 ■日付 : 05/4/11(月) 17:58
 -------------------------------------------------------------------------
   winXP,IE6.0
こんにちは。XHTML+CSSで初めてデザインをしようと思ってます。
ざまざまなサイトを見て調べて、
XHTML上でテキストを書いて、それをCSSで画像に置き換えようと
思っているのですが、うまくできません。

現在のコードは
HTMLが
<ul>
<li id="m_btn_bar"><img src="images/navi_03.jpg" width="12" height="17" /></li>
<li id="m_btn001"><a href="#" title="コンセプト"><span>コンセプト</span></a></li>
<li id="m_btn_bar"><img src="images/navi_03.jpg" width="12" height="17" /></li>
</ul>

CSSが
ul{
list-style:none;
}
ul li {
display:inline;
}
ul li a span {
display:none;
}
#m_btn001 a {
background:url(../images/navi_btn_01.jpg) no-repeat;
width:79px;
height:17px;
}

となっています。

display:none;でテキストのみを消すことができると書いてあったのですが、
上記コードだとテキストと背景画像両方消えてしまいます。

情報不足の場合、指摘していただきながら教えて頂ければと思います。

よろしくお願いします。
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : カヅサツ  ■日付 : 05/4/11(月) 18:12  ■Web : http://kadu.vis.ne.jp/main/  -------------------------------------------------------------------------
   > display:none;でテキストのみを消すことができると書いてあったのですが、

違います。display:none; は指定された要素そのものを表示しません。
よって、a要素が空となってしまい、背景画像も表示されないという案配です。

<ul>
<li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト"
width="79" height="17"></a></li>
</ul>

では駄目なのでしょうか。画像が表示されない環境では、alt属性値が展開されます。
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : きんたろう  ■日付 : 05/4/11(月) 18:34  -------------------------------------------------------------------------
   カヅサツさん

こんにちは。早速の回答ありがとうございます。

>違います。display:none; は指定された要素そのものを表示しません。
>よって、a要素が空となってしまい、背景画像も表示されないという案配です。
なるほど。

><ul>
><li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト"
>width="79" height="17"></a></li>
></ul>
このやり方も考えましが、参考にしているサイトで
始めに書いたような、テキストを画像に置き換えているやり方をしていたので
それでやってみたいと思って質問させていただきました。

自分でもやりながらまたアドバイスを待ちたいと思います。
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : Pid  ■日付 : 05/4/12(火) 1:32  -------------------------------------------------------------------------
   ▼きんたろうさん:
>><ul>
>><li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト"
>>width="79" height="17"></a></li>
>></ul>
>このやり方も考えましが、

『テキストを画像に置き換えているやり方』であれば,まさにこれですよ(object 要素は IE では使い物にならないし)。それにどの道,img 要素の alt 属性は文法的に必須(無ければ文法エラー)です。

何をおやりになりたいのかイマイチ分からないので,もう少し詳しく説明して頂けますか。もしくは『参考にしているサイト』はどこか教えて下さい。

それから,一つのページ内で同じ id 属性値を何度も使うことはできません。http://www.kanzaki.com/docs/htminfo.html で XHTML の文法や精神を学んでおくと良いと思います。
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : naka@sukiero <naka_sukiero@hotmail.com>  ■日付 : 05/4/12(火) 3:16  -------------------------------------------------------------------------
   >もしくは『参考にしているサイト』はどこか教えて下さい。

こちらかも?
http://hpb.cool.ne.jp/wforum/wforum.cgi?mode=allread&no=5339&page=0
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : Pid  ■日付 : 05/4/12(火) 11:54  -------------------------------------------------------------------------
   ほほぅ,参考になりますた。

質問者さんはまず以下を熟読しませう。
http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%A5%AF%A5%ED%A5%B9%A5%DD%A5%B9%A5%C8%A1%A2%A5%DE%A5%EB%A5%C1%A5%DD%A5%B9%A5%C8

* * *

おまけ。ページ内の全ての <a href="URI">TEXT</a> を <img src="URI" alt="TEXT" /> に
変換してみるブックマークレット。たぶん IE だと動きません(IE のバグ)。

javascript:
(function(i) {
  while (i = this.length)
    this[--i].parentNode.replaceChild((function(anc) {
      this.setAttribute('src', anc.href);
      this.setAttribute('alt', anc.firstChild.data);
      return this;
    } ).call(document.createElement('img'), this[i]), this[i]);
} ).call(document.getElementsByTagName('a'));

※こう書けばたぶん IE でも動きます。書き方の好みの問題 (^^;)。
javascript:
(function() {
  var i, nodes = document.getElementsByTagName('a');
  while (i = nodes.length) {
    var node = document.createElement('img');
    node.setAttribute('src', nodes[i - 1].href);
    node.setAttribute('alt', nodes[i - 1].firstChild.data);
    nodes[i - 1].parentNode.replaceChild(node, nodes[i - 1]);
  }
} )();
 ───────────────────────────────────────  ■題名 : Re:CSSでテキストを画像に置き換える方法について  ■名前 : Pid  ■日付 : 05/4/12(火) 17:23  -------------------------------------------------------------------------
   ひょっとして

#m_btn001 a {
 display: block;
 width:79px;
 height:17px;
 background: url("../images/navi_btn_01.jpg") no-repeat;
}

#m_btn001 span {
 visibility: hidden;
}

のようにしたいのだろうかとふとオモタ。

なお,非置換インライン要素である a 要素にそのまま width/height 指定しても意味が無いので注意(→ http://www.mozilla.gr.jp/standards/webtips/webtips0030.html)。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━    通常モードに戻る  ┃  INDEX  ┃  ≪前へ  │  次へ≫    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━                                 Page 992