HTMLの部分を切り取って表示する方法
- HTMLの特定の要素を切り取って表示する方法を教えてください
- HTMLのdiv要素からはみ出た部分を切り取って表示する方法について教えてください
- CSSを使用してHTMLのdiv要素からはみ出た部分を切り取って表示する方法について教えてください
- ベストアンサー
はみ出た部分が切れるように表示したいのですが
以下のHTMLですと、2個目のliの１２３…が2行目に表示されてしまいますが、 これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか？ 実際には1個目のliの長さが可変なため、HTMLと文字列（１２３…）を変えるのでなく CSSでなんとかしたいのです。 よろしくお願いします。 <!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"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">１２３４５６７８９０</a></li> <li class="li2"><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> </ul></div> </body> </html>
- paraspor
- お礼率74% (202/270)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （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;}
お礼
ありがとうございます。
関連するQ&A
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- firefoxだと２列で表示されてしまう。
よろしくお願いします。 div.base {width:100%;} .base ul { margin: 0px; padding: 0px 0px 3px 0px; list-style-type:none; } .base li { margin: 0px; padding: 2px 0px 5px 23px; width: 33%; float: left; } 上記のCSSを <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> のように書き込んでいるのですが、IEなどではうまく３列で表示されますがfirefoxの場合はなぜか２列に表示されてしまいます。 お分かりになる方、是非ご教授お願いします。
- 締切済み
- HTML
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- html+cssでfloatに関して
このやり方に問題があるかどうかを教えてほしいのと、 もっといいやり方があれば教えて頂きたいです。 まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。 で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。 さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"><!-- body{margin:0;padding:0;background:#fc0;} div{width:850px;background:#fff;margin:0 auto;} ul{width:900px;margin:0;padding:0;} li{width:250px;height:300px;float:left;display:inline;margin-right:50px;margin-bottom:50px;background:#0fc;} img{border:0;} --></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- ulとulの間が空いてしまう
http://www.ana.co.jp/asw/index.jsp こういったメニューが作りたいのですが <ul class="menu"> <li> <li> ... <ul> <ul class="menu"> <li> <li> ... <ul> こうやってやるとulとulの間に隙間が出来ます。 marginもpaddingも0です。 どうやったらいいでしょうか？ ＣＳＳは下記です。 ul.menu { width: 750px; margin: 0px; padding: 0px; list-style-type: none; line-height:normal; } ul.menu li { line-height:normal; margin: 0px; padding: 0px; float:left; } 宜しくお願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
- 初心者です 画像横に文字を入れたい ｃｓｓ
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.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=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
- リストの回り込みについて（マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます。