• ベストアンサー

cssのcontentプロパティについて

カスケードスタイルシートのcontentプロパティに相当する、IEでの設定方法について、ご存知の方教えていただけないでしょうか。 Webページ作成時、各ページに決まり切った文字列を<body>中に表示させる場合に、適当なclassを定義しておけば手軽に使えると考えたものですから。 JavaScriptは、いろいろと差し障りがあって使いたくないもので、cssで処理しようと思っています。

質問者が選んだベストアンサー

  • ベストアンサー
  • LLLuna
  • ベストアンサー率35% (13/37)
回答No.6

表示させたい文字列が其のHTML文書に必要なものであればHTMLに直接書き込んでください。飾りなど、特になくても“支障がない”場合にのみ、CSSやJavaScriptで表示させて差し支えありません。 HTMLは見出しや段落、参照や引用といった文書構造をマークアップする言語です。 CSSはレイアウトなどの感覚的表現を指定する言語です。飽く迄付加的なものであって、必ずしも指定したCSSが使われるとは限りません。 HTMLとCSSは、それぞれ担当が異なるので、単純に置き換えることは出来ません。 同じことを書くのが面倒なだけであれば、予めテンプレートを作っておけば良いでしょう。 なお、contentプロパティ並びにbefore・after疑似要素は、遺憾なことに近々リリースされるであろうIE7でも実装されません。個人的には有用なものなのですが……。一番シェアのあるブラウザのCSS実装が他と比べて糞なのには困ったものです。

horsetail_
質問者

お礼

ありがとうございます。 そうですか、IE7でも実装されないのですか。

その他の回答 (5)

noname#39970
noname#39970
回答No.5

No4で満足できないならxml+xslじゃない？CGIはローカルテストできないので除外だとしても。 content自体が(略) 文字を挟み込むには他にはもうあなたの絶対使いたくないjavascriptしか残ってない。第一javascriptで差し障りが有って使いたくないのにIEというそもそも標準仕様に差し障りを(略)。 できないものはできない。みんな歯がゆい思いをしながらhtmlに直接入れたりしてきた。 嫌なら実装された機能を持つブラウザ、具体的にはIE7が定着するまであきらめるべき。無理でしょ？そんなの。

horsetail_
質問者

お礼

ありがとうございます。 良く分かりました。

noname#39970
noname#39970
回答No.4

>長い記述を繰り返し記述することになりますよね cssのなんたるかがまだ良く判ってないの？ これは単に1個に直接styleを書き込んでるだけ。 headで定義かまたは外部ファイルにすればidまたはclass名を書くだけになる。 判ってなかったようだから書いておくね htmlへの外部css読み込み方法やheadで定義する方法は省略するとして -------style .NewMark { padding-left:30px; background:url(/images/new.gif) no-repeat left center; } -------html <span class="NewMark">新着１</span> <span class="NewMark">新着２</span>

horsetail_
質問者

お礼

例文までお手間をお掛けし恐縮です。質問の趣旨は、contentプロパティに関するもので、コンテンツとしては、文字列を考えています。ご教示のケースは、contentプロパティで、画像をコンテンツとする場合に類似の方法だと思います。ご教示のコードでは、"新着１"や"新着２"という文字列までを含めて、手短く表示することはできないのではないでしょうか。もっとも、文字列を画像として表示する方法については、検討済みです。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#2>質問の仕方が悪かったのでしょうか、ご回答の内容は知った上での質問でした。 #2は、類するものもないということです。 （ＩＥでの）ＣＳＳではできません。

horsetail_
質問者

お礼

質問が悪くて、重ねて失礼しました。CSSの代替手段として、何か良い方法はないかと考えていましたので。つまるところは、定型のHTMLドキュメントを出力するプログラムを作ってしまえば良いと、いうのが現在の結論になりそうです。お騒がせをいたしました。ありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

ＩＥでＣＳＳのcontent に相当するものはありません http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp

horsetail_
質問者

お礼

ありがとうございます。質問の仕方が悪かったのでしょうか、ご回答の内容は知った上での質問でした。

noname#39970
noname#39970
回答No.1

こんなのは？ <span style="padding-left:30px;background:url(/images/new.gif) no-repeat left center;">新着情報</span>

horsetail_
質問者

お礼

ありがとうございます。これでは、ご回答にある長い記述を繰り返し記述することになりますよね。勿論、目下は自作のテンプレートを使っていますが、そのレベルと差異のない方法ではないでしょうか。

  1. カテゴリ
  2. インターネット・Webサービス
  3. ブラウザ

関連するQ&A

  • IE8でCSSハックが効かないです。

    IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト　黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト　IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト　IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。　尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 外部css定義したｃｌａｓｓをhtmlで引き継ぎ別名で定義する方法

    いつもお世話になります。 外部cssで、例えば xyz.css div.abc{ font-size:13px; width:100px; height:120px; border:solid; border-width:2px; border-color:#460675; } などと定義し、 htmlで <link rel="stylesheet" href="xyz.css" type="text/css"> <style type="text/css"><!-- div.def{ ここで、class abc の内容の一部のみ変更、追加をしたいんですが、 その記載方法がわかりません。 } --></style> 次のようにしてもできますが、 <div class="abc" style="ここに記載" ・・・・ JavaScriptで、classを切り替えて使用したいので、 cssで定義したclassを基に新たなclassを新たな名前でそれぞれのページでできないものかと調べています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • かなり困ってます！CSSが適用されません…

    WindowsXPでDreamweaverMXを使っています。 body {font-size: 12px;} .px10 {font-size: 10px;} という内容の外部スタイル「css.css」を作り、テンプレートに「css.css」を適用しました テンプレートを元にページをつくり、部分的に <td class="px10">文字列</td> といった感じで適用しました。 Dreamweaver上ではちゃんと適用されているのですが、ブラウザでみてみると文字が小さくなっていません。 bodyの12pxはブラウザ上でもちゃんと適用されています。 何がいけないのか、わかりません。どなたか解かるかたがいたらお知恵をかしてください。

    • ベストアンサー
    • HTML
  • 【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・

    IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。 CSSで２つのBOX（outboxとinbox）と定義します。 outboxの定義の中にinboxを配置します。 outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。 ソースは以下です。 test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test page</title> <style type="text/css"> <!-- .outbox { margin-top:100px; margin-left:auto; margin-right:auto; width:449px; height:270px; background-image:url("test.gif"); background-repeat:no-repeat; } p.inputbox { margin-top:120px; margin-left:110px; } --> </style> </head> <body> <div class="outbox"> <p class="inputbox">aa</p> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSのJavaScript参照

    JavaScriptによって変数に代入された文字列をCSSで参照し、 指定した場所に表示したいのですが、変数名が表示され代入された文字列が表示されません。 ソース <html><head> <title>a</title> <style type="text/css"> <!-- .str{ top:100px; left:10px; position:absolute; }--> </style> </head> <body> <div class="str3">str();</div> //ここで変数strに代入されたaを表示したい <SCRIPT LANGUAGE="JavaScript"> str = "a"; str(){document.write(str);} </SCRIPT></body></html> 初心者のため、間違いが多々あると思いますがよろしくお願いします。

  • FirefoxだとCSSが利かない

    はじめまして。独学でHTMLを勉強しているのですが、"test_index.html"という 名前のファイルを作成してみました。内容は以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>TEST</title> <link href="test_style.css" rel="stylesheet" type="text/css"> </head> <body> <p class=01>TEST</p> </body> </html> CSSファイル"test_style.css"の中身に .01{color:red} とだけ書いて表示させてみましたところ、IE6とLunascapeでは問題なく赤く表示 されるのですが、Firefoxでは反映されませんでした。 低次元の質問かとは思いますが、解決策をご教示頂ければと思います。 どうぞよろしくお願いします。

  • CSSについて教えてください。

    携帯向けのサイトを作っています。 contentの文字列が画面からはみ出るので指でスワイプした分だけ スクロールしたいのですがCSSでできますでしょうか？ スクロールバーは表示させたくないのでCSSで無効にしてあります。 どうかよろしくお願いいたします。 <div class="box"> <div class="content"> あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ </div> </div>

    • ベストアンサー
    • CSS
  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する