携帯HPナノの問題:イラストにかぶってしまう文字について

このQ&Aのポイント
  • 携帯ホームページナノでイラストを掲載している際に、画面に「ナノ」という文字がかぶってしまう問題が発生しています。PCからはかぶってしまいますが、スマホでは問題ありません。
  • 問題は画像画面のレイアウトにあります。特に、<div>タグ内のスタイルや配置に問題がある可能性があります。
  • 問題を解決するためには、CSSを使用してスタイルを修正するか、イラストの大きさを調整する必要があります。
回答を見る
  • ベストアンサー

携帯HPナノ ナノという文字について

携帯ホームページナノさんでホームページを作成しています。 検索しても見つけられなかったので、質問させてください。 アルバム機能を使ってイラストを掲載しているのですが、画像画面で「ナノ」という文字がイラストにかぶってしまっています。 サイトはPC•スマホ向けに作成していて、CSSを使用しています。 かぶってしまうのはPCから見た場合です。 スマホから確認すると、ちゃんとページの一番下に「ナノ」と表示されます。 ◼︎画像画面レイアウトの内容 <div style="text-align:right" align="right" > <center>#title#<br><a href="子ページ"><img src="#img_url#"border="0"/></a> <br> #text#<br> <BR> <BR> 新← →古<BR> #prev_next_next# #next_prev_prev#</center><br> <BR> <right>>><a href="子ページ">Original</a></right><BR><BR> <BR> </div> ◼︎イラストの大きさ 600*800(端末によって大きさを自動で最適化する文章をCSSに組み込んであります) どうかよろしくお願いします。

noname#234360
noname#234360
  • CSS
  • 回答数1
  • ありがとう数11

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

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

手がつけられない・・ Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) でチェックすれば分かります。 あまりに酷すぎてスタイルシートではどうしようもない。 <center><BR><right>なんてないし。  そもそもHTMLでページを作るのは【ただひとつ】 ______________ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) 『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』  なのです。  

noname#234360
質問者

お礼

回答ありがとうございます! 私の勉強不足です。申し訳ありません。 HTMLの文章解析ができるものがあるんですね、知りませんでした…。 基礎も知らずに、テンプレートをいじったり、タグ等を切り貼りしたのでうまく表示されないのは当然でした。 質問する前に、ちゃんと勉強するべきでした。 沢山のご指摘ありがとうございました!サイト作り頑張ります!

関連するQ&A

  • 携帯サイトの背景と文字位置が反映されません

    携帯サイトを作っています。 参考にしたのは「All about」にあった携帯サイトの作り方で 試したのですが、背景や文字位置等がうまく反映されません。 下がソースです。(東京のお菓子というのは仮に入れてます) 具体的にはバックグラウンドを指定してもバックグラウンドが表示されず、centerを指定しても全部左寄せになってしまいます。 ちなみにパソコンで見るときちんと表示されています。 私の持っているdocomoの端末(P902iS)ですとバックグラウンドが表示されず 左寄せになってしまいます。 それぞれにスタイルで文字の大きさや背景などを指定するやり方は ALL aboutの携帯サイトの作り方を参考にしています。 何か間違いなどあればご指摘いただけないでしょうか? よろしくお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="keywords" content="お菓子,お花" /> <meta name="description" content="東京のお菓子お花屋です" /> <title>東京お菓子お花title> </head> <body> <div style="background-color:#cc0000; color:white;">お菓子屋さん<br /> (東京お菓子)<br /> 東京都</div> <div style="text-align:center;"><img src="******title1.gif" width="80" height="120" border="0" /></div> <div style="font-size : smaller;color : #624a20;text-align : left;">お菓子屋さんではお菓子やお花を販売しています。東京にあります。<br /> </div> <div style="font-size : smaller;color : green;">◆<a href="index.html">トップページ</a><br /> ◆<a href="okashi.html">お菓子屋のご紹介</a><br /> ◆<a href="ohana.html">お花のご案内</a><br /> ◆<a href="zakka.html">雑貨のご案内</a><br /> ◆<a href="access.html">アクセス</a><br /> ◆<a href="http://www.*******.com/">PCホームページ</a><br /> </div> <div style="font-size : smaller;color : #624a20;text-align : left;">お電話、メールにてお気軽にお問い合わせ下さい。またパソコン用HPもありますので、詳しくはそちらもご覧下さい。<br /> </div> <div style="color : #ffffff;background-color : #a57e37;text-align : center;">◎お問い合せ◎</div> <div style="text-align:center; font-size:smaller;">電話での問合せ<br /> <a href="tel:03*********">03-***-****</a><br /> メールでの問合せ<br /> <a href="mailto:info@******.com">コチラ</a></div> <div style="font-size : smaller;color : #660000;text-align : center;">お菓子屋さん<br /> ***-****<br /> 東京都<br /> 渋谷区******</div> </body> </html>

  • 【help!】ケータイキットの文字化けについて

    既存ブログのモバイル対応について、 大変困っております。 現在、MovableType5で製作したHPの携帯サイトを、 「Keitaikit」http://www.ideamans.com/keitaikit/ をプラグインとして入れて、製作しております。 ※ちなみにWeb製作はかなり初心者です。 マニュアル通りに製作したのですが、 文字化けが何をやってもなおりません。 下記のソースコードで、おかしい点がありましたら、 ご教授いただきたいです。 相当、困っております。。。 ■テンプレート1:ヘッダーポータル(ケータイ) <!DOCTYPE html PUBLIC "-//WAPFORUM//DTDXHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <xhtml xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="-1" /> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="robots" content="index,follow" /> <title>タイトルが入ります</title> </head> ■テンプレート2:フッターポータル(ケータイ) <div style="background-color:#696969;"><img src="../mobile/common/images/spacer.gif" width="1" height="1"/></div> <div id="access_list"> [1] <a href=" " accesskey="1">テキスト</a> [2] <a href=" " accesskey="1">テキスト</a> [3] <a href=" " accesskey="1">テキスト</a> [4] <a href=" " accesskey="1">テキスト</a> [5] <a href=" " accesskey="1">テキスト</a> [9] <a href=" " accesskey="1">テキスト</a> [0] <a href=" " accesskey="1">テキスト</a> </div> <div style="text-align:right;margin-top:4px;font-size:smaller;" align="right"><a href="#top">&uarr;ページトップ</a></div> <div style="text-align:center; background-color: #0000cd;"> <span style="color:white;"><img src="../mobile/common/iemoji/mobilephone.gif" width="15" height="15" border="0" alt="" />このサイトを友達に教える</span><br /> </div> <div style="text-align:left; background-color: #dcdcdc;"> <p><a href="#">テキスト</a><br /> <a href="#">テキスト</a></p> </div> ■テンプレート3:メインページ(ケータイ) <MTKeitaiKit> <html> <$mt:Include module="ヘッダーポータル(ケータイ)"$> <body style="margin:0;padding:0;"> ...</body></html></MTKeitaiKit>

  • 【Html CSS】<a>の上に文字を配置したい

    添付の画像の様にしたいです。 一番左には「SoldOut」って文字が一番上に配置されてます。 (この状態でhoverも<a>のリンクも効かせたい) 以下は、ソースです。これを添付の画像の様にしたいです。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; vertical-align: middle; } .box li{ float: left; list-style:none; } .box .out{ border-right: 10px solid #fff; border-top: 10px solid #fff; } .box a { text-align: center; display: block; text-decoration: none; font-weight: bold; color: #69380f; background-color: #f2f2f2; width: 100px; height: 120px; } .box a:hover{ background-color: #ccc; } </style> </head> <body> <ul class='box'> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> </ul> <br> </body> </html> 以上、ご指導の程、宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • 改行したくないのに改行されてしまう

    http://www.serpress.co.jp/hp/no004.html を参考に、 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトルを記述します。</title> </head> <body> <a name="1段落目"> ●1段落目 </a> <Div Align="right"> <A href="#1段落目"> ▲ </a> </Div> <Div Align="right"> <A href="#2段落目"> ▼ </a> </Div> <a name="2段落目"> ●2段落目 </a> </body> </html> ------------------------------- と言うソースを書くと、 --------- ●1段落目      ▲      ▼ ●2段落目 --------- となってしまいます。 私としては、 --------- ●1段落目    ▲ ▼ ●2段落目 --------- としたいのですが、 どうすればいいでしょう? <A href="#1段落目"> ▲ </a> </Div> <Div Align="right"> <A href="#2段落目"> の間に、<Br>ははいってないのに なぜ勝手に改行されてしまうのでしょうか? 添付画像は現状です。ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像の横にリンクボタンを置きたいんですが

    画像の横にリンクボタンを置きたいんですが <img align=left src="m38.jpg><br> <A HREF="right.html" STYLE="text-decoration:none;color:006633;">在りし日1</A> <br> <br> <A HREF="right1.html" STYLE="text-decoration:none;color:006633;">在りし日2</A> <br> <br> <br clear="all"><br> とやってみましたがうまくいきません。画像がでてきません。どうしたらよいでしょうか?

    • ベストアンサー
    • HTML
  • WEBサイト作成時ヘッダーで読込が反映されない部分

    ヘッダー部分について質問させていただきます。 一旦、サイトをDW(ドリームウィーバーCS6)やHPB(ホームページビルダー14)で読み込んで、デスクトップに保存後、確認すると、この部分は何故か表示されていませんでした。データとしても、その後は表示されなくなったようです。 この理由が分かりません。 <!-- #BeginLibraryItem "/Library/header.lbi" -->~<!-- #EndLibraryItem -->が原因だとは推測がつきます。詳しい方がいましたら、よろしくお願いします。 念の為に、下記にHTMLとCSSを出来る限り記載しておきます。 HTML <!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=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <meta name="Keywords" content="キーワード"> <meta name="Description" content="キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base1.css"> <script type="text/javascript" src="util.js"></script> <script src="swfobject_modified.js" type="text/javascript"></script> </head> <body id="home"> <div id="topmess"><p><strong>ストロング</strong></p></div><!-- #BeginLibraryItem "/Library/header.lbi" --><div id="header"> <h1><a href="https://www.google.co.jp/">題名</a></h1> <ul> <li id="top"><a href="https://www.google.co.jp/">1</a></li> <li id="com"><a href="https://www.google.co.jp/">2</a></li> <li id="pro"><a href="https://www.google.co.jp/">3</a></li> <li id="con"><script type="text/javascript">mailwrite()</script></li> </ul> </div><!-- #EndLibraryItem --><div id="main" class="clearfix"> <table> <tbody> <tr> <td style="text-align:left;"><a href="http://www.10.jpg" target="_parent"><img src="side_coupon04.jpg" width="197" height="98" alt="4"></a></td> <td style="text-align:center;"><a href="http://www.20.jpg" target="_parent"><img src="side_coupon05.jpg" width="197" height="98" alt="5"></a></td> <td style="text-align:right;"><a href="http://www.30.jpg" target="_parent"><img src="side_coupon06.jpg" width="197" height="98" alt="6"></a></td> <td style="text-align:right;"><a href="http://www.40.html" target="_parent"><img src="side_coupon07.jpg" width="197" height="98" alt="7"></a></td> </tr> </tbody> </table> <br> <br> <img src="pro_img14.jpg" width="791" height="80" alt="TEL" class="btmgn20"> <p><font color="BLUE" size="10">TEL: 0123-456-789</font></p><br> <img src="pro_img11.jpg" width="791" height="150" alt="8" class="btmgn20"><br> <img src="pro_img9.jpg" width="791" height="367" alt="9" class="btmgn20"><br> <table> <tbody> <tr> <td style="text-align:left;"><a href="https://www.google.co.jp/" target="_parent"><img src="img12.jpg" width="395" height="120" alt="A"></a></td> <td style="text-align:right;"><a href="https://www.google.co.jp/" target="_parent"><img src="img13.jpg" width="395" height="120" alt="B"></a></td> </tr> </tbody> </table> </div> <!-- #BeginLibraryItem "/Library/footer.lbi" --><div id="footer"> <div id="ft"> <div class="leftarea"> <h3>見出し3</h3> <p>住所<br /> TIME 1:30~24:40<br /> ※<br /> TEL:0123-456-789<br /> FAX:0123-456-789 </p> </div> <div class="rightarea"> <ul> <li class="fst"><a href="https://www.google.co.jp/">8</a></li> <li><a href="https://www.google.co.jp/">9</a></li> <li><a href="https://www.google.co.jp/">10</a></li> <li><script type="text/javascript">mailwrite()</script></li> </ul> <address>コピーライト</address> </div> </div> </div><!-- #EndLibraryItem --> <script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script> </body> </html> CSS /* ------------------------------------------------------------------------------------------------------------ 1. Normalize (No need to edit) -------------------------------------------------------------------------------------------------------------*/ html, body, div, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre,img, ol, ul, li, dl, dt, dd, span, abbr, acronym, address, cite, code, del, dfn, em, ins, kbd, q, samp, strong, sub, sup, var, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, applet

  • CSSで指定してます。プラザーによっては文字の位置

    よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか? IEは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 CSSを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ margin:0; padding:0; } #boxA{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } #boxB{ background:#ffffff; } #boxE{ background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffff; } body{ text-align:center; } #container{ width:892px; margin-left:auto; margin-right:auto; text-align:left; } h1{ font-size : 11.5px; color:#333333; font-weight : 500; text-indent:0px; letter-spacing : -0.1em; } .text1{ font-size : 11.5px; letter-spacing : -0.1em; } .text2{ font-size : 70%; } .text3{ font-size : 85%; line-height : 1.3em; } #boxA{ width : 892px; } #boxA2{ width : 708px; margin-top : 10px; margin-left : 90px; background-image : url(../img/top_img.jpg); height : 328px; } #boxA3{ width : 708px; margin-top : 10px; background-image : url(../img/porishi.jpg); background-repeat : no-repeat; background-position : 50% 50%; margin-left : 90px; height : 130px; } #boxE{ width:100%; clear:left; } #boxB{ width : 892px; float : none; } #boxB2{ margin-top : 10px; margin-left : 100px; width : 708px; } ------------------------------------------- 【webページ】 </head> <body background="img/bgcolor.png"> <div id="container"> <div id="boxA"> <br /> <div id="boxA2" class="text1"> <br /> <br /> <br /> <br /> <a href="http://www.wakayama2015.jp/" target="_blank"><img src="img/top_kokutai.png" width="106" height="276" border="0" align="left" alt="2015年紀の国わかやま国体 わかやま大会" /></a><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h1>          暮らしに欠かせない食・住・遊に関する事業を展開する丸長グループ。 </h1>            日々の生活が安心・快適で、そして豊かであってほしい…<br />           その想いがグループ企業の分野を超えたノウハウの共有につながり、<br />           さらなるサービスの向上へと結びついているのです。<br />           これからも郷土和歌山県を拠点に県内外に事業フィールドの拡大に<br />           邁進してまいります。<br /> </div> <div id="boxB" style="text-align : center;" align="center"> <div id="boxB2"> <img src="img/top_mainimg.png" width="703" height="815" border="0" /> </div> </div> <div id="boxE" style="text-align : center;" align="center"> <p style="text-align : center;" align="center" class="text2"><br /> <font color="#000000">Copyright (C) 2000 MARUCHO GROUP Corporation. All Rights Reserved.</font></p> </div> </div> </div> </body> </html> 【webテスト】 http://www.dream-web.jp/test/maru/ サンプルブック見れば見るほど解らなくなってしまって困ってます。 助力よろしくお願いします。

    • 締切済み
    • CSS
  • PHPとaccesskey

    携帯向けのHPを作っています。 1枚1枚画像が表示される簡易フォトアルバムを Sapphirus.Biz(http://www.sapphirus.biz/)さんの 所からお借りしています。 大体は思う通りになってきたのですが、 ひとつだけどうしてもわからないところがあります。 携帯で3を押したら前や次のページに 飛ぶようにしたいのですが、 例えば <?php //ページめくり用スクリプト部分(前へ) if($prev){ echo"&#xE522;<a href=\"?$dataDir|$prev\">前へ</a>"; }else{ echo"&#xE522;前へ"; } の echo"&#xE522;<a href=\"?$dataDir|$prev\">前へ</a>"; を echo"&#xE522;<a href=\"?$dataDir|$prev\" accesskey="1">前へ</a>"; のようにすると""の前の\のせいか 画像もリンクも見えなくなってしまいます。 (全く白紙のページしか見えなくなる) どうしたらいいでしょうか? 以下ソース <?php //設定 $contents='album.txt'; //タブ区切りのテキストファイル名 //メイン header("Content-type: text/html; charset=SJIS"); $query=$_SERVER['QUERY_STRING']; if(!$query) exit('ディレクトリが指定されていません'); elseif(!strstr("|",$query)){ list($dataDir,$no)=explode("|",$query); }else{ $dataDir=$query; } $data=@file("$dataDir/$contents")or exit('データファイルが開けません'); $total=count($data); if(!$no) $no=1; list($file)=explode("\t",rtrim(mb_convert_encoding($data[$no-1],'SJIS'))); $image="$dataDir/$file"; list(,,,$attr)=@getimagesize($file); if($no>1) $prev=$no-1; if($no<$total) $next=$no+1; /* ここから下が表示用HTMLです */?> <head> <title>タイトル</title> <link href="../style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="MAINLAYOUT"> <center> <?=$no?>/<?=$total?><br> <!-- イメージ表示 --> <div id="IMG"><img src="<?=$image?>" alt="<?=$file?>" <?=$attr?> /></div> <?php //ページめくり用スクリプト部分(前へ) if($prev){ echo"&#xE522;<a href=\"?$dataDir|$prev\">前へ</a>"; }else{ echo"&#xE522;前へ"; } //ページめくり(前へ)ここまで ?> - <?php //ページめくり用スクリプト部分(次へ) if($next){ echo"&#xE524;<a href="\?$dataDir|$next\">次へ</a>"; }else{ echo"&#xE524;次へ"; } //ページめくり(次へ)ここまで ?> <hr> &#xE523;<a href="menu.htm" accesskey="2">メニューへ</a><br> <hr> &#xE5AC;<a href="index.htm" accesskey="0">Topへ</a> </center> </body> </html>

    • ベストアンサー
    • PHP
  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • <!DOCTYPE> 宣言をするとページが大幅に狂います

    なんとかページを作り込んだ訳ですが、このサイトで色々見ているとどうにも今はドキュメント宣言をし、それに準拠したページを作った方がよいということが分かりました。 ただこの宣言をすると見事にページが崩れます。 それと試しにブラウザチェックができるサイトで見たところIE以外はほとんど崩れてしまいました。 他のページも直さないといけないのでどこが悪いのかを教えていただけるとありがたいです。 最後の大量の<br>はつけないとウィンドウを小さくしたときにコピーライトが見えなくなる(スクロールが下まで行かない)為にしています。 こちらの解決法も合わせてお願いします。 <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>-------</title> <style type="text/css"> <!-- div.watop {position:relative; top:27%;} div.warau {position:relative; top:41%; left:77%;} div.mark {position:relative; top:43%;} span.moji {font-size: 80%; position:relative:} span.mark {font-size: 60%; position:relative:} a:visited {color: #000000; } a:hover {color: #000000; } a:active {color: #00000; } a {text-decoration: none; } --> </style> </head> <html> <body bgcolor="#FFFFF0"> <center><span class="moji"> <a href="top.html">トップ</a> <a href="profile.html">プロフィール</a> <a href="gallery.html">ギャラリー</a> <a href="link.html">リンク</a> <a href="mail.html">コンタクト</a> </span> </center> <div class="watop" align="center"> <img src="watop.gif" border="0" usemap="#top"> <map name="top"> <area shape="rect" coords="50,100,140,160" href="top.html" alt="トップ"> <area shape="rect" coords="168,100,255,160" href="profile.html" alt="プロフィール"> <area shape="rect" coords="345,105,407,140" href="gallery.html" alt="ギャラリー"> <area shape="rect" coords="495,110,580,150" href="link.html" alt="リンク"> <area shape="rect" coords="600,105,650,145" href="mail.html" alt="メール"> </map> </div> <div class="warau"> <A HREF="top.html"><img border="0" src="hyousi.mini.gif"></A> </div> <div class="mark" align="center"> <span class="mark">copyright(c) 2009 ----- All Rights Reserved.</font> </span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう