HTML初心者の境界線描画とブラウザの文字バケについて

前へ 次へ
このQ&Aのポイント
  • HTML初心者が境界線を描画するための方法について質問しています。
  • また、特定のブラウザで文字バケが発生する原因についても疑問を持っています。
  • 本記事では、境界線の描画方法とブラウザごとの文字バケの原因について解説します。
回答を見る
  • ベストアンサー

HTMLの基礎的なことについてなのですが・・・

HTML初心者です。 ２点質問いたします。 【１】 境界線（枠）を描きたく、次のようなHTMLを書きました。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html> <html> <head> <meta charaset="UTF-8"> <title>文書構造化ステップ</title> <style type="text/css"> body*{ border-style:solid; border-width:1px; } </style> </head> <body> <h1>h1タグの行　テスト</h1> <p>ｐタグの行　テスト</p> <p>３行目　テスト</p> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊：＊ headの中に、 <style type="text/css"> body*{ border-style:solid; border-width:1px; } </style> を記述したらよいと、とある本に書いてあったにで上記のようにしたのですが、 境界線が現れません。 どこが間違っているでしょうか？ 【２】 上記のHTMLはサクラエディタを使って書きました。 境界線は現れませんが、文字は正しくブラウザーに出力されます。 ブラウザーはfirefox12.0です。 しかし、IE9とCrome19.0を使うと文字バケしてしまいます。 なぜ、firefoxでは文字バケしないのに、他の２つのブラウザーでは文字バケしてしまうのでしょうか？ 以上になります。 よろしくお願いいたします。

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5080/13275)
回答No.3

（１） 本に書いてあったのは　body*{　では無く　body *{　か　body,*{　ではないでしょうか。 （bodyとアスタリスクの間にスペース又はカンマを入れる） （２） <meta charaset="UTF-8">　ではなく　<meta charset="UTF-8">　が正解です。 また、保存されているHTMLは本当にUTF-8で書かれていますか？ Firefoxは訳の分からない指定をされたから、デフォルトの文字コードで表示してみたらうまく行っているだけという事でしょう。

daaaago
質問者

お礼

ご指摘の通りでした。 まず、bodyとアスタリスクの間にスペースを入れたら、境界線が出現しました。 そして、meta charset="UTF-8"に修正したら、すべてのブラウザーで 表示できました。 ご回答ありがとうございます。

その他の回答 (2)

  • ts3m-ickw
  • ベストアンサー率43% (1248/2897)
回答No.2

IE7だけど、ちゃんと表示されるよ？ 保存してるファイルの漢字コードがUTF-8になってるか、 ブラウザの漢字コードの認識が間違ってないか、 サーバ側の漢字コードの設定がUTF-8以外（例えばEUC-JPやS-JIS）になってないか、 それぞれ確認してくださいな。

画像を拡大する
daaaago
質問者

お礼

間違っていた「charaset」を、正しく「charset」に修正したら 全てのブラウザーで見れました。 お騒がせしてすみません。 ご回答ありがとうございます。

  • STICKY2006
  • ベストアンサー率29% (1536/5269)
回答No.1

こんちは。 >>どこが間違っているでしょうか？ >body*{ body{ コレなら見れると思うけど。。。 body* って記述方法があったかどうかは。。。忘れた。。。(_。。_ >>しかし、IE9とCrome19.0を使うと文字バケしてしまいます。 >><meta charaset="UTF-8"> まず、打ち間違い。 charset です。 >>しかし、IE9とCrome19.0を使うと文字バケしてしまいます。 宣言してある文字セットと書かれている文字セットが違う。からですかね。 「この本は日本語で書かれてますよ！」 って表紙に記載されているのに、中を読み込んでみたら 「あれ！この本はスペイン語で書かれているぞ！」 状態になって、ブラウザで正常表示できていないようです。 http://okwave.jp/qa/q5841469.html 「charset="utf-8"」で表示してやるつもりのものでしたら、文字セットもutf-8にしましょう。 （サクラエディタで、デフォルトで使ってるなら、たぶん、SJISだと思うので。 サクラエディタでは、保存時の設定でutf-8での形式に変更が行えますので、「名前を付けて保存」 から、「SJIS」⇒「UTF-8」にしてやりましょう。

daaaago
質問者

お礼

charsetですね！ お恥ずかしいです。 UTF-8保存はしておりました。 ご回答ありがとうございます。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • スタイルシートを入れる場所

    初心者です。 html文に ----------------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> ----------------------------------------------- というスタイルシートを入れたいのですが、 <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> </BODY> </HTML> のどこの間に入れればいいのでしょうか？ <BODY>と</BODY>の間でしょうか？ それとも <HEAD>と</HEAD>の間でしょうか？

    • ベストアンサー
    • HTML
  • なぜこのコードは下に線が2本引かれるのでしょうか

    <html> <head> <title>test</title> <style type="text/css"> h1{ border-bottom: 1px solid #ccc; } </style> </head> <body> <h1>test<h1> </body> </html> なぜこのコードは下に線が2本引かれるのでしょうか? 文字の下に1本だけ線を引きたい場合 どうすれば良いでしょうか?

    • ベストアンサー
    • HTML
  • CSSのtableについて【CSSが無かったのでHTMLで…。】

    <html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆

    • ベストアンサー
    • HTML
  • HTMLのエラー

    いつも参考にさせて頂いております。 HTMLのソースをチェックするサイトがあるのですが、 いくつかエラーが出ました。 どこをどう修正したらいいのでしょうか？ 初心者の為、単純ミスはお許し下さい。 ・ print "<option value=\"{$data["lctnamek"]}\" echo $selected>\n"; ↓ <OPTION> の VALUE の属性値 `\"{$data["lctnamek"]}\"` は引用符で囲まなければなりません。 ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ ・print "<td style=border-left-style: \"solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top: 1px solid #111111; border-bottom: 1px solid #111111\" height=30 rowspan=2>\n"; ↓ <TD> の STYLE の属性値 `border-left-style:` は引用符で囲んだ方が安全です。 <TD> 内におかしな文字列 `\"` があります。 <TD> に不明な属性 `SOLID` が指定されています。 <TD> 内におかしな文字列 `;` があります。 <TD> の BORDER-LEFT-WIDTH: 属性の前には空白が必要です。 <TD> 内におかしな文字列 `1;` があります。 <TD> に不明な属性 `SOLID` が指定されています。 <TD> 内におかしな文字列 `;` があります。 <TD> の BORDER-RIGHT-WIDTH: 属性の前には空白が必要です。 <TD> 内におかしな文字列 `1;` があります。 <TD> 内におかしな文字列 `1px` があります。 <TD> に不明な属性 `SOLID` が指定されています。 <TD> 内におかしな文字列 `#` があります。 <TD> 内におかしな文字列 `111111;` があります <TD> 内におかしな文字列 `1px` があります。 <TD> に不明な属性 `SOLID` が指定されています。 <TD> 内におかしな文字列 `#` があります。 <TD> 内におかしな文字列 `111111\"` があります。

    • 締切済み
    • PHP
  • スタイルシートで、マージン０に出来ません

    夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 　　中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>

  • HTMLのブラウザでの表示

    メモ帳でHTMLを書き、ブラウザで表示したとき、文字が表示できるとき（XX．html）とできないとき（XX01．html）があります。比較した添付ファイルがありますが、どこに問題があるのでしょうか。教えてください。 プログラムは下記のようになっています。 <HTML> <HEAD> <TITLE>STAY</TITLE> <STYLE type="text/css"> <!-- BODY{ 　color:white; background-color:black; } H1{ 　color:red; } --> </STYLE> </HEAD> <BODY> <CENTER> <H1>STAY</H1> <H2>-〇◎の紹介ページ-<?/H2> <HR> ようこそ、〇◎へ </CENTER> </BODY> </HTML>

  • HTMLの表で幅を指定しても折り返すことは無理なのでしょうか？

    以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか？ <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130">　test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>

    • ベストアンサー
    • HTML
  • 下線だけ線を引くにはどうすればいいでしょうか?

    <html> <head> <title>test</title> <style type="text/css"> h2{ padding: 8px; border-left: 10px solid red; } </style> </head> <body> <h2>test</h2> </body> </html> このような状態から 下線だけ線を引くにはどうすればいいでしょうか? background-color: blue; だと全体が青くなってしまいました。

    • ベストアンサー
    • HTML
  • div#left {width:50%;

    div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？

  • 枠の幅が次のようにすると

    画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue; border-style:solid; border-width:1px; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する