パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。
解決方法を教えていただけませんか?
それと、できれば下記のHTMLの添削をしてもらいたいです。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=shift_JIS">
<style type="text/css">
<!--
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
a img { border: none; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="FFFFFF" text="#000000">
<center>
<Table style="margin:-84px 0px 0px 0px" border="0" bgcolor="#336666" cellpadding="10"><tr><td>
<div align=center><font size="2">タイトル</font></div>
<font size="1"><font color="#000000">本文</font>
</body></html>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
余白うんぬんの話は、その貼り付けたソースとは別ですよね?
そのソースでは、パソコンのIE8でもクロームでも一切表示できませんでしたよ。
ですので、なんで余白ができるのか、というのが再現できないレベルです。
なので表題に対する回答は致しかねる、というか回答不可能です。
その他の質問である、添削について回答しますね。
HTMLの基本ルールが守られていません。
CSSも不要な数値やクラスもあります。
上から順に、ちょっとずつ書いていきますね。
a:hoverはマウスを乗せたときのデザイン指定ですが、
それを記述するなら、a:link、a:visited、a:activeもCSSで記述しましょう。
CSSで全部指定すると、bodyに要素で指定しているlinkとかvlinkとかalinkとか不要になります。
imgとかcssで指定してますけど、
そのhtml内で使ってませんよね。なのでimgのstyleは不要です。
背景色もCSSで記述しましょう。
テキストカラーもCSSで指定したほうがいいですね。
漠然としたcenterタグも使用しないほうがスマートです。CSSで行いましょう。
table内に何も文章が含まれていないのはなぜですか?
テーブルはそもそも表を表現するためのタグです。
色のついた余白的な飾りとして使うつもりなら、せめてdivを利用しましょう。
さらにそれが表だとしても、tr、td、tableに終了タグを忘れていますよ。
IE8でもクロームでも表示できない一番の原因は、
テーブルのマージンにマイナス表記を使ってることです。(ネガティブマージンといいます)
マイナス数値が高すぎて、画面外にぶっとんでいるんです。
値を0に近づけるか、マイナスを取らないと表示できませんよ。
divを使うつもりだったら、CSSのクラスとIDをマスターして下さい。
divにalign=centerという組み合わせは昨今見た記憶が無いです。
fontタグを多用していますが、これも使わずに文字の装飾はCSSで行いましょう。
fontタグはそもそも推奨されないタグです。
また、そのhtmlソースだと、fontの終了タグが一つ足りませんし。
普通、開始タグがあれば、終了タグがあるんです。
開始タグだけで満足してると、色々なブラウザで表示がばらばらになります。
突っ込みどころが満載すぎて、ちょっと突っ込みきれないです。
何のために記述しているのかわからないコードだらけなので、
参考に正しいものを記述してあげる、ということすら難しい。
なので、今までのアドバイスだけで勘弁して下さい…。
HTMLの記述内にfontが使われているので、30代~50代の方でしょうか。
…て、私も30歳くらいですけどね。
昨今の指南書や初心者が勉強するサイトで、
fontを推奨することはまずあり得ないんです。廃止されましたし。
おそらく、質問者様がhtmlの勉強に触れたのは相当昔だと思われます。
とほほさんのサイトがもっともわかりやすく、比較的情報も新しめですので、
そこでみっちり画面とにらめっこして勉強してみて下さい。
HTMLも、CSSも、基本的なことは全て書いてありますので。
http://www.tohoho-web.com/www.htm
気になるサイトがあったら、
そのサイトのソースを開いて覗いてみる癖をつけましょう。
そうすると、どのタグがどんな意味で、
どのスタイルシートがどういう役割か、なんとなくわかってきます。
No.1
- 回答日時:
>できれば下記のHTMLの添削をしてもらいたいです。
『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』は明確に否定されています。
また、
タグの<font>は使えません。
属性のbgcolor,link,vlink,alink,text,align,size,colorも非推奨です。
[HTML]は
<div class="header">
<h1>タイトル</h1>
</div>
<div class="section">
<h2>見出し</h2>
<p>本文記事、<a href="./page1.html">旅日記</a>をごらんください。</p>
</div>
<div class="footer">
</div>
とかになります。
スタイルシートは
body,html{margin:0;padding:0;}
p{margin:0;text-indent:1em;line-height:1.6em;}
a img { border: none; }
body{backgroung-color:white;color:black;}
a:link,a:visited{color:black;
a:active{color:yellow;}
a:hover,a:focus{color:white;position:relative;top:1px;left:1px;}
div,header,div.setion,div.footer{margin:0;}
div.header h1{background-color:#336666;padding:10px;font-size:2em;}
とかかな・・・
★参考にされているHTMLの資料は、とても古い十数年前のものと思われます。HTML3.2の頃のもの。HTML4.01の勧告(1999/12)以降は、そのような書き方は廃れました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
FireFoxで見るとブラウザの幅に...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
フッターだけが真ん中に行って...
-
文字などを右に寄せるには。
-
テキストボックスの文字を右揃...
-
コードを書いて下さい( ; ; )...
-
右と左の両端に色を付けるには?
-
DIVボックス内でのCSSを使用し...
-
画面サイズ・横1024の場合の表...
-
CSSでテキストを垂直、中央に設...
-
text-alignの解除の方法
-
なぜ左に寄っているの?
-
INPUT TEXT内の文字位置を指定...
-
marginを指定した見出し要素の...
-
H1 タグの行間
-
引用文を囲むボックスの作り方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
macとwindowsのレイアウト崩れ...
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報