• 締切済み

ホームページに画像を貼りたい

ホームページを作成している初心者です。画像を貼りたいのですが、テキストを見ながらやってもうまく行かないので、みなさん良ければ貼り方を教えてください。 <head> <meta charset="utf-8"> <div><title>日本語</title> <link rel="stylesheet"href="style.css"> </head> <body> <h1>初めてのホームページ作成<em>頑張っています☆</em>クレヨンしんちゃん</h1> <h2>camera </h2> <h3>peoples <em>photo</em></h3> <p id="def"> train<br></p> <p class="abc"><strong>yamagata</strong><br></p> <div><p><q>consent</q> <small>town</small> tea<br></p> <p><a href="http://www.yahoo.co.jp">日本語</a> <a href="http://ch.441108.com">楽しい<br></a> <a href="http://www.biccamera.com"/>何でも揃う、ビックカメラ</a> <p id="sample1">HEART</p> <p id="sample2">たれぱんだ</p> 桜が咲く</div> </p> <p1>コロコロ</p1> </body> </html> ↑これがHTMLです。 html,body{font-size:30px;line-height:1.5;} {margin:0; height:100%;} body{ background-image:url(myfile/original.jpg); background-repeats:no-repeat; background-position:center;} h1{ text-decoration: underline; text-shadow: -3px 3px 3px #f0f; color:#000000;opacity:0.7; text-align:left;color:yellow; } h1 em{color:blue;} h2{ text-decoration: overline; font-size:60px; font-style:italic; text-shadow: -3px 2px 3px red; color:pink; text-align:center;} h3{ font-size:60px; letter-spacing:-1px; text-transform:capitalize;} h3 em{color:red; font-style:normal;} p {text-indent:1em;font-size:30px;color:black; } p:nth-child(odd){ color:black; background-color:blue;} #def{color:purple;} p:nth-child(even) {color:white; background-color:lime;} p::first-letter{ color:white; background-color:black;} .abc{color:orange;} p{color:maroon !important;} a:link{color:black;} a:visited{color:green;} a:hover{color:orange;} a:active{color:aqua;} #sample1{border-style:solid;} #sample2{border-style:double;margin:30px;padding:20px;text-align:center;font-weight:bold;} p1{padding:3em; color:white; background-color:silver; border-radius:10px;} ↑これがCSSです。

みんなの回答

  • dragon-man
  • ベストアンサー率19% (2700/13647)
回答No.1

画像を貼り付けるだけなら難しい事ではありません。htmlの最も基本的タグ、“img”を使えばいいです。 例えばjpeg写真を貼る場合、html文の張りたい位置に <img src="***.jpg" width="nnn1" height="nnn2""> と書けば、ファイル名***の写真がnnn1×nnn2のサイズで貼り付けられます。ただそれだけの事ですが、何かもっと高級な事をお考えなのでしょうか。私が質問の意味を取り違えているのでしょうか。もしそうだったらあまりに初歩的な回答で申し訳ありません。

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

関連するQ&A

  • Firefoxだとズレてしまう

    <h1 class="text">タイトル</h1><p class="navi"><a href="#">↑上↑</a></p> h1.text { width:69%; float:left; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 0px 1px 5px; border-style:solid; padding:0px 0px 0px 4px;} .navi { width:29%; float:left; text-align:right; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 1px 1px 0px; border-style:solid; padding:0px 2px 0px 0px;} このようにしたいのですけど、firefoxで見ると表示がズレてしまうので困っています（Explorerでも、ちょっと思ったよりも短くなってしまうけれども、一応表示される）。何かよい方法はないでしょうか。

    • ベストアンサー
    • HTML
  • わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウ

    わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウスのカーソルをかさねても 文字が表示させることが出来ません。 htmlに詳しい方どうか教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>welcome！有限会社ロイヤルハイネスのホームページへ</title> <style type="text/css"> body {color:#444444; background-color:#66aa66; text-align:center} div#container {border-style:solid; border-width:2px; border-color:#bbffaa; padding:20px; background-color:#ffffff; width:600px; margin-left:auto; margin-right:auto} h1 {font-size: 1.25em; font-family:helvetica,sans-serif; color:#66aa66} p {font-size: 0.1em} address {font-size: 0.1em; font-style:normal} a {color:#33aa88} a:hover {color:#88aaff} address a:hover {color:#ffaa00} ul {list-style-type:none; margin-left:0; padding-left:0; background-color:#bbffaa; padding-top:3px; padding-bottom:3px; padding-left:20px; padding-right:20px} li {display:inline; padding-right:12px; font-size:0.75em} li a {text-decoration:none} p#message {width:300px; margin-left:auto; margin-right:auto; text-align:left; line-height:1.3} </style> </head> <body> <div id="container"> <h1>royal hyness homepage</h1> <p>ホームページ開設してみました。</p> <ul> <li><a href="about.html">有限会社ロイヤルハイネスの管理物件について</a></li> <li><a href="toiawase">お問い合わせ</a></li> <li><a href="http://>ブログ</a></li> <li><a href="2ldkapato">2LDK</a></li> <li><a href="2dkapato">2DK</a></li> <li><a href="1kapato">1K</a></li> </ul> <p><img src="top.jpg"alt="ニューヨーク・レコード日記"/> <p> <strong>倉敷市中畝のペットOKのアパート物件</strong>の情報を公開しています。 <strong>是非問い合わせ</strong>の方お願いします。 </p> <address>Copyright(C)<a href="mailto:royalhyness@bridge.ocn.ne.jp"> royal hyness Diary</address> </div> </body> </html>

  • 背景色を入れたいのですがよろしくお願いいたします。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 　　　　　　　　　　　　　　　　　　　　　　　どうすればいいのでしょうか？　 h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} 　 ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx　</h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 　　　　　　　　　　　　　　　　　　　　　　　どうすればいいのでしょうか？　 <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話)　xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p>　 <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>

  • ホームページ作成について。

    いつも、お世話になっております。 今回、一からサイトを作るのに当たってぶち当たった壁があり どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。 写真を展示するページを二分割上下のフレームを作ってるんですが このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。 メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等) をいくら調節しても、重なってしまいます。 http://cilo.web.fc2.com/photo-studio-room.html 上のURLが問題のページです・・。 そして下のが問題のスタイルシートです・・。 html{ scrollbar-arrow-color:#ccc; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ccc; scrollbar-track-color:#fff; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-color:#fff; } body{ background-image: url(); background-color:#fff; background-position:right top; background-repeat: no-repeat; background-attachment: fixed; padding:0; margin:0; text-align:left; } #sub{ width:980px; height:800%; } .main{ margin:10px 20px 10px 0px; padding:0px 0px 70px 0px; text-align:left; font-size:12px; line-height:1px; font-family:Verdana,Osaka,'MS P Gothic'; color:#999; } h1{ font-size:12px; color:#666666; text-align:right; font-decoration:none; font-weight:normal; font-family:'Georgia',Verdana,Osaka,'MS P Gothic'; margin:0px 270px 20px 0px; padding:0px 80px 0px 0px; } h2{ font-size:12px; color:#666; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; text-align:left; letter-spacing:10px; line-height:20px; text-decoration:none; margin:30px 0px 0px 10px; padding:5px 13px; } h3{ font-size:11px; color:#333; text-decoration:underline; margin:5px 10px; padding:0px 9px; } /* メニュー部分の設定 */ #menu { text-align:center; letter-spacing:3px; } #menu ul{ list-style:none; margin:50px 0px 0px 0px; padding:0px; } #menu li{ display:inline; } #menu li a{ display:block; color:#666; border:1px solid #666; background-color:#fff; margin:10px 55px 0px 35px; padding:5px; } #menu li a:hover{ background:none; } /* テキスト設定 */ .1{ line-height:15px; padding:10px 10px 0px 10px; } /* メルフォ設定 */ form table{ margin-left:30px; } td.name{ width:8em;color:#000; text-align:right; padding:5px; float:left; } input.name{ width:20em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } input.url{ width:25em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } textarea.text{ font-size:10px; line-height:15px; border:solid #000 1px; margin:0.5em 0; padding:0.5em; } td.post{ text-align: center; } input.post{ width:60px; height:21px; color:#000; font-size:10px; line-height:12px; background:transparent; border:solid #000 1px; text-align:center; margin:0.5em 0 0 1em; padding:0; } /*　リンク　*/ a{ text-decoration:none; } a:link{ color:#999; } a:active { color:#999; } a:visited{ color:#999; } a:hover{ color:#00ccff; } /* 画像のボーダーを0にする */ img { border:none } /* カーソル設定 */ body{cursor:url();} a{cursor:url();} ご回答よろしくお願いします。

  • フッターの画像の位置づけ指定方法がわからない

    ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; 　　　　　　　　　 　　font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; 　　　　　　　　　/*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ 　　　　　　display: block; line-height: 25px; text-decoration: none; 　　 text-align:right background-img:url(.gif); 　　　　　　padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 　　　　　　　　　　　　　　color: #8b1c62 } ul.sidemenu ul {margin: 0; 　　　　　　padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; 　　　　　　　line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; 　　　　　　　　　　　　　 　　　　color:#ffffff; 　　　　　border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; 　　background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); 　　　　　　background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～　　 <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。

    • 締切済み
    • CSS
  • テーブルタグについて

    重ね重ね質問してごめんなさい！ スタイルシートを使ってみたんですけど・・・ <HTML> <HARD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <META name="robots" content="noindex,nofollow"> <TITLE>**************</TITLE> <style type="text/css"><!-- body{font-size:12px;} div{font-size:14pt;font-weight:bold;color:orange;text-indent:47em;} .moji{font-size:13px;font-weight:normal;color:black;text-indent:65em;} span{font-size:14px;color:orange;margin-left:75em;} .rire{font-size:12px;color:black} --></style> </HEAD> <BODY> <BR><BR><BR><BR> <div>***********</div> <BR> <div class="moji">***************</div> <BR><BR> <span><A HREF="mail.htm"><IMG SRC="image/******.gif" border=0></A>(←mail)</span> <BR><BR><BR><BR> <table class="rire" border align="right" border="0" cellpadding="0" cellspacing="1" bordercolor="orange"> <tbody> <tr> <td>**** <img src="image/***.gif"></td> <BR> <tr> <td align="left"> <table style=" border:1px;solid #ffa000; cellpadding: 3px;width: 320px;height: 63px ;color:black; font-size:12px;"> <tr> <td>****</td> </tr> </tbody> </table> 　　　・ 　　　・ 　　　・ テーブルタグを閉じても文字がテーブルの中に入ってしまうんです・・・。 何が間違っているのか分かりません・・・。閉じるタブは閉じてます・・・よね？ 教えてください！

    • ベストアンサー
    • HTML
  • IE以外のブラウザでも表示したい

    文字をウィンドウ底面に合わせて動くレイアウトにした所、 Netscape・FireFox・Operaでは文字が消えて見れませんでした。IEでは普通に希望レイアウト通り見れています。 IE以外のブラウザ（最低限上記）でも見れるようにするにはどうしたらよいのでしょうか？ タグは以下のようになっていますがどこか間違っていたらご指摘お願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> <!-- BODY{ scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:black; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff; background-color : black; background-image : url(logo.gif); background-repeat : no-repeat; background-attachment : fixed; position : fixed; } P{ font-family : Arial; font-weight : bold; color:#dcdcdc; position:absolute; bottom:0px; margin-left : 30px; } FONT{ font-size : 8pt; font-family :"ＭＳ ゴシック"; font-weight : normal; } --> </STYLE> </head> <body> <p align="center"> <a href="**.html" target="**">1</a><br> <br> <a href="**.html" target="**">2</a><br> <br> </p> </body> </html>

    • ベストアンサー
    • HTML
  • リンクＢＯＸと見出しに空白が出来る

    ただ今独学でhtmlとcssの勉強をしているのですがｃｓｓとｈｔｍｌでリンクBOXを作ってその下に見出しをつけようと思ったら添付画像のように空白が出来ます。ソースのどこが悪いのでしょうか。 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>会社方針</title> <style type="text/css"> div#container{border:solid 2px black; padding:10px; width:1200px; margin-left:auto; margin-right:auto} div#top a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-31px; left:1px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about1 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-97px; left:165px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about2 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-163px; left:326px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about3 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-229px; left:490px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about4 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-295px; left:654px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about5 a { display:block; width:166px; height:64px; background:#ffcc00; position:relative; top:-361px; left:818px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } div#about6 a { display:block; width:168px; height:64px; background:#ffcc00; position:relative; top:-427px; left:979px; border:1px solid #a7e; color:#000000 text-indext:-9999px; text-decoration:none; text-align:center; font-size:1.25em; } h2{ padding:-1000px 0px 0px 0px; font-size:1.15em; border-left:solid 18px #ffcc00; padding-left:5px; margin:3px; } p { margin: 0.5em 0px; } </style> </head> <body> <div id="container"> <h1><img src="title.png" alt="株式会社＊＊＊＊"/></h1> <div id="top"> <a href="../index/index.html"><p align="center">TOP</p></a> </div> <div id="about1"> <a href="about1.html"><p align="center">会社方針</p></a> </div> <div id="about2"> <a href="about2.html"><p align="center">企業概要</p></a> </div> <div id="about3"> <a href="about3.html"><p align="center">製品</p></a> </div> <div id="about4"> <a href="about4.html"><p align="center">福祉サービス</p></a> </div> <div id="about5"> <a href="about5.html"><p align="center">スタッフ紹介</p></a> </div> <div id="about6"> <a href="about6.html"><p align="center">お問い合わせ</p></a> </div> <h2>会社方針</h2> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ホームページの作成について教えてください。

    ホームページの作成について教えてください。 現在、HPのインデックスページの上部のh1のところに画像とテキストを載せ、 テキストの表示はHP上では見えないように設定しています。（画像のみが見える状態） これを、画像を消して、テキストが表示されるように直したいのですが、 画像を消すことはできたのですが、テキストを表示させる方法がわかりません。 htmlタグは <h1><a href="index.html"><span>文字列</span></a></h1> となっており、 cssは body { background-color: #E8E4DF; margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,p { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; font-weight: normal; font-size: 80%; margin: 0px; padding: 0px; } ul,li { list-style-type: none; margin: 0px; padding: 0px; } li { font-size: 80%; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; color: #333333; } a span { display: none; } .clear { margin: 0px; padding: 0px; clear: both; } a:link,a:visited { color: #CF5B01; text-decoration: underline; } a:hover { color: #663300; text-decoration: underline; } となっています。 初心者のため、どこをどう直したらよいのかわかりません。 どなたか御教授お願い致します。

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

    よろしくお願いします。 文字の大きさ、行間を指定しているのですが プラウザーによっては文字の位置が一行ほどずれてしまいます。 何か対策はないのでしょうか？ ＩＥは文字半角分左に、Chromeは一行上に、Operaは半角分右によってます。 ＣＳＳを自力で書き込むのは初めてで、サンプルブックを見ながらしてます。 書き方を間違えているのでしょうか。 ------------------------------------------- 【スタイルシート】 *{ 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する