- ベストアンサー
htmlの表について、こんな表を、作ります。
durararaの回答
- 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>
関連するQ&A
- CSSでのインデント
英語の文章で、各パラグラフの行頭をインデントしたいのですが、外部スタイルシートに text-indent: 1em と記述すると、１行目だけしかインデントされません。 abcd......................... .............................. ........................ efg.......................... .............................. 以上のようにしたいと思っています。宜しくお願いいたします。
- ベストアンサー
- HTML
- float と text-indent について
floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00; text-indent: 2em; font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>
- ベストアンサー
- HTML
- HP作成時のリストやインデントの設定について
DreamweaverCS4を使っています。 文中にリストやインデントを挿入したいと思っています。 ------------------------------------ タイトル文1 ・文章1 ・文章2 タイトル文2 ------------------------------------ という感じに「文章～」の部分がリストになります。 ------------------------------------ <style type="text/css"> <!-- li,ul { margin: 0 0 0 1em; padding: 0; } li,ol { margin: 0 0 0 1em; padding: 0; } ------------------------------------ リストの前の空白部分の調整方法はネットで調べ上記の感じで調整できました。 ですが、リストにすると「タイトル文1～・文章1」や「・文章2～タイトル文2」の間のように 1行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか？ 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 表の文字サイズ変更ボタンについて教えてください。
表の文字サイズ変更ボタンについて教えてください。 以前、以下の内容で質問したのですがサンプルを掲載しなかったので再度質問させてください。大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。jqueryをアレンジして、文字サイズボタン作成して動かしてみるのですが、表の中にある文字サイズが変更されません。表を使用せずにネット上に出ているjsファイルを使用してテストページを作成するとうまく文字サイズが変わってくれるのですが・・・・？ 以下がアレンジしたソースです。 <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery.textresizer.js"></script> <script type="text/javascript" src="/jquery.cookie.js"></script> ul { list-style:none; } ul li { padding:0;display:inline; } ul li a { padding:3px 4px;text-decoration:none;color:#333;background:#dcdcdc;border:1px solid #505050; } ul li a:hover { background:#fafafa; } .small-text { font-size:x-small; } .medium-text { font-size:small; } .large-text { font-size:large; } .larger-text { font-size:x-large; } <script> $(function(){ $("ul.textresizer a").textresizer({ target: "#content", sizes: [ ".8em", "1em", "1.5em", "2em" ] }); }); </script> </head> <body> <BODY> <div id="content"> <DIV id="container"> <div id="main"> <DIV id="header" align="center"> <TBODY> <TR> <TD align="right" nowrap style="font-size : 10px;"> <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">A</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">A</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">A</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">A</a></li> </ul> </TD> ・ ・ ・ </div> </div> </div> </div> 自分の希望としては、ボタンを押すごとに大きくなったり、小さくなったりしてほしいのですが・・・？ よろしくお願いいたします。
- ベストアンサー
- HTML
- どこで食事するか困っています。
秋葉原の駅近くで静かで食事のできる場所できれば和食 主人が上京して取引相手との食事することになったのですが、上野から新幹線帰宅予定なので、秋葉原駅周辺にしたいので探しています。
- ベストアンサー
- その他（料理・飲食・グルメ）
- リンクとリンクの間に空白の行が
VBSでhtmlファイルをつくるプログラムをつくっています。以下はその一部抜粋です。 For Each dataFile In aFolder.Files indexPageTS.WriteLine "<p style=""text-indent:" & n & "em""><a target=""_blank"" href='" & fso.BuildPath(aFolder.Path, dataPageName) & "'>" & linkName & "</a>" Next indexPageTS.WriteLine "</p>" とにかく、ファイル名でリンクを作ってループしているのですが、これをブラウザで表示すると、そのリンクとリンクの間に空白の行が挿入されてしまっているようなのです。いったいなぜでしょうか？ HTMLはまったくの初心者です。ようやくインデントができた程度です。よろしくお願いします。
- ベストアンサー
- HTML
- CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです
こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク１">link1</a></li> <li><a href="***" id="link2" title="リンク２">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。
- ベストアンサー
- CSS
- cssを用いる表の作り方
いつもいつもお世話になっております。 cssを用いた表の作り方で迷っています。 dl,dt,ddを使う方法、divのみを使う方法を試しましたが、納得のいく見栄えになりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>てすと</title> <meta http-equiv="content-type" content="text/html; charset=shift-jis"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> </style> </head> <body> <dl id="sample3"> <dt>施設名</dt> <dd>あああああああああああああああ</dd> <dt>所在地</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいい</dd> <dt>職員体制</dt> <dd>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう</dd> <dt>アクセス</dt> <dd> <ul> <li>・えええええええええええええええええええええええええ</li> <li>・おおおおおおおおおおおおおおおおおおおおおおおおお</li> <li>・かかかかかかかかかかかかかかかかかかかかかかかかか</li> </ul> </dd> <dt>総居室数</dt> <dd>３室</dd> <dt>居室面積</dt> <dd>２０平米</dd> <dt>電話番号</dt> <dd>12-3456-7890</dd> <dt>FAX番号</dt> <dd>12-3456-7890</dd> </dl> </body> </html> dl#sample3 { width: 600px; } dl#sample3 dt{ border-top: 1px solid #fff; float: left; width: 6em; padding: 10px; background-color: orange; } dl#sample3 dd{ border-left: 1px solid #fff; border-top: 1px solid #fff; margin-left: 115px; padding: 10px; background-color: silver; } ul { list-style-type: none; margin: 0 auto; padding: 0; } 各セルに色をつけたいのですが、説明が２行以上に渡ると項目名が対応されないのと、 "電話番号""FAX番号"のような説明が短いセルは幅を短くして、横に並べることが出来ないところで悩んでいます。 もちろん、それらのセルを別classにすれば対応可能ではありますが、テンプレートとして使用する必要があるため、汎用性の高い構成にする必要があるのです。 ご存知の方、どうぞどうぞご教示お願いいたします。
- ベストアンサー
- CSS
- ポップアップメニューの作成方法を教えてほしい
いろいろなサイトを見ながらポップアップメニューを作成しています。 ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。 ご教授いただけると大変助かります。 作成している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
- lightboxの画像表示を画像切り替えの画面に組み込みたい
ttp://designm.ag/tutorials/jquery-display-switch/ の画像一覧の切り替えと litboxの画像表示をしたくて ttp://www.lateralcode.com/create-a-simple-picture-gallery-using-php/ の出力結果のコードをそのまま書き写して実行しましたが 実行すると「ページでエラーが発生しました」 ライン11文字2 nullはNULLまたはオブジェクトではありません となってしまいます。 ソースが以下の様になっています。 どこを直していけばいいのか教えてください。 ライン１１は「$(document).ready(function(){」です。 <script type="text/javascript" src="js/jquery-latest.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function () { $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }); }); </script> <style type="text/css"> body { margin: 0; padding: 50px 0 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; background: #000 url(body_bg.jpg) no-repeat center top; color: #fff; } h1 { font: 5em normal Georgia, 'Times New Roman', Times, serif; text-align:center; margin-bottom: 20px; } h1 span { color: #000000; } h1 small{ font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 1.5em; display: block; color: #000; } .container { width: 758px; margin: 0 auto; padding-bottom: 100px; overflow: hidden; } ul.display { float: left; width: 756px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #000; border-right: 1px solid #000; background: #000000; } ul.display li { float: left; width: 754px; padding: 10px 0; margin: 0; border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; } ul.display li a { color: #000000; text-decoration: none; } ul.display li .content_block { padding: 0 10px; } ul.display li .content_block h2 { margin: 0; padding: 5px; font-weight: normal; font-size: 1.7em; } ul.display li .content_block p { margin: 0; padding: 5px 5px 5px 245px; font-size: 1.2em; } ul.thumb_view li{ width: 250px; } ul.thumb_view li h2 { display: inline; } ul.thumb_view li p{ display: none; } a.switch_thumb { width: 122px; height: 26px; line-height: 26px; padding: 0; margin: 10px 0; display: block; background: url(./images2/switch.gif) no-repeat; outline: none; text-indent: -9999px; } a:hover.switch_thumb { filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } a.swap { background-position: left bottom; } </style> </head> <body> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <div id="contents"> <a href="#" class="switch_thumb" >Switch Display</a> <p> <ul class="display" id="pictures"> <li> <div class="content_block"> <a href="./images/1.gif" rel="lightbox[16530]"><img src="./images/2.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li> <div class="content_block"> <a href="./images/3.gif" rel="lightbox[16530]"><img src="./images/4.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li></li> </ul> </p> </div>
- 締切済み
- JavaScript
お礼
回答ありがとうございました。よくわかりました。