• ベストアンサー

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

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

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

  • ベストアンサー
  • 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