• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:特殊(?)タグが反映しません)

ブログに面白い反映をするタグを探しています

756coの回答

  • 756co
  • ベストアンサー率79% (162/203)
回答No.16

成功しましたか。良かったです。 ◆スタイルの違い これは単なる私の書き損じです。 /*誤*/ .popup img , popup_d img { display:block; top:-10000px; left:-10000px; position:absolute; } /*正*/ .popup img , .popup_d img { display:block; top:-10000px; left:-10000px; position:absolute; } ↑では 誤の方の「popup_d」に ピリオド( . )がありません ( . )は「これはクラス名です」ということを示すようなものです。 /*誤*/ .popup a:hover , .popup_d a hover { position:relative; } /*正*/ .popup a:hover , .popup_d a:hover { position:relative; } ↑では 「popup_d a:hover」の コロン( : )があるかないかです。 a:hover は bodyタグの属性である alink="" と似たような働きをします。 

btiger
質問者

お礼

回答有難う御座いました これで今回質問の主旨は全て解決という事に、なります ただ、これで最後に、なると思いますが 今回の主旨としてはアイコンにカーソルを合わせた時 画像をポップアップで出したい…でした ただ、一部、画像にカーソルを合わせた時に 文字が出る設定の部分も、あるんですが その応用でアイコンにカーソルを合わせた時 文字が出る設定も考えました ただ、タグとしては、今迄の応用で考え <font title="文字"><span class="btm1">解説</span></font> と入れたんですが反映しませんでした ちなみに画像に合わせた時の文字は <font title="文字">画像URL</font> で作りました

関連するQ&A

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 特殊(?)なタグが知りたいです

    以前にも似た様な質問を、しましたが もう少し深く知りたくて再投稿しました 現在FC2ブログを運営してから 2ヶ月が経過しました ちなみにOSはビスタで、ブラウザはFirefox3.5です それで、面白い反映を、するタグを探してるんですが 結論から言うと ブログのプロフィール欄に ある画像を載せようと思ってます しかし、ただ載せるだけじゃ面白く無いんで 最初は画像が見えず、モーションを起こした時等に 画像と解説が出る様な設定を考えてます それで私も色々調べたんですが 私が知ってるHPは、こういうHPです http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/1/mojikome.htm http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/3/dialog-botan.htm そして、以前の投稿で教えて頂いたHPです ​http://www.intactmotor.com/hobby-interest/css-popup/​ そこで聞きたいんですが 主に画像系が希望なんですが 他に、こういうタグを知りませんか? あるいは、載ってるHPを御存知無いでしょうか? 尚、現在使用してるタグは 画像にカーソルを載せると、文字が出るタグです それで、通常はIEしか 反映しないのかも知れませんが 出来ればFirefoxでも反映するタグが有難いです 一応、自分でも探しましたが どう表現して良いかが分からなかった為… つまり、どういう言葉で検索すれば 見つかるかが分からなかった為 探せませんでした 従って、自分で探せ…と言う方 検索する言葉を教えて頂ければと思います

  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • 画像枠のタグ

    何度しても写真画像の枠ができないのですが、 枠をつけて枠の色と枠の太さを変更したいのですが。 このタグのどこが違うのでしょうか? (枠をつけて画像のサイズだけ変更している状態です↓) <img src="http://@@@@@.JPG" border=3 width="300" height="200"> <img src="http://@@@@@.JPG" width="300" height="200"border=3> 両方してみたんですが、両方共できませんでした。どこが違うのでしょか?これ↑に枠と枠の色をつけて枠の太さを調節する時はどこにどのようにタグを入れたらよいのでしょうか? 写真画像枠のタグの種類はborder=3、3のみでしょうか? 以前聞いたことがありますが、Macのブラウザー サファリでは変更しても反映されず見ることができないのでしょうか? お手数をお掛け致しますが、ご存知の方がおられましたら お知らせ頂けますととても助かります、宜しくお願い致します。

  • 一つのタグ内での要素の優先順位?ってあるのでしょうか?

    こんにちは。よろしくお願いします。 自分が作成していたWebシステムのページをアクセシビリティチェックツール~にかけ出てきたエラーのことでちょっと疑問に思い質問させていただきます。 ・一つのタグ内の要素の優先順位は、厳密に言うとあるのだろうか? ということなんですがー。。。 チェックにかけた項目は <img>タグです。 ・<img src ="img.gif" alt ="イメージ画像" width ="100" height ="100"> と ・<img src ="img.gif" width ="100" height ="100" alt ="イメージ画像"> と、の違いなのですが、上記タグではOKが出るのですが、下記タグでは、間違い!!と表示されるようです。 この場合、<img>タグ内の要素について、src→alt→width→heightという優先順位がついているのか、それとも、ただ単にそのアクセシビリティチェックツールのバグなのか。 タグ内要素の優先順位~についてご存知の方がいましたら、ご教授願えませんでしょうか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • IMGタグごとにCSSを設定する方法

    自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない(編集できない)状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか?最低限の希望は、大きい画像(160px*140px)をひとかたまり、サムネイル画像(32px*30px)をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML+JavaScript+CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。

  • 面白い(?)タグが知りたいです

    現在FC2ブログを運営してから 2ヶ月が経過しました ちなみにOSはビスタで、ブラウザはFirefox3.5です それで、面白い反映を、するタグを探してるんですかが 私が知ってるHPは、こういうHPなんですが http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/1/mojikome.htm http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/3/dialog-botan.htm 現在使用してるタグは 画像にカーソルを載せると、文字が出るタグです それで、通常はIEしか 反映しないのかも知れませんが 出来ればFirefoxでも反映するタグが有難いです そこで聞きたいんですが 主に画像系が希望なんですが 他に、こういうタグを知りませんか? あるいは、載ってるHPを御存知無いでしょうか? 一応、自分でも探しましたが どう表現して良いかが分からなかった為… つまり、どういう言葉で検索すれば 見つかるかが分からなかった為 探せませんでした 従って、自分で探せ…と言う方 検索する言葉を教えて頂ければと思います

  • 正規表現を使いimgタグ内から幅と高さサイズを抜き出し

    正規表現を使いimgタグ内から幅と高さサイズを抜き出し phpにて正規表現を使い html の imgタグ内の width = "xxx" height = "xxx" を各々抜き出しその数字も個別に抜き出したいと思っております。 正規表現で行き詰っており、お知恵を拝借できればと思っております。 説明がわかりづらいかと思いますが、よろしくお願いしたいと思います。 下記のような文字列より <img src="http://test.co.jp/img/test01.jpg" alt="テスト画像です。" title="テスト画像です。" width="361" height="640" class="size-full wp-image-100" /> width="361" height="640" を個別に取りだし さらにその中の数字"361"を取り出したいと思っております。 正規表現に不慣れなので、お知恵をお借りいただけないでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

    DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。 (当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな!という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。) これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。 (○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました)

  • タグについて

    画像の貼り付けタグ <img src="">は わかるのですが <img class="image" src=""> あいだにある class="image" は何を意味するのでしょうか?教えて下さい。