- 締切済み
htmlの<DL>というタグについて質問です
html初心者です。やってからまだ数週間です＾＾； 今仕事でやっているのは商品サイトのｈｔｍｌの書き換えです。 ＜DL＞＜DT＞＜DD＞というタグについて聞きたいのですが、 ＜DD＞の中にbackgroudを指定することはできますか？ あとこれを聞く理由は、今までは<div>を使って画像の位置を指定していたのですが これだとChromeで見た場合位置がちゃんと指定されませんでした＾＾； なので会社の人にはDDで画像をバックで埋めてと言われたのですが 調べてもちゃんと出来ませんでした；； 誰かこの問題を解決出来る人はいますか？ もっと詳しく内容を教えてくださる方は、スカイプで教えてくださいID：pikarosq 初心者なのでうまく説明できなくてすみませんm(__)m お絵かき添付しておきました。 矢印の部分が位置ずれしない方法があればなんでもいいので教えてくださいm(__)m
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。1000文字制限で書けなかったので ＿＿＿<ol id="contentTable"> ＿＿＿＿<li><a href="#CHECK">ご注文完了まで</a></li> ＿＿＿＿<li><a href="#NAME">お客様情報の入力</a></li> ＿＿＿＿<li><a href="#TEL">電話番号の入力</a></li> ＿＿＿</ol> は、 ＿＿＿<ol id="contentTable"> ＿＿＿＿<li><a href="#CHECK"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan1.jpg" width="206" height="42" alt="ご注文完了まで"></a></li> ＿＿＿＿<li><a href="#NAME"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan2.jpg" width="206" height="42" alt="お客様情報の入力"></a></li> ＿＿＿＿<li><a href="#TEL"><img src="http://img14.shop-pro.jp/PA01143/396/etc/botan3.jpg" width="206" height="42" alt="電話番号の入力"></a></li> ＿＿＿</ol> のほうが、企業サイトでは後方互換を考慮すると良いと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
「htmlの編集 位置替え DD使って( http://okwave.jp/qa/q8188372.html )」とあわせて回答します。 あなたの責任ではありませんが、前任者のものも含めて、HTMLやCSSにあまりに誤りが多くて、そのままでは対処できません。 最も基本的な問題は、HTMLは「文書構造」だけを記述し、「プレゼンテーション」はスタイルシートで指定すると言うことがなされていません。 上司の方も良く御存じないようです。ここは「勉強しなおすので時間をください」が最善です。(以下のサンプルを見せる) ＞＜DD＞の中にbackgroudを指定することはできますか？ Applies to: all elements( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#propdef-background-image )ですから、すべての要素に背景画像は指定できます。しかし背景画像の必要はないです。 「htmlの編集 位置替え DD使って」のソースにおいて <a name="top"></a> 内容が無いです。 <input type="image" javascriptを使用できないユーザーに利用できませんし、検索エンジンも理解してくれません。通常のリンクで書きます。 <b> 重要なら<strong>とか<em>です。 <font color="FFFFFF"> fontは典型的な非推奨です。HTML1.1やHTML5には存在すらしません。 <br> ひとつの段落内での強制改行です。通常は全く使用しないはずです。 <div style="position: relative;"> DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )のもので、DIVは「意味なし」ですからclassやidで意味を補完します。他に適切な要素がないときだけしか使いません。 <img alt=""> altにはこの場合↓とか入れますが・・ ・・・枚挙に尽きないです。 以下にサンプルあげておきます。 ★タブは＿に、http:はhttp：に置換してあるので戻すこと。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★Another HTML-lint 5( http://www.htmllint.net/cgi-bin/html-lint/htmllint.cgi ) でチェックすること。右上のDATAタブでソースを貼り付けられます。 HTML4.01strict + CSS3です。 ★IE7以降のIE,および他のモダンブラウザ、スマホでも利用できます。ウィンドウ幅を変えてみる ★スタイルシートを解除して検索エンジンでどのように見えているかをチェックすること。 ★項目を増やしたり説明文を長くしても全く問題ないことを確認してみること。 <!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"> <!-- div.section{margin:0 auto;width:80%;} div.section div.section{width:auto;} #contentTable,#contentTable li,#manual,#manual li{ list-style:none;display:block;position:relative; } #contentTable{text-align:center;width:100%;} #contentTable:after{content:"";clear:left;display:block;} #contentTable li{display:block;float:left;display:inline-block;width:206px;height:42px;} #contentTable li a{ display:block;width:100%;height:100%;overflow:hidden; text-indent:-10em; text-align:left; background-size:cover; } #contentTable li a[href="#CHECK"]{ background-image:url(http：//img14.shop-pro.jp/PA01143/396/etc/botan1.jpg); } #contentTable li a[href="#NAME"]{ background-image:url(http：//img14.shop-pro.jp/PA01143/396/etc/botan2.jpg); } #contentTable li a[href="#TEL"]{ background-image:url(http：//img14.shop-pro.jp/PA01143/396/etc/botan3.jpg); } #manual{counter-reset:step;} #manual li:before{ content: "STEP" counter(step) ":"; counter-increment:step; font-weight:bold;font-face:"MS Pゴシック";font-size:1.1em; } #manual li:after{ content:url(http：//img14.shop-pro.jp/PA01143/396/etc/allow2.jpg); position:absolute; top:20px;left:0; } #manual li p{ margin-left:50px; text-indent:1em; min-height:80px; } h3{background-color:#00BFFF;padding:20px 10px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>メニュー</h3> ＿＿＿<ol id="contentTable"> ＿＿＿＿<li><a href="#CHECK">ご注文完了まで</a></li> ＿＿＿＿<li><a href="#NAME">お客様情報の入力</a></li> ＿＿＿＿<li><a href="#TEL">電話番号の入力</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>お買い物の流れ</h3> ＿＿＿<ol id="manual"> ＿＿＿＿<li><a name="CHECK">カートを確認する</a> ＿＿＿＿＿<p>カートに内容を確認して修正が必要なら修正してください。</p> ＿＿＿＿</li> ＿＿＿＿<li><a name="NAME">お客様情報の入力</a> ＿＿＿＿＿<p>郵便番号、住所、お名前を入力してください。</p> ＿＿＿＿</li> ＿＿＿＿<li><a name="TEL">電話番号の入力</a> ＿＿＿＿＿<p>配送時の問合せに使用します。必ず連絡のつく電話番号を記入してください。</p> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-07-22</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
