Frontpage2002でホームページを作っています。
が、知人から無駄なタグがたくさん入っているし、ソースが汚いと言われてしまいました。

dreamweverは比較的、キレイなソースだとは聞いていますが、
最初から、Frontpageしか使ったことがないので、また変えるのも大変そうです。
時間があればタグで組む勉強もしたいのですが、そうも言っていられず・・。

そこで、
なんとか無駄なタグを自動的に削除してくれるソフトとかありませんでしょうか。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

私は基本的にはタグを使用してHPを作成していますがテーブル等を作成する場合はfrontpage98を使用して作成しています。



整理する場合は手作業をお勧めします。
(タグの勉強にもなりますので.....)

私の整理方法を紹介しますと
・<p></p>タグを削除します。(私的には必要無いと思いますので.....)
・タブを削除します。(見にくい場合は削除しなくても可)
・意味の無い改行を削除する。
・htmlは<br>以外は全て<??>→</??>で区切られますのでタグの区切りで改行等を行いまとめる。

上記の4項目を行うと結構スッキリしたhtmlになります。
修正時にタグを使って簡単に修正も可能です。

タグでまとめていくと規則性があり、タグの勉強にもなります。

テーブル等を作る場合にソフトでやり直しやり直しを重ねると複雑なタグ構成になりますので形が決まったらもう一度少ない手順で作り直す事をお勧めします。

慣れてくるとテーブルもタグで追加したりできますよ!!
    • good
    • 0
この回答へのお礼

"<p></p>タグを削除"いうことで、見直してみましたら、
改行した複数の文字列ごとに<p align="center"></p>がついていました。

最初の文字列と最後の段をひとくくりにまとめてしてみたら、とてもスッキリしました。

今回、ソフトをお聞きしたことでもう一度タグを勉強しようかなぁ
と思うようになりました。
ありがとうございました。

お礼日時:2002/03/14 11:14

はじめまして。

shizukuさんが望まれるようなソフトは現状残念ながらありません。
確かにDreamweverは余計なタグはクリーンアップすることはできますが、完璧とまでいきません。
やはり綺麗に掃除するなら、手打ちしかありません。
現在ではブロードバンドやらなんやらで、以前にくらべソースに対する意識が低下しているのも事実あるかと思いますが、余計なタグを掃除するだけで、データが軽くなりますので、読み込み速度もあがります。
ご自分で修正される際にも、短時間で目的のソースを見つけられるでしょう。
すぐにタグを理解することは難しくても、成るべくソースを見る習慣をつけれらたら、いやでも覚えていくと思います。
私もwebの仕事を生業にしていますので、最初はそんな感じで覚えました。
しんどいでしょうが、がんばってください。
    • good
    • 0
この回答へのお礼

皆さんのおかげでタグを少しずつでも覚えようと思っています。
ちょっとタイヘンですけど。。^_^;

ありがとうございました。

お礼日時:2002/03/14 11:19

OSが書かれていないので、MacとWin両方載せておきます。

私は直接タグを打っているので、使ったことはないのでわかりませんが、どうでしょうか?

▼WIN用
http://hp.vector.co.jp/authors/VA010593/htmldiet …

▼Mac用
http://www.vector.co.jp/soft/mac/net/se086946.ht …

この回答への補足

ありがとうございます。
早速、ダウンロードして、試してみたいと思います!

補足日時:2002/03/13 18:04
    • good
    • 0
この回答へのお礼

試してみました。
Windows2000なのですが、掃除しきってくれません。。

やはり、どこまでが無駄かなんて、自動的にわかるほうが、むずかしいですよね。
でも、使い方が悪いのかも知れませんし、
もう少しこのソフトで色々なHTMLを試してみたいと思っています。

ありがとうございました。

お礼日時:2002/03/14 11:06

知人の方は正直なんですネ(^^;)



ハッキリ言って私もそう思いますが。直接書いていると分るのですが、書き始めは無駄な部分も先に用意したりするので、Frontpage2002やdreamweverで書いている方が綺麗だと思います。
しかし、完成に近づくと、余分なところが分ってくるので、そこを削除していけるのです。
ところが、ホームページ作成ソフトでは、作業中のソースであるか終了間際のソースであるかなんて判断できません。
いつでも作業中のソースということで、余分なタグが省けません。

自動的にタグを削除…なんていう理想的なソフトは無かったと思います。
少しづつソースを見る習慣をつけていく良いキッカケになったのではないでしょうか(^^)
    • good
    • 0
この回答へのお礼

タグを読める、書けるは本当に憧れてしまいます。
前に少し勉強しようかなと思ったんですけど、テーブルのタグで挫折してしまいました。。
少しずつでも頑張んないといけませんね。
回答をありがとうございます。

お礼日時:2002/03/13 17:02

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q入れ子にしたddタグをcssで制御できません。

入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。

</dd>
<dl>
 <dt>111111</dt>
  <dd>22222222222222222</dd>
  <dd>33333333333</dd>
 <dt>444444</dt>
  <dd>5555555</dd>
   <dl>
    <dt>66666666</dt>
     <dd>777777777</dd>
   </dl>
 </dd>
</dl>

のようにddの中にまたdlから始まるのを入れ子にしました。

それで、cssで

.hoge dd{
color:#FFFFFF;
margin:10px;
}

とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の777777のように入れ子になったddだけにスタイルシートを掛けたいのです。
試しに

.hoge dl dt dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
や、
.hoge dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
を試してみましたが、うまくいきませんでした。

どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。

入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。

</dd>
<dl>
 <dt>111111</dt>
  <dd>22222222222222222</dd>
  <dd>33333333333</dd>
 <dt>444444</dt>
  <dd>5555555</dd>
   <dl>
    <dt>66666666</dt>
     <dd>777777777</dd>
   </dl>
 </dd>
</dl>

のようにddの中にまたdlから始まるのを入れ子にしました。

それで、cssで

.hoge dd{
color:#FFFFFF;
margin:10px;
}

とすると、ddタグ...続きを読む

Aベストアンサー

次のようにすれば内側のddにだけスタイルが有効になります。

.hoge dd dd {
color:#FFFFFF;
margin:10px;
}

「.hoge dd dd」の代わりに「.hoge dl dd dl dd」でも有効になります。

試された方法でうまくいかなかった理由は、入れ子の指定の中にdtを入れているためだと思います。もし <dt><dd></dd></dt> となっているなら指定された方法で有効になりますが、実際には <dt></dt><dd></dd> のようにdtとddは同じ階層にありますから、入れ子の指定に入れてはいけないのです。

Qホームページソフトに頼らずにホームページを作りたい

どんなに粗末でもいいから自分で打ち込んだHTML言語でホームページを作り、アップロードしたいと考えています。

メモ帳でソースを作成すればいいのでしょうが、その後どういう手順で行っていくのか教えてください。ちなみにアップロードにはFFFTPを使用するつもりです。

Aベストアンサー

こんばんは。
僕もFFFTP使ってます。
質問内容から、恐らくHTMLは大丈夫だろうということで、アップする作業に絞って説明させていただきます。

まず
(1)FFFTPを立ち上げます。
(2)ウインドウ上部のボタン系が並んでるところの一番左のコネクターのような形をしたボタンを押します。
(3)すると接続サーバーの一覧が出てきますので接続したいサーバーをWクリック。
(4)サーバーにログイン完了。
(5)ウインドウが2分割されてると思いますが、左が自分のPC。そして左がサーバーの中身です。
まずサーバーは自分のアカウントになるフォルダが呼び出されるはずですから(大体のサーバーはそうなってます)、そのフォルダをWクリック。
(6)ここからが自分で自由にいじれる空間になります。今何もアップしていなければ、当然何もない状態です。真っ白なはずです。
(7)そしてウインドウ右側にあるアップしたいファイルを右クリックするとメニューが出ますので、その中にある「アップロード」って言うのをクリックします。
(8)これでアップ作業完了です。

*ちなみに初期の段階ではサーバーが何も登録されてないと思います。
登録されているかもしれませんが、一応補足として書いておきますが、一番最初に書いた画面上部のボタンが並んでいるところの一番右のコネクターのボタンをクリックすると、接続可能サーバー一覧画面に移ります。
その画面の右の方に「新規ホスト」ってボタンがあると思います。それをクリックするとサーバー登録画面に移ります。
「ホストの名前」は適当に自分が把握できる名前を入れてください。
「ホスト名」はサーバーから指示があると思うので、その指示のとおりに書き込んでください。
大体は「www.〇△×.ne.jp」とか、最後の部分が「or.jp」とかいろいろあると思いますが、こんな感じになってると思います。
「ユーザー名」は自分のアカウント名のことです。
「パスワード」ってのもそのまま、自分の登録したパスワードを入れてください。
次に「ローカルの初期フォルダ」ってやつですが、簡単に言うと接続した時に出るFFFTP右側のウインドウを、自分のパソコンのどのフォルダを表示させるかということです。
お勧めは「デスクトップ」にしておくのを勧めます。
これだといちいち探す必要がないですからね。
一番最後の「ホストの初期フォルダ」は何も書かなくていいです。
それと最後にある「最後にアクセスした初期フォルダ。。。」うんぬんとあると思いますが、ここのチェックははずしておいてください。
っとまぁこんなもんです。
僕も他のFTPソフトは使ったことありませんが、このFFFTPはすごい使いやすくて、ちょー気に入ってます。
使い方も簡単ですし(^-^)

あとアップ作業の中で理解していただきたいのは、自分のパソコン自体がフォルダになってるということです。
普段使ってる中でもフォルダの中にフォルダを置いて、ファイルの整理をしたりしますよね?
そんな感じでパソコンという大きなフォルダの中に、いろいろなフォルダがあり、またその中にいろいろなファイルがある。。と理解していただければ、簡単に使いこなせると思います。
僕も最初は意味不明なことばかりでしたが、分かってしまうとこんなに簡単なことはありません。
是非がんばって面白いサイトの構築にがんばってくださいね(^-^)
また、何か分からないことがあれば聞いてください。できるだけ分かるように説明させていただきますので!
幸運を祈りまっす♪

こんばんは。
僕もFFFTP使ってます。
質問内容から、恐らくHTMLは大丈夫だろうということで、アップする作業に絞って説明させていただきます。

まず
(1)FFFTPを立ち上げます。
(2)ウインドウ上部のボタン系が並んでるところの一番左のコネクターのような形をしたボタンを押します。
(3)すると接続サーバーの一覧が出てきますので接続したいサーバーをWクリック。
(4)サーバーにログイン完了。
(5)ウインドウが2分割されてると思いますが、左が自分のPC。そして左がサーバーの中身です...続きを読む

Qどこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)などの関係のものが、以下に複数続いたりする場合、
どう考えてもテーブルのほうがよくない?って思うんですよね。
その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね?

divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、
divタグはここまで作る、テーブルタグの使い分けが微妙です。
このときはテーブルにしないといけない。とかないんでしょうから
ある意味センスなんでしょうが。。。。
製作の効率と、コンテンツの管理の仕方を考えると
divタグとテーブルの使い方の境目が分からなくなってしまいます。

そのへんの考え方ノウハウを教えてください。

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)など...続きを読む

Aベストアンサー

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。
tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。
ホームページビルダー(これは表でレイアウトする為に作られたようなソフトです)などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfl...続きを読む

Qホームページについて:Frontpageのフォントについて教えて下さい。

初心者です。Frontpageでホームページを作成しました。
「標準」でワードのように文章を打って、
フォントを色々替えてみたのですが、
プレビューで見ると標準フォントになってしまいます。
NestFTPで転送しても実際のホームページも標準フォントのままです。
どうすれば色々なフォントで表示することが出来るでしょうか?

よろしくお願いします。

Aベストアンサー

 私もFrontpageを使っていますが、質問内容のようにはなっていません。
 そこで、IEの方の設定に問題があるかと思い、気になるところを探してみました。

 もしかしたら、[ツール]→[インターネットオプション]→[全般]→[ユーザー補助]で、「Webページで指定されたフォントスタイルを使用しない」にチェックが入っていませんか?
 これにチェックが入っていれば、Webページのフォントが無視され、質問内容のような状態になるかと思いますが。

QHTMLタグの読み方辞典

HTMLタグの読み方辞典と言うのはあるのでしょうか。
もしご存知なら、本のタイトル(発行所等)を教えて頂けないでしょうか。宜しくお願い致します。

Aベストアンサー

技術評論社の「スタンダードHTMLタグ講座 超入門編」という本があるのですが、
最低限のタグを、一から覚えるのに適していると思います。
改訂版も出ています。
書き方はもちろんですが、たしか読み方も載っていたはずです。

ただこれは辞典というより参考書にあたると思いますが…。

ちなみに、HTMLタグの読み方辞典というホームページを見つけました…。ご参考までに。

参考URL:http://www.coolwebwindow.com/cssref/html-tag-ref.html

Qホームページを作っています、ページ内にiframeで他のページを表示さ

ホームページを作っています、ページ内にiframeで他のページを表示させています。
IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が
できるのですが、Firefoxだとスクロールバーが出ません・・・

どなたか表示させる方法をご存知でしたら教えてください。
以下HTML記述

<iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe>

CSS記述
#iframe4{
border-width : 0px 0px 0px 0px;
margin-left : 0px;
width : 420px;
height : 490px;
padding-top : 0px;
overflow : hidden;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
padding-bottom : 0px;
}

ホームページを作っています、ページ内にiframeで他のページを表示させています。
IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が
できるのですが、Firefoxだとスクロールバーが出ません・・・

どなたか表示させる方法をご存知でしたら教えてください。
以下HTML記述

<iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe>

CSS記述
#iframe4{
border-width : 0px 0px 0px 0px;
margin-left : 0px;
wid...続きを読む

Aベストアンサー

overflow : hidden;

で自らスクロールバーを出さないように記述されてるんですが;

overflow : auto;

に書き換えて下さい

Qタグに複数のstyle属性

現在ホームページビルダーでサイトを作っています。

まず、背景の画像を<BODY background="画像" style="background-repeat:no-repeat">
で繰り返しを制限しています。

さらに、マウスカーソルの形を十字にしたいので、
<BODY>タグに<style="cursor:crosshair">を追加しました。

ですが、こうすると「複数の属性値(style)が指定されています」
という構文エラーが出てしまい、上手くいきません。


<BODY>タグに複数のstyle属性を入れることはできないのでしょうか?

HP作り初心者なのでよくわかりません。
ご回答宜しくお願いします。

Aベストアンサー

<BODY background="画像" style="background-repeat:no-repeat; cursor:crosshair">

でうまくいきませんか?;で区切ります。
ひとつのページにBODYタグが2度出てる方がおかしいので。

Qホームページビルダーで作ったページを軽くしたい

よろしくお願いいたします。

現在、ビルダーでHPを作っているのですがどうしても無駄な
タグが多くてページが重くなってしまいます。特に表のページ
など。</font>などのタグが20コくらいくっついていたりする
のを見ると、消したいと思うのですが、タグの知識がないため
どのタグを消して、どのタグを残せばいいのか分かりません。
よいアドバイスがありましたらお願いいたします。

Aベストアンサー

無駄なHTMLタグについてですが、CSS(カスケーディングスタイルソート)を使うことにより、ページをよりタイトにすることが可能です。

fontタグについては、HTMLだと大きさについて調整したい場合、全て指定しなくてはならないのでどうしてもタグが増えてしまいます。

body, td {color:#408080;
font-size:12px;
font-family:"MS Pゴシック";} /* 緑色のスモールフォント、MS Pゴシック */

例えば、こんな文を挿入したファイルをindex.cssという名で保存して、同ディレクトリのフォントのサイズを適用したいファイルの<head></head>の中に<LINK href="index.css" rel="stylesheet" type="text/css">

という一文を挿入するれば、上の様なフォントの指定でページの全てのフォントに影響を与えることができます。

※「font-family」については、僕はこうしていますが、多分他のページには他のfont-family指定も追加した方がいいという説明とかあると思うので、その説明に準じてください。

※また、<body>ダグだけではな<td>タグも書いてあるのは、ブラウザの仕様なのかバグなのか、殆どのブラウザでは表組みの中のフォントは、<body>タグ指定だけでは、

何故か反映されない為です。その他、ページの余分なタグを減らすいろいろな工夫があると思いますが、まずHTMLを広く浅く、あとCSSはなるべくホームページ等の解説でちょっと勉強しておくといいと思います。

それ程難しくないのですぐに理解できると思います。その他、補足誤り等あると思いますが、どうぞ熟練の方誤り・補足などのフォローなどよろしくお願いいたします。

無駄なHTMLタグについてですが、CSS(カスケーディングスタイルソート)を使うことにより、ページをよりタイトにすることが可能です。

fontタグについては、HTMLだと大きさについて調整したい場合、全て指定しなくてはならないのでどうしてもタグが増えてしまいます。

body, td {color:#408080;
font-size:12px;
font-family:"MS Pゴシック";} /* 緑色のスモールフォント、MS Pゴシック */

例えば、こんな文を挿入したファイルをindex.cssという名で保存して、同ディレクトリのフォントのサイズを...続きを読む

Qhタグのスタイルシート指定が適応されない原因

hタグをスタイルシートで指定しています。
h1=12PX
色々なPC(IE)で確認してきたのですが、今まではどのPCもちゃんとスタイルシートが適応されておりましたが、たまたまお店のPC(FMV CE60RW)(IE)で見たらhタグのみスタイルシートが適応されておらず、大きな文字になっていたのでレイアウトも崩れてしまっていました。原因がわからず困っています。教えてください。

Aベストアンサー

ブラウザ側でその様に(無効になる様に)設定していればそうなるだけですが・・・。
たぶん「hタグのみ」というよりフォントサイズ指定が無効になっていると思われ・・・。

まぁ他にも OS の事もブラウザのバージョンも提示していないので、呼び出し方法や記述の仕方で無視されていたり、付近の記述に文字化け要因があって合わせて無効になっているとか(たまたま「hタグのみ」表面化しただけとか)無数に可能性あり・・・。


一番簡単なのは、ユーザスタイルシートが指定されていたというオチ・・・。

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

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

Aベストアンサー

基本的なことですが、タグはデザインするために書くものではありません。
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>

基本的なことですが、タグはデザインするために書くものではありません。
HTMLは、文章をそれを構成する要素(部品)に分解して、その部品がどのような要素(element)であるかをタグを使ってマークアップするものです。--HTMLを作成する上で最も重要な、というか本質です
 特定の文字が略語や頭文字でしたら<abbr>というタグを使ってそれが略語であることを示します。適当なタグがないときは<span>とclass名を使ってマークアップします。
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び...続きを読む


人気Q&Aランキング