- ベストアンサー
HTMLの疑問について
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞１、<div id="back" style="float:right; background-image:url(○○.jpg);"></div>は背景を設置しているうえに、後に利用するため他の集団と分けているため、空のdivではあるけれど使い方に問題はないということでしょうか。 文書構造ではありませんから書きません。 ２、は私の認識は合っているということでしょうか。 いいえ、スタイルシートのために書くのではないので間違ってます。 ３、は１、と同様、<div id="back" style="float:right; background-image:url(○○.jpg);"></div>というdivを置いておくことは問題ではないということでしょうか。 書かなくて良いはずです。 もう一度、先の回答を読んでください。 なお、h1～h6は見出しのレベルを表していましたが、順番の規定は仕様書にはありません。 <h1></h1> <h2></h2> <h3></h3> <h1></h1> と<h1>の前に<h3>があっても構いません。 しかし、 <h1></h1> <h3></h3> のようなすっ飛ばす書き方は・・ RFC1866( http://www.ring.gr.jp/pub/doc/RFC/rfc1866.txt ) に望ましくない アクセシブル・リッチ・インターネット・アプリケーション（WAI-ARIA）1.0( http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/wd_20090224/index.html#heading ) に「べき」と書かれています。 なお、HTML5では、h1～h6もランクを示すものですが、階層はsection要素の入れ子数で算出しますから <body> <section> <h1></h1> <section> <h1></h1> <section> <h1></h1> と書いても、 <body> <section> <h1></h1> <section> <h2></h2> <section> <h3></h3> と書いても、 <body> <section> <h1></h1> <section> <h3></h3> <section> <h1></h1> と書いても良くなりますが、最初か二つ目の何れかに統一することが期待されています。 複雑な階層構造の場合は<h1>で統一するほうが楽でしょう。 ⇒4.4.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )
noname#206842
- noname#206842
- noname#174911
関連するQ&A
- 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
- HTMLに同じコードを一括挿入
HTMLに、違う.htmlに同じidやclassに、または同じidやclassを一括で同じコードを打ちこめる機能何てありませんよね。 １、Ｄreamweaverでもaptanaでもそう言った機能があるソフトはあるでしょうか。 ２、まずはサイトを作って、後からＡＳＰのコードを入れようと思っているのですが、その場合すべてのファイルを開いてはりつけてを繰り返すしかないでしょうか。 大量にページがあるので、先にテンプレートにＡＳＰのコードを書いておくべきか悩みます。（簡単のため審査はないとして） （すべてのページに特定の画像をはりつける、はりつける画像を気分で変えたいとも思っています。（画像だけの場合、最悪空のdivを置いておいてあとからcssで背景指定指定でもいいのですが・・・）） 回答、アドバイスよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- HTMLのfooterの設定がうまくいきません
HTMLのfooterの設定がうまくいきません 画像のようにleftがrightよりも高さが大きく、 以下のように記述しましたがfooterがうまく ページの最下位に表示されません。 現在は画像の左のような状態で、 右の画像のようにしたいです。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #left{float:left;} #right{float:right;} わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが ２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている） 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。 試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って 下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。 文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で <li class="name"> のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。 初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。 右側と左側にボックスをフロートさせた際、 どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを 追加して回り込みをなくしたらよろしいでしょうか？ 分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
- css で背景のリピート設定についておしえてください。
css で背景のリピート設定についておしえてください。 htmlもcssも初心者で初めてホームページの制作をしています。 タグをコピーします。 <body> <div id="header"> </div> <div id="globalnavi"> <ul> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> <li id="menu"><a href="#">メニュー</a></li> </ul> </div> </div> <div id="haikei_repeat"> <div id="content1"> <div class="inner_top"></div> <div class="inner_repeat"> ここにテキスト </div> <div class="inner_bottom"></div> </div> <div id="body_right"> <div class="inner_top2"></div> <div class="inner_repeat2">ここにもテキスト</div> <div class="inner_bottom2"></div> </div> </div> </body> bodyにも背景画像を使い、ヘッダ以下の コンテント部分の<div id=haikei_repeat> にy方向にリピート画像を指定しました。 <div id="haikei_repeat"> の中にある、 div classにもそれぞれ背景画像をしていし、topとbottomはリピートさせず、 真ん中のinner_repeatのみ背景画像をリピートしています。 このdivにテキストやimgを挿入し、後ろのhaikei_repeatもinnerrepeatの大きさに合わせて縦に リピートしてほしいのですが、うまくできません。 <div id="haikei_repeat">と <div id="inner_repeat">のボックスサイズは 横は指定し、縦のみauto にしています。 inner_repeatはきちんと内容の量にあわせてレピート表示できていますが、 背景リピートはできていません。 どのようにしたらいいでしょうか？？？ どなたかおねがいします。
- ベストアンサー
- HTML
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100 height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- 画像を表示するための一番適切なタグは何？
（例） <div id="TOP">空</div> <div id="MID">たくさんのコンテンツ</div> <div id="BTM">空</div> #TOPは背景画像の一番上 #ＭＩＤは真ん中の画像をリピートさせる #BTMは背景画像の一番下 このような組み合わせでページを作成したいことがあります。 例えばこのOKWaveの質問欄の灰色の部分です。（ＰＣ版） 記載したコードではdivタグを使用していますが divタグは要素のグループ化に用いるものなので向いていないと思います。 pタグは１つの段落を示すのでそれも不向きかなと・・・ そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな？って思えてきました。 皆さまのご意見をお聞かせ下さい。
- ベストアンサー
- HTML
- HTMLのidについて
タグは独学なので基本的な質問ですが宜しくお願いします。 例えば、<div id="○○">～</div>の使い方ですが、「id」は同一ページ上に１回だけ使えるというルールは理解していますが、同じサイトでも異なるページであれば同じ「id="○○"」と書いて、「css」で指定する事は文法上、あるいは構造指定という観点からでも間違いではないのでしょうか。 要は「class」で指定しておけば問題ないのですけれども。 基本的すぎる質問ですが、回答宜しくお願いいたします。
- ベストアンサー
- HTML
補足
１、文章構造ではないのですが、背景（cssで指定した）のみをもったブロック要素を配置しておきたいのです。 divでこの用法がいけないというのなら、他の方法はないでしょうか。 ２、私の質問が悪かったためか、認識について伝えることができなかったようです・・・ですが納得はできました。 ３、１、の理由から書いておきたいのです。