- ベストアンサー
html内のコメント文
初心者にて失礼します。 html+cssで３カラムの段組を行ってますが、内容が複雑になってくると「</div>」がどの属性の終了なのか混乱してくるため、各「</div>」の前に終了コメント<!--end div#id-->を付けておりますが、開始のほうに<!--start div#id-->と入れるのは変でしょうか？ また開始コメントを入れるのは素人の発想でしょうか？ ご教授願います。
- beginner_w
- お礼率55% (91/164)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- rally
- ベストアンサー率28% (32/111)
TABで階層を作るのも有効ですが、divが長くなるとわかりにくくなりますね。 divについては、id属性を持たせると良いと思います。 タグが明確になりますし、スタイルシートを設定するのも簡単です。 <div id="main"> <div id="left"> </div> <!-- left --> <div id="right"> </div> <!-- right --> </div> <!-- main -->
補足
はじめまして。 終了コメントではなく開始コメントのほうを質問でしてるのですが・・・ rallyさんの回答では</div>の後に終了コメントがありますが、終了コメントは</div>の前につけるのでは？？
一般的にはtabキーの空白で親子関係を表すのでコメントを付けない気がするのですが・・・ 擬似的な表現ですが <div> <div> <h1>ヘッダー</h1> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div> <div> <h2>ヘッダー</h2> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <div> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div> </div> </div> こんな感じで。 複雑に見えるのは人間側であって実際に処理をするコンピューター側ではないので、できるだけ無駄を省いた書き方にする方がよいのではないかと思います。
お礼
ありがとうございます。 tabキーで親子関係を表す方法は知りませんでした。非常に勉強になります。
関連するQ&A
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- 終了タグのコメントとしての属性
こんにちは。 自称html中級者です。 htmlの終了タグについて質問があります。 【質問内容】 1. 終了タグにコメントとして属性をつける事の是非 2. 是の場合、その条件・理由・根拠 3. 非の場合、その条件・理由・根拠 【条件】 解析、生成、その他ツールは使用しない 【経緯】 現在、社内HPのメンテを行っております。 タグの要素が長く開始～終了が分かり辛い場合は、何らかの終了コメントをつける事が多いと思います。 例 (直前に付ける場合) <div id="hoge"> ... <!-- hoge --></div> それを見ていて気になったのですが、上記例を次のように、終了タグ内に属性として埋め込むのは如何なものでしょうか？ 例 (属性名fooとする場合) <div id="hoge"> ... </div foo="hoge"> 終了タグに余計な物を入れるのが良くないのは承知しています。 が、その理由について深く述べられている記載がなかったので質問に至りました。 以上です。 ご教示よろしくお願いします。
- 締切済み
- HTML
- HTML5コメント欄の<article>について
現在HTML5でブログテンプレートをコーディングしています。 その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。 導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり ソースの記述順序上、メインカラムの中にコメント欄が入りません。 簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム ～～ </div><!-- #main--> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div><!-- #wrapper--> こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。 このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。 (勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります) なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。 かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。 このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？ http://www.w3.org/TR/html5/sections.html#the-article-element ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み) コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。 その<article>に<hn>タグがないことが疑問に思わせた発端なのですが 恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので <hn>タグをつけていないのだと思われます。 だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり 記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。 これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。 どなたかご教授宜しくお願い致します。
- ベストアンサー
- HTML
- CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 & 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>
- 締切済み
- HTML
- フロートを利用した2カラムレイアウト
お世話になります。 HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？ 形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。 【HTML】 <div id="wrapper"> <div id="right"> □□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□(重要テキスト) </div> <div id="left"> □□□□□□□□□(メニュー） </div> </div> 【CSS】 #wrapper{ width:800px; background:url();←省略 } #right{ float:right; width:680px; } #left{ float:left; width:100px; } という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。 Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。 floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。 どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？
- ベストアンサー
- HTML
- 3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
- Mysql select文で取得した値をカラム保持
勤務時間管理アプリを作っています。 深夜時間残業と普通時間残業を10：00を境に 分けてカラムを用意しています。 以前、投稿されていた記事を参考に下記のselect文で 深夜残業時間を取り出すことは出来ました。 ただ取りだした値を準備したカラムに保持出来ませんでしょうか？ SELECT id,start_time,end_time,rest_time ,CASE WHEN end_time<'22:00:00' THEN NULL WHEN TIMEDIFF(TIMEDIFF(end_time,start_time),rest_time)<='08:00:00' THEN NULL ELSE TIMEDIFF(TIMEDIFF(end_time,'22:00:00'),rest_time) END AS SHINYA start_time(開始時間） end_time(終了時間） rest_time(休憩時間) SHINYA(深夜時間残業 カラムを前もって準備ここに保存）
- 締切済み
- MySQL
- CSSの切り替え
横に３カラムのページなのですが、スマートフォン向けにmax-device-width:480px でCSSを切り替えようと思っています。 その場合にスマートフォンだと２カラムページにしたいのですが３カラム目の記述を 表示させないような方法はないでしょうか？ 例えば <div id="colum1">カラム１の記述</div> <div id="colum2">カラム２の記述</div> <div id="colum3">カラム３の記述</div> ＰＣ用のCSS #colum1 { width: 100px; } #colum2 { width: 400px; } #colum3 { width: 200px; } スマホ用のCSS #colum1 { width: 100px; } #colum2 { width: 400px; } #colum3 { width: 0px; } このように0指定しても記述を消すことはできません、スマホの場合３カラム目を 無視するような方法はないでしょうか？
- ベストアンサー
- CSS
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- CSSで、 #hoge と、 div#hoge の違いは？
CSSのID属性の指定で、#hoge と、 div#hoge のように参考書によって二通り見かけるのですが、これの違いはあるのでしょうか？
- ベストアンサー
- HTML
お礼
わざわざご丁寧な回答をありがとうございます。 読んでいて非常に参考になりました。 なけなしの金でDreamweaverCS3を購入したのはよかったんですが、以前はテーブルレイアウトを行ってまして、脱フレームレイアウトをこなすようになってからは毎日頭が混乱してどうにかdivを整理できないかと考えてました。 参考書には終了コメントについての記載はあるのですが、開始コメントの解説はどの書物にもなく、正直悩んでました。 本当にありがとうございます。