- ベストアンサー
htmlの表について、こんな表を、作ります。
htmlの表について、こんな表を、作ります。 今日の出来事： 朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。 昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。 夜、上京した母を、上野駅まで、迎いに行った。 こういう表ですが、<dl><ul>だと行間が空かないし、インデントp { text-indent:5em; }だと長い文は、２行目が前に来てしまいます。 どう書けばよいでしょうか？初心者です。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
適当に調整してください。 ■ＨＴＭＬ <h2 class="title">今日の出来事：</h2> <div class="koumoku"> <p>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。<br /> 昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。<br /> 夜、上京した母を、上野駅まで、迎いに行った。<br /> </p> </div> ■ＣＳＳ .title { font-size: 90%; } .koumoku { margin-left: 15px; line-height: 2em; }
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞<dl><ul>だと行間が空かないし、インデントp { text-indent:5em; }だと・・・【中略】・・・。 HTMLとしては考え方が根本から間違っています。HTMLは、文書構造をマークアップするものです。 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 ) 2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) などを読んで復習すること。 ★htmlの表について、こんな表を、作ります。 文書構造上で表ですか？？どう見ても表ではないようです。 ・ページレイアウトの目的で表を用いる。 と上記「14.1 スタイルシートの概説」で名指しして非難されている物の様な気がします。 単純な一行日記か箇条書きとしてマークアップすべきもののように見受けられます。すなわち <div class="Diary"> <h3>今日の出来事</h3> <p>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</p> <p>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</p> <p>夜、上京した母を、上野駅まで、迎いに行った。</p> </div> ・・あるいは、 <div class="Diary"> <h3>今日の出来事</h3><ol> <li>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</li> <li>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</li> <li>夜、上京した母を、上野駅まで、迎いに行った。</li> </ol> </div> ・・のように、文書の中でそれがどんな位置づけであるかを考えてマークアップする。 その次に、それを、スクリーン端末では、どのようにプレゼンテーション(表現)するか ・リストのマークをつけるか、つけるならどんなマークを ・行間をどうするか ・長い文の処理 ・その他、どのように表現するか たとえば、<h3></h3>に：を追加するとか、h3の文字に連番をつけるとかも を、スタイルシートで指定します。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より
お礼
回答ありがとうございました。よくわかりました。
- nattocurry
- ベストアンサー率31% (587/1853)
> <dl><ul>だと行間が空かないし、インデントp { text-indent:5em; }だと長い文は、２行目が前に来てしまいます。 p { text-indent:5em; } の知識があるのに、「<dl><ul>だと行間が空かないし」という発言をするのが、私には不思議です。 <ul>を使うときに、<li>にスタイルシートを設定して行間を空ければ良いだけだと思いますが。
お礼
回答ありがとうございました。よくわかりました。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
ポイントは、朝・昼・夜の区別が論理的にどういう気持ちになるか ですね。 一つの段落で区別無く呟いているんだけどたまたま表示上行を変え てみました、程度ならken_tyanさんのでもいいでしょう。ただしア レはHTMLじゃなくてxhtmlの記法ですが。 それぞれ独立した三つの項目を列記してあるのならリストにするべ きですね。durararaさんのは文法デタラメで何も表示できません が、dlを使ってdtが「今日の出来事」でddが三つなのか、それとも ddは一つなんだけど中身がulでli三つなのか、またまた「今日の出 来事」は見出しにして直接ulでli三つなのか、そこは著者のスタン ス次第です。見た目はスタイルシートでどうにでもなります。項目 の間をpと同じように開けたければ、padding-topとpadding-bottom を0.25emくらいにすればいいはず。 -- CSS -- ul {list-style-type: none;padding-left: 0em;} dd, li {padding: 0.25em 0;} -- html -- <dl> <dt>今日の出来事：</dt> <dd>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</dd> <dd>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</dd> <dd>夜、上京した母を、上野駅まで、迎えに行った。</dd> </dl> <dl> <dt>今日の出来事：</dt> <dd><ul> <li>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</li> <li>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</li> <li>夜、上京した母を、上野駅まで、迎えに行った。</li> </ul></dd> </dl>
お礼
回答ありがとうございました。よくわかりました。
- durarara
- ベストアンサー率47% (21/44)
No.1さんのやり方はきれいでいいですね。 私は別の方法で考えてみました。2通り。 スタイルシートは別の部分を指定してもできると思いますがとりあえず。 他にもやり方は色々あると思いますが、今後項目を増やしたりするときに 目的にあったやりやすい方法を選ぶといいと思います。 （※長い文を作るため一部文章を変えました。） <html> <head> <style type="text/css"><!-- .col1 {width:30px;} .row1 {height:40px;} --> </style> </head> <body> 今日の出来事： <dl> <ul>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</ul> <ul> </ul> <ul>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</ul> <ul> </ul> <ul>夜、上京した母を、上野駅まで、迎いに行った。</ul> <ul> </ul> </dl> 今日の出来事： <table> <tr class="row1"><td class="col1"> </td><td>朝、新宿駅階段で、ころんですり傷を作る、会社に遅刻する。</td></tr> <tr class="row1"><td class="col1"> </td><td>昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。昼、同僚と近所にできた和食レストランへ行くが、財布を忘れる。</td></tr> <tr class="row1"><td class="col1"> </td><td>夜、上京した母を、上野駅まで、迎いに行った。</td></tr> <table> </body> </html>
お礼
回答ありがとうございました。よくわかりました。
お礼
回答ありがとうございました。よくわかりました。