- ベストアンサー
HP作成
cssを勉強し始めたばかりです。どうぞ教えてください。 画像 画像 テキストと並べたいのですが、 テキストは2行<p>クラスと<strong>です。 <li>要素をつけて、display:inlineでやってみましたが、画像 画像 <p>改行されて<strong>が来ます。 どうぞよろしくお願いいたします。
- komatteruenen
- お礼率100% (5/5)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<p>タグはブロックレベル要素なので前後で改行されます。 画像自体を<p>タグの中に入れると改行されないと思います。
その他の回答 (1)
- tracer
- ベストアンサー率41% (255/621)
p要素のdisplayの初期値はblockです。 そのままのhtmlを使うなら、p要素にdisplay:inlineを設定してみてください。 もしくは、pタグの代わりに、display:inlineが初期値のspan要素を使うほうが自然かと思います。 ちなみに、よくあるリファレンスサイトの解説には、ブロックレベル要素とインライン要素というものがあるかもしれませんが、現在のブラウザの解釈(html5)としては、そのような概念は既にありません。現在では、見た目に関わる機能はタグそのものに関与せず、cssで調整します。古い情報に惑わされないようにご注意ください。
お礼
早速のご回答ありがとうございました。 ブロックレベルインラインレベルが経験不足でよく理解できていませんでした。html5は進化し、cssでスタイルするように統制がとれるようになったということでしょうか。よく勉強し経験を積みます。
関連するQ&A
- pタグ 改行しない 文字位置指定
pタグを使うけど改行しない、 なおかつ文字は中央に表示する とするにはどうすればいいでしょうか？ <style type="text/css"> p.mi{ text-align:center; display:inline; } </style> </head> <body> <p class="mi">テキスト</p>あああ </body> これだと、改行はされませんが、中央に表示されません。
- ベストアンサー
- HTML
- 文字と文字の間をそんなに開けたくない。
【css】 p.title{ font-size:1000%; text-align:center; } 【HTML】 <p class="title">test</p> としたときに、 testという文字の下がすごくあいてしまいます。 こんなに空白を表示させたくないため、 display:inline; を付け加えたのですが、 そうするとなぜか text-align:center; が適用されなくなります。 text-align:center; を適用しつつ、</p>の後にこんなに改行させないためにはどうすればよろしいでしょうか？
- 締切済み
- HTML
- <li>をfloat,inlineさせたときのセンタリング
スタイルシートを用いて、ナビゲーションバーを作っています。 リスト<li>をfloatさせて、横に長いものにしていますが、 1行では収まらないため、2行になっています。 リストにfloat:leftとinlineを指定することで、普通のテキストのように<div>ボックス内に流し込んで、端でいっぱいになったところで自動的に改行させています。 <div id="header"> <ul id="navi"> <li>トップ</a></li> <li>ページ１</li> <li>ページ２</li> <li>ページ３</li> </ul> </div> #header #navi li{ float:left; display: inline; } 実際には10個ぐらいあるのですが、説明のため上のように4つのアイテムがあるとして、説明すると、今は トップ ページ１ ページ２ と表示され、次の行で、"トップ"の左側に揃って ページ３ が表示されます。 やりたいことは、1行目のちょうど真ん中、（この場合"ページ１"の下あたり）に"ページ３"を表示させたいのです。 #header{ text-align:center; } または #header ul{ text-aligne:center; } で良いのかと思ったのですが、うまくいきません。 こういったことはできるのでしょうか？ そもそも、やり方がまちがっていますか？ <li>に対してfloatを解除すると、センタリングされるのですが、<li>同士の間にスペースが出来てしまいます（バックグラウンドに色が付いているので）。どちらかというとこちらをなんとかするようにしたほうがいいのでしょうか？
- 締切済み
- HTML
- jQuery 子孫セレクタがうまくいかない
最近jQueryを勉強しはじめた者です。勉強していく中で、 疑問が生じたので、質問させていただきます。 jQueryの子孫セレクタが意図したとおりに動きません。 具体的には ： $(function(){ $("p strong").remove(); }); ： <p><em><strong>削除される</strong>abcdefg</em></p> <p><div><strong>削除されるはず</strong>abcdefg</div></p> ： と記述した時、 <strong>削除されるはず</strong> の部分が削除されません。 <strong>削除される</strong> の部分は削除されます。 以下のときは、2つとも削除されます。 ： $(function(){ $("li strong").remove(); }); ： <ol> <li><em><strong>削除される</strong>abcdefg</em></li> <li><div><strong>削除されるはず</strong>abcdefg</div></li> </ol> ： 私は、どの場合であっても削除されると考えていました。 ブロックレベル要素とインライン要素が関係していそうな感じはするのですが、 なぜ、このようになるか理由がわかりません。 よろしくお願い申し上げます。
- 締切済み
- JavaScript
- ポップアップメニューの作成方法を教えてほしい
いろいろなサイトを見ながらポップアップメニューを作成しています。 ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。 ご教授いただけると大変助かります。 作成しているHTMLは下記になります。自由に変更していいです。 <!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"> <!-- TemplateBeginEditable name="doctitle" --> <style type="text/css"> <!-- body,td,th {font-size: small; } --> body {padding: 30px; } /* 全体の文字の色 テキストの下線など*/ ul.menu a { color: #ff6100; text-decoration: none; text-align: center; border-color: #000000; } ul.menu a:link, /* 全体の表の背景の色 */ ul.menu a:visited { background: #ffffff } /* 表全体 マウスオーバー時の背景の色 */ ul.menu a:hover{ background-color: #FF6; } ul.menu a:active { } /* 診療科 セルの変更 */ ul.menu li { float: left; position: relative; margin: 0 ; width: 9em; height: 2em; font-weight: none; line-height: 2em; } ul.menu li a { display: block; width: 9em; height: 2em; text-align: left; border:none; } ul.menu li ul li { float: none; margin: 0; font-weight: normal; border:none; } /* 下層のメニューを不可視に */ ul.menu li ul, ul.menu li ul li ul { display: none; } /* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に 各科のセル 診療科*/ ul.menu li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } * html ul.menu li:hover ul { vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */ } ul.menu li:hover ul li ul { display: none; } /* 疑似要素 :hover で孫メニューを可視に */ ul.menu li ul li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } </style></head> <table width="208" border="0" cellspacing="0" cellpadding="0" background=""> <tr> <td colspan="2" bgcolor="#FFFFFF"><ul class="menu"> <li><a href="#">■診療科</a> <ul><li style="display:inline"> <a href="program/02gairai/naika02.html" target="_parent">内科</a></li> <li style="display:inline"> <a href="program/02gairai/sannfu02.html" target="_parent">産婦人科</a></li> <li style="display:inline"> <a href="program/02gairai/masui02.html" target="_parent">麻酔科</a></li> <ul> <li style="display:inline"> <a href="program/02gairai/geka02.html" target="_parent">外科</a></li> <li style="display:inline"> <a href="program/02gairai/hifuka02.html" target="_parent">皮膚科</a></li> <li style="display:inline"> <a href="program/02gairai/sikakoukuu02.html" target="_parent">歯科口腔外科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/seikei02.html" target="_parent">整形外科</a></li> <li style="display:inline"> <a href="program/02gairai/ganka02.html" target="_parent">眼科</a></li> <li style="display:inline"> <a href="program/02gairai/sinkei02.html" target="_parent">神経内科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/nousinkei02.html" target="_parent">脳神経外科</a></li> <li style="display:inline"> <a href="program/02gairai/jibiinkouka02.html" target="_parent">耳鼻咽喉科</a></li> <li style="display:inline"> <a href="program/02gairai/housya02.html" target="_parent">放射線科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/syounika02.html" target="_parent">小児科</a></li> <li style="display:inline"> <a href="program/02gairai/hinyou02.html" target="_parent">泌尿器科</a></li> <li style="display:inline"><a href="program/02gairai.htm" target="_parent">診療部</a></li> </ul> </ul> </ul> </ul> </ul> </li> </ul></td> </tr> 長くなりましたがどうぞよろしくお願いいたします。
- 締切済み
- CSS
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- 画像の隙間を埋める方法
CSSで li {display: inline} を記述すると水平方向に並んだ画像の隙間は消えるのですが <a href =""> でリンクを貼った部分の隙間が消えません。何か良い方法をご存知でしたらご教示お願いします。
- 締切済み
- CSS
- はじめまして！どうかお知恵をお貸しくださいませ。
はじめまして！どうかお知恵をお貸しくださいませ。 CSS中での問題なのですが<div id=contents>で組んだ<li>には・のマークを画像に変更して表示させています。 ところが<div id=footer>中に組んだinlineの<li>にまで画像が表示されてしまうのです。これをなんとかして防ぎたいのですがどうしたものでしょうか？contentsが親要素として継承されているのでしょうか？ footerのliで他の画像を指定してもしっかりcontentsの画像が表示されてます。margin 0など試してみましたがだめなのです。。。どうか助けてくださいませ。
- ベストアンサー
- ホームページ作成ソフト
- div の改行に関して
div の使い方に関して教えてください。 添付した画像１のHTMLの場合、改行されて■の次の段に「Grade」が来てしまいます。 しかし、画像２のHTMLの場合、なぜか「Grade」の次の段落に■がきてしまいます。 改行なしで■の右隣にGradeが来るようにするにはどうすればいいでしょうか？ 添付画像の中の画像１のHTML ■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px;"><b><STRONG>Grade:</STRONG></b> <br> Near Mint: </div> <br> 添付画像の中の画像２のHTML ■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px; display: inline-block; _display: inline;"><b><STRONG>Grade:</STRONG></b> <br> Near Mint: </div> <br>
- 締切済み
- CSS
お礼
早速のご回答ありがとうございます。 ブロックレベルインラインレベルが理解できないまま使っていました。 よく勉強します。どうもありがとうございました。