- 締切済み
単語で先頭の文字色
"Goo Mail Advance" と文字列があった場合に, G と M と A の 文字色を変えたいのですが, <p><span…>G</span>oo <span…>A …</p> としないと出来ないのでしょうか?? <p class="先頭の文字色を変える">Goo Mail Advance</p> 風には出来ないのでしょうか?
- みんなの回答 (7)
- 専門家の回答
みんなの回答
- Bo_Bo
- ベストアンサー率65% (97/149)
#2 です。 #6 のHTML例文を訂正します。 <html><head><title>TEST</title> <style type="text/css"><!-- .myCapitalize { color: red; font-weight: bold; } .capAural { display: none; } @media aural { .capAural { display: block; /* speak: normal; */ } .capVisual { display: none; speak: none; } } --></style> </head><body> <p class="capAural">Goo Mail Advance</p> <p class="capVisual"><span class="myCapitalize">G</span>oo <span class="myCapitalize">M</span>ail <span class="myCapitalize">A</span>dvance</p> </body></html>
- Bo_Bo
- ベストアンサー率65% (97/149)
#2 です。 >心配したのは,音声での読まれ方なのです。 最初の質問文に、それを記述して欲しかったな~。 mediaタイプを活用する方法が浮かびますが、私も質問者殿と同じく、音声ブ ラウザで確認する術を持っていません。ですので、以下の例文は参考程度に 考えて見て欲しいです。 また、通常のブラウザであっても、クライアントの環境(種類、バージョン) によっては、意味不明な表示がなされるかもしれません。 結局、#5 さん回答の画像を用いる方法が、最も現実的かなと思います。 ●mediaタイプでCSSの住み分けをして、「音声スタイルシート」を使用する。 <html><head><title>TEST</title> <style type="text/css"><!-- .myCapitalize { color: red; font-weight: bold; } .capAural { display: none; } @media aural { .capVisual { display: none; speak: none; } } --></style> </head><body> <p class="capAural">Goo Mail Advance</p> <p class="capVisual"><span class="myCapitalize">G</span>oo <span class="myCapitalize">M</span>ail <span class="myCapitalize">A</span>dvance</p> </body></html> ---- 「音声スタイルシート」に関しては、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/aural.html を参照してください。
お礼
何度も気にしてくれて,ありがとうございます。 > 最初の質問文に、それを記述して欲しかったな~。 ですよねぇ。ごめんなさい。 返信が遅れたので,#7 へ返信します。
- hiro_izushi
- ベストアンサー率40% (72/178)
私も、CSS"first-letter"を使い、 <span class="myCapitalize">Goo</span><span class="myCapitalize">M… で良いと思ったのですが、ダメと言うのなら、いっそ、画像を使ってしまっては、いかがでしょう。 音声ブラウザは、altを読んでくれるので <img src="image.gif" height="30px" width="200px" alt="Goo Mail Advance"> としておけば良いかと。 この場合、テキストブラウザで表示されないことがあると言われるのならば、CSSのバックグランドイメージを使う方法。 ●CSS .goo_mail_advance { height: 30px; width: 200px; background-image: url(image.gif); background-repeat: no-repeat; } .hide { display: none; } ●HTML <div class="goo_mail_advance"> <p class="hide">Goo Mail Advance</p> </div> もありますが、この場合はプリントアウトの際に"Goo Mail Advance"が印刷されないことがあるので、プリント用のスタイルシートも作成しなくてはなりません。
お礼
> <span class="myCapitalize">Goo</span><span class="myCapitalize">M… これですかね。 > この場合、テキストブラウザで表示されないことがあると言われるのならば Lynx for Win32 ってのを使ってるんですが,alt の中身を表示してくれます。 テキストブラウザはこれしか使ってませんので,他のは知りませんでした。今後注意します。 > もありますが、この場合はプリントアウトの際に"Goo Mail Advance"が印刷されないことがあるので 回りくどくなっちゃいますが,この方法も良いですね。
#3です。 > JavaScriptとかCGI、PHPを使えばできるんだけどね~。 と言ったものの、「JavaScriptはどうだろう」という気がしてきた。 普段使わないので自信ないです。PerlとかPHPなら簡単だろうけど。 とりあえず訂正しときます。すみません。
お礼
JavaScript は,殆ど使わないので忘れちゃいました…。 訂正を,ありがとうございます。
JavaScriptとかCGI、PHPを使えばできるんだけどね~。 といっても結局は<span…>G</span>oo <span…>A …を自動生成するんだけど。 spanタグの入力が面倒だっていうんなら有効かも。 CSSでやるとなると、う~ん。やれないんだろうな。
お礼
> CSSでやるとなると、う~ん。やれないんだろうな。 そぉですかぁ…。 これ位出来ても良いのに。と思いますが……。 <p>GMA とは <span…>Goo M…</span>の略語で… なんて機会あると思うんだけどなぁ…。
- Bo_Bo
- ベストアンサー率65% (97/149)
出来ないでしょうね。 ただ、段落の先頭文字のみを対象にするのであれば、CSSで書式設定できます。 <html><head><title>TEST</title> <style type="text/css"><!-- .myCapitalize:first-letter { color: red; font-weight: bold; } --></style> </head><body> <p class="myCapitalize">Goo Mail Advance</p> </body></html> ---- Firefox 1.0, IE6, Opera 7.5 でのみ検証!
お礼
心配したのは,音声での読まれ方なのです。 <span…>G</span>oo とした時,"ジー",オーオー になるかなって。 それで思ったんですが, <span class="myCapitalize">Goo</span><span class="myCapitalize">M… なら,グー,メール,アドバンス になる気が。 ま,音声ブラウザ持ってないんですけどね。
補足
「色は無理ですが」を,入れ忘れました。
- rightegg
- ベストアンサー率41% (1357/3236)
こんばんは、 CSSを使わなくても良いのであれば、 <font color="#色指定">G</font> で変えることも出来ます。 文字抜きだしで変えるのは、不可能だとまでは言いませんが、結局かなり難しくなるはずです。
お礼
ども。 <font> では,その通りだと思います。 Cascading Style Sheets で。と思っています。 > 文字抜きだしで変えるのは、不可能だとまでは言いませんが、結局かなり難しくなるはずです。 text-transform:capitalize; 風に色を変えたかったんですが,難しいですかぁ…。 でも,出来なくは無いって事ですよね??
お礼
@media aural で,ってのも良いですね。 でも今度気になるのは, どちらにもスタイルが適応されずに2行表示されるかな。って事です。 img で やってみようかな。