- ベストアンサー
HTMLの疑問について
ORUKA1951の回答
簡単に説明します。 最初にHTMLとは何かを正しく理解してください。それが分かれば答えは自ずから見えてきます。 CERNのバーナーズリーがHTML/HTTPを発明した経緯は、様々な端末間でデータのやり取りを解決するために、SGMLを参考にマークアップされたテキストデータで情報をやり取りする必要があったからです。それは、文書をそれを構成する要素に分解して、その要素を、タグを使って文書構造だけをマークアップしておいて、それをどのように表示するなり、印刷するなり、読み上げるかは端末側に任せるという方法です。 詳しくは ⇒2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) １、空のdivが悪い、良くないとよく言われますが、 HTMLに用意されているタグは、見出し<h1>～<h6>、段落<p>、引用<blockquote>など限定的なため、HTML4.01では、 『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』となっていました。 【重要】 DIVは、他のタグでは文書構造をマークアップするには足りないときにidやclass名でそれを補完する為であるということです。 DIVの用途をデザインのためと考えていると誤りです。逆に、当面デザイン的には必要はないけど、その要素なり要素の集団を他と区別するときに使用するのはまったく問題ありません。 <div class="example memo" id="EXAMPLE1"> <p>例えば、・・・・・</p> </div> とか・・・。 もちろん将来、この文書構造を利用してスタイルを追加することがあるときには役立つでしょう。 div.section div.memo{border:solid 1px gray;padding:0.5em 1em;font-size:0.9em;margin:0.5em 1em;position:relative;} div.section div.example.memo:after{content:"[例]";position:absolute;top:-0.5em;left:-0.5em;background-color;yellow;} とかね。 ２、<div id="" class="" >といったタグの例を見たのですが、これは単純に、すでにcssに設定されているidやclassを混合して使い、いちいち混合したcssを書かなくてよいために使われるのでしょうか。 1.で示しましたが、idやclassは、文書構造を保管するための符号です。スタイルシートのために記述するわけではありません。スタイルシートで、classやidで示された文書構造を利用できるという意味です。 <div class="example memo" id="EXAMPLE1"> は、example(例)というクラスとmemo(メモ)というクラスに所属するDIV(ブロック)で、リンクターゲット、javascript、スタイルシートで利用できる一意である。<span class="example">との区別もつきます。 ３、どうしても一括で背景を変えたいために、また自由度のためにcssで背景指定のみのdivを、例えば<div id="back" style="float:right; background-image:url(○○.jpg);"></div>をおいておきたいのですが、この場合どうしても空のdivができてしまします。 HTMLの要素(ここではDIV)にstyleを書くとその詳細度は[1 0 0 0]になって、同じ要素に適用されている外部/HEAD内のスタイルシートの宣言をすべて消し去ります。 ⇒6.4.3 Calculating a selector's specificity( http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#specificity ) ページ全体の背景を変更したいのでしたら、これこそまさに繰り返し説明している「文書構造とプレゼンテーションの分離」の最大の価値です。 外部スタイルシートのbody{background:url();}を書き換えればよいだけです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 著者及びWebサイト管理者が、複数文書間(及び複数サイト間)でスタイルシートを共有できる。 著者が、文書に変更を加えることなくスタイルシートを変えられる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.3 外部スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )］より ＞間に背景と同じ画像の<img >を入れるというのは無しででお願いします。 ではなくて、 div.header{position:relative;z-index:10;} div.header:before{content:url();z-index:-10;display:block;width:100%;height:100%;} とか・・ ＞これは一括で背景を変えたいという目的もありますが、あとからdivの間に文字やリンクをいれるかもしれない（ずっと入れない可能性もある）ために、このような後のdivけん、今のデザインのための画像を置いておこうと考えています。 将来何かを入れる予定??が確定しているのなら <div id="NEWS">ここには新着情報が入る。</div> とでもしておけば良いです。<head></head>内に#NEWS{display:none;}と書いておけば良い。 本当に予定もないのでしたら、なにも書かなくて良いです。書く必要はないでしょう。 例えば、[分かりやすいようにHTML5的に書くと] <section> <h2>本文見出し</h2> <section> <h3>項見出し</h3> <p>。。。。。</p> <p>。。。。。</p> </section> </section> というHTMLがあって、将来挿絵的要素を加える必要が出てきたとき <section> <h2>本文見出し</h2> <section> <h3>項見出し</h3> <p>。。。。。</p> <p>。。。。。</p> <figure> <figcaption>なんたら</figcaption> </figure> </section> </section> と追加すればよいし、そのときにスタイルシートを追加すればよい。 HTML4.01だと <div class="section"> <h2>本文見出し</h2> <div class="section"> <h3>項見出し</h3> <p>。。。。。</p> <p>。。。。。</p> <div class="figure"> <h4>なんたら</h4> </div> </div> </div>
関連する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
お礼
１、<div id="back" style="float:right; background-image:url(○○.jpg);"></div>は背景を設置しているうえに、後に利用するため他の集団と分けているため、空のdivではあるけれど使い方に問題はないということでしょうか。 ２、は私の認識は合っているということでしょうか。 ３、は１、と同様、<div id="back" style="float:right; background-image:url(○○.jpg);"></div>というdivを置いておくことは問題ではないということでしょうか。 display:nonをすると背景も消えてしまいます・・・ divを消さずに背景も消したいときに活用したいと思います。 回答有難うございました。