- ベストアンサー
HTMLの部分を切り取って表示する方法
- HTMLの特定の要素を切り取って表示する方法を教えてください
- HTMLのdiv要素からはみ出た部分を切り取って表示する方法について教えてください
- CSSを使用してHTMLのdiv要素からはみ出た部分を切り取って表示する方法について教えてください
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
リストのスタイルはブラウザによって、marginやpaddingなどが異なります。 HTMLはデザインのために書くのではなく、あくまで文書構造を記述するものです。その文書構造を利用してスタイルを記述していきます。(直接HTMLではない) そのためには、HTMLがきちんとしていなければなりません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より この場合、 <li class="li1">と<li class="li2">は同じリストの項目(並列した同等のデータ)ではないので、ひとつの項目のはずですから、そのようにマークアップしたほうが良いでしょう。 また、いちいちすべての項目にclass名をつける必要はありません。最も遠い親にだけ、そのブロックの意味を示すclass名を付けるようにしましょう。それが文書構造をHTMLでマークアップするという意味です。 後日、スタイルを変更するときにとっても楽です。HTMLを開いてclass名を追いかける必要は無くなります。 divは無くてもよさそうなので外してありますが、必要ならulについているclass名をdivに移動して、スタイルシートのul.NumberListをdiv.NuberList ul に変更してください。 HTMLもスタイルシートも、簡単で意味もよくわかると思います。 例] ul.NumberList li strong{}は「class名(NumberList)の項目内のstrongは、どうプレゼンテーションしろ」なので、先でHTMLを見なくてもスタイルを変更できるでしょう。class名はそのためにつけるものです。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』div/spanに限らず、そうしたほうが良い。そうすべきです。いずれHTML5になると、否が応でも・・要素名に格上げされるので <div class="header">(HTML4.01)→<header>(HTML5)・・文書のヘッダ <div class="section"> → <section>・・本文を示す <div class="nav"> → <nav>・・・ナビゲーションブロック HTML4.01で文書構造を示すためにつけていたclass名がそのまま要素になる。(つけていればですが) その他 ・text-indentプロパティはその段落が複数行に渡るときの最初の一行目の指定に使用します。 ・padding:プロパティがひとつしか書かれていない場合は上下左右すべてに適用されます。 二つのときは、それぞれ上下と左右 ３つのときは、上下と右と左になります。(足りないときは対辺の値) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み <!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-Style-Type" content="text/css"> <title>numberList</title> <style type="text/css"> <!-- div.NumberList ul,div.d310 ul li{ display:block;list-style:none; margin:0;padding:0; } ul.NumberList{ line-height:20px; font-size:13px; width:310px; padding:0px; margin:20px 0px 0px; background:#f1f1f1; border-top:solid 1px #a9a394; } ul.NumberList li{padding-left:12px;margin:0px 10px;overflow:hidden;} ul.NumberList li strong{margin-left:19px;} ul.NumberList li+li+li{color:red;}/* おまけ3行目の文字を赤に */ ul.NumberList li+li+li+li{color:black;} ul.NumberList li+li+li a{color:red;}/* おまけ3行目の文字を赤に */ ul.NumberList li+li+li+li a{color:black;} --> </style> </head> <body> <ul class="NumberList"> <li><a href="123.html">１２３４５６７８９０</a><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> <li><a href="234.html">１２３４５６</a><strong>１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０</strong></li> <li><a href="567.html">１２３４５６７８９０１２３</a><strong>１２３４５</strong></li> <li><a href="890.html">１２３</a><strong>１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９</strong></li> </ul> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IE7への対応と隠された文字表示のためスタイルシートを少し変更 div.NumberList ul,div.d310 ul li{ display:block;list-style:none; margin:0;padding:0; } ul.NumberList{ line-height:20px; font-size:13px; width:310px; padding:0px; margin:20px 0px 0px; background:#f1f1f1; border-top:solid 1px #a9a394; } ul.NumberList li{padding-left:12px;margin:0px 10px;overflow:hidden;height:20px;} ul.NumberList li strong{margin-left:19px;} ul.NumberList li strong:hover{position:absolute;width:auto;background:#f1f1f1;}
お礼
ありがとうございます。
お礼
ありがとうございます。