• ベストアンサー

ホームページ作成のタグに関してです。

ある文字の上にカーソルを乗っけると文字が変わるように設定しています。 通常はフォント、サイズともに指定しています。 カーソルが乗った時は何も指定していません。 カーソルを離した時に通常のフォント、サイズともに指定されている状態に戻したいのですが、何も指定されていない状態になってしまいます。 mouseout innertext=''の部分にフォントとサイズ指定をする方法があれば教えて下さい。 分かりにくい質問ですが、分かる方よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

基本的なことですが、タグはデザインするために書くものではありません。 HTMLは、文章をそれを構成する要素(部品)に分解して、その部品がどのような要素(element)であるかをタグを使ってマークアップするものです。--HTMLを作成する上で最も重要な、というか本質です  特定の文字が略語や頭文字でしたら<abbr>というタグを使ってそれが略語であることを示します。適当なタグがないときは<span>とclass名を使ってマークアップします。 【引用】____________ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より  たとえば、次のように書きます。 <blockquote><!-- 引用のブロックであることを示す --> <p><!-- 段落 --> <abbr title="Hyper Text Markup Language">HTML</abbr>は、どんな環境からも<span class="memo">Web</span>の情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つ<abbr title="Parsonal Computer">PC</abbr>や、<span class="devices">携帯電話</span>、<span class="devices">モバイル機器</span>、<span class="devices">音声入出力機器</span>、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 </p> </blockquote> というふうに、誰が読んでも、あなたが数年後に読んでも、機械が読んでも、この部分が引用であり、ひとつの段落があり、その中に略語があり、デバイス名を示す単語があるとわかりますね。これがHTMLの目的です。  それをどのように表現するかはスタイルシートと言う別の仕組みです。<h1>で括ると</h1>大きな文字で前後にすこし間隔が取られるのは、ブラウザが持っているスタイルシートによるもので、読み上げソフトは大きな声で読むでしょうし、検索エンジンはそこが見出しだと理解できます。 『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』  このあたりを読んでおくと良いでしょう。 >mouseout innertext=''の部分にフォントとサイズ指定をする方法があれば教えて下さい。  javascriptを想定されているのだと思いますが、javascriptは無効になっていたり、使えないブラウザもあのでスタイルシートで指定すほうが楽です。  下記に、サンプルを上げておきます。一部あまり知られていない指定もしてありますが、それはあとで勉強するとして、HTMLとスタイルシートの関係を知ってください。 ★HTML4.01strictです。  Another HTML-lint 5 ( http://www.htmllint.net/ )  The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )  で検証済みです。 ★スタイルシートはCSS2.1です。  W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )  で検証済み ★文字コードはShift_JISです。タブは_に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- /* 段落の指定 */ p{margin:0;text-indent:1em;line-height:1.5em;} /* 引用ブロックのデザイン */ blockquote{border:dotted 1px blue;padding:0.5em 1em;} /* 引用中のabbrの指定 */ abbr{font-style:italic;} /* abbrやspanのデザイン */ abbr{color:blue;font-weight:bold;} span.devices{color:green;font-weight:bold;} /* マウスオーバーしたときの指定 */ abbr:hover,span.devices:hover{color:red;position:relative;} abbr:hover:after{ content:attr(title); position:absolute;bottom:1.6em;left:0; border:solid red 1px; white-space:pre; background-color:white; padding-right:0.5em; } --> _</style> </head> <body> _<h1>タイトル</h1> _<p>下記はサンプルです。</p> _<h2>仕様書を読んでおきましょう。</h2> _<p>下記は<a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">2.2.1 HTMLの略歴</a>からの引用文です。</p> _<blockquote> __<p> ___<abbr title="Hyper Text Markup Language">HTML</abbr>は、どんな環境からも<span class="memo">Web</span>の情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つ<abbr title="Parsonal Computer">PC</abbr>や、<span class="devices">携帯電話</span>、<span class="devices">モバイル機器</span>、<span class="devices">音声入出力機器</span>、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 __</p> _</blockquote> </body> </html>

jaisalmer
質問者

お礼

詳しく教えて頂いてありがとうございます。 まさかこんなにボリュームのあるものを書いていただけるとは思いませんでした。 サンプルを参考にしつつ、スタイルシートについて色々勉強してみます。 ありがとうございました。

関連するQ&A

  • ホームページを作成してます。

    ホームページを作成してます。 文章をイラストレータで入力して画像ファイル(JPG)(500pixelx4000pixel) として貼り付けてWEBを確認してみると最初は小さい文字でカーソルの拡大ルーペ を押すと通常のサイズで見れます。 これを最初から通常のサイズで見せることはできないでしょうか?

  • ホームページビルダー11の文字サイズについて

     ホームページビルダー11を使ってはじめてHP作りに挑戦しています。 色々参考にしようと思い、よその方のホームページを閲覧していて気がついたのですが、ブラウザ上で見ると、人によって全体的にフォントのサイズが小さいページや、大きいページがあります。(文字を指定してそこの部分だけの大小ではなく)ちなみに、メニューバーの表示→編集表示の設定でフォントのサイズを大きく指定してやってみたのですが、ブラウザ上に切り替えてみると全体的にフォントのサイズは変わっていませんでした。編集表示ですから当たり前ですよね。ワープロにある書式の設定のように、そのページのフォントサイズはいくらとか、文字はMSゴシックとか指定してやることはできますか?ビルダーについてきたマニュアルやヘルプを見ましたが混乱して良くわからなくなってしまいました。どなたか教えていただけませんでしょうか。ホームページを作りたいなんて身の程知らずなほど超初心者です。あまりにも初歩的な質問でお恥ずかしいのですが、お願いします。

  • HP閲覧でフォントサイズを大にしたら0.9emの方が1.0emより大きく見えます

    私のホームページでは外部CSSでフォントを1emと指定しています。 本文の中で注釈をつけていて、その部分ではインラインCSSで<span style="font-size:0.9em;">と少し小さくしています。 通常私自身のIE設定は文字のサイズを中にしているのですが、ある時閲覧サイズを大にしてみました。すると少し小さい筈の注釈部分が逆に本文のフォントサイズより大きくなって見えます。 フォントを全てピクセル指定すれば比率は維持出来るはずですが、エム指定は続けたいのです。 相対指定をしたままで文字サイズに拘わらず注釈部分をすこし小さく見せる為にはどうしたら良いでしょうか。よろしくお願いします。

  • h1タグ

    h1のタグを使うと文字がやたらでかくなってしまいます。h1のタグを使って、文字のサイズを小さくしたいです。 質問1)FONTサイズの指定で小さくするのはどういう意味で不都合があるんでしょうか? 「文法的に正しくない」などの理由以外で具体的なデメリットを教えて下さい。 質問2)h1のタグを使って、文字のサイズを小さくするにはCSSとやらを使うしかないのでしょうか? 質問3)例えば下記サイトのような場合一番上の文字は h1になっていますが文字が小さいです。 これはスタイルシートを使っているんですか? http://www.noavocal.jp/school.htm

    • ベストアンサー
    • HTML
  • HTMLタグの入れ方

    こんばんは。HTMLタグの入れ方?について質問があります。例えば、文字のサイズや色のサイズを変更するときには<font size="1">や<font color="red">などを指定することで出来ると思います。このタグなんですが、<font size=1>や<font color=red>のようにダブルクォーテーションを使わなくても大丈夫なのでしょうか?当方、携帯サイトを運営しているので、少しでもタグを減らしたいと考えてこの質問をしました。よろしくお願いします。

  • タグが効きません

    最近パソコンを新しくしたら、文字の大きさを変えるタグが効かなくなりました。 <FONT size="●"></font> と打っても、タグで挟んでいない部分の文字と全て同じ大きさになってしまいます。 ●には、2~7まで入れているのですが、やはりどのサイズでも全て同じになってしまいます。 太字にする<b></b>、色を変える<FONT color="#○○○○○○"></font>などは効きます。 友人に確かめてもらったところ、そちらのパソコンからはちゃんと見れたそうで、また、以前私が使っていたパソコンからもちゃんと見れていました。 ブラウザの文字のサイズは小ですが、中にしても、どの大きさにしても文字全部が大きくなるだけで、解決できませんでした。 なぜでしょうか?誰か解決法を知っていたら、教えてください。

  • Photoshopのフォントの大きさがおかしくなった

    いつもPhotoshop EL5.0を使って、自作漫画の文字入れをしています。 フォントサイズを12ptにして文字入れしているので、今日も同じようにしたところ、 フォントのサイズが明らかに12ptではなく、20ptくらいあるのでは、という設定より大きめサイズに勝手になってしまいます。 試しに、一番小さいサイズの6ptにしてみましたが、こちらも14ptくらいになってしまいます。 ちなみに、フォントの種類はいつもと同じです。 どうやら、「T」ボタンをクリックしただけのときは、自分が指定したフォントサイズくらいのカーソルが表示されるのですが、 いざ絵をクリックしてテキストを入力できる状態にすると、勝手にカーソルが大きくなり、打ち込んだ時も大きいサイズになってしまうのです。 (ツールバーに表示されているフォントサイズは、自分が設定したサイズと一致していますが、実際に入力すると明らかに違います) 原因がわかる方いらっしゃいますか?困っています。 説明が下手で申し訳ございません・・・

  • ホームページビルダー8を使ってTABLEを作りました。作成した頃はスタ

    ホームページビルダー8を使ってTABLEを作りました。作成した頃はスタイルシートという言葉も知らなかったくらいの初心者だったので全ての項目に<FONT size="-1" color="#000000">を使って文字サイズと文字色を指定していました。その後、スタイルシートという方法を知り、これらの<FONT>タグが不要になってしまったので<FONT>タグを全て削除したいと考えています。しかし既に入力した<FONT>タグの数が半端じゃないので、全ての<FONT size="-1" color="#000000">を手作業で一つ一つ削除していくには厳しい状況にあります。できれば既に入力されてしまった<FONT>タグを一括削除したいのですが、何かいいアイデアはないでしょうか?尚、添付画像のような状態から<FONT>タグを全て削除したいと考えています。何かいいアイデアがございましたらアドバイス下さい。

  • ホームページビルダーの文字の大きさ

    ホームページビルダーVer.6を購入して、初めてHP作成に取り組んでいます。(どこでも配置モードを使ってます) 1.ページ編集の部分のフォントの大きさとプレビューでの大きさが異なるのは、どうしたら直るのでしょうか。 2.IEで確認した時、表示→文字のサイズを使えば当然フォントサイズが変わってしまうのですが、これを変えないようにすることはできますか。 3.できるだけ読み手にとって読みやすいHPにしたいのですが、ページ編集上で文字サイズ・文字間などの設定に関してのテクニックなどありましたら、教えてください。 どうぞよろしくお願いいたします。

  • h1タグについて

     スタイルシートで例:(.style3{font-size:18px})と指定する方法はわかりますが、h1タグでフォントサイズを指定する場合どのように指定すればよいのでしょうかお願いします。

専門家に質問してみよう