セルとセルの間に余白を開けたレイアウトの作成方法
- HTMLとCSSを使用してセルとセルの間に余白を開けたレイアウトを作成する方法について教えてください。
- リスト（ul/li）やテーブル（table）を使用してレイアウトを試みましたがうまくいかなかった結果についても説明します。
- その他、シンプルなレイアウト方法やオススメの方法があれば教えていただきたいです。
- ベストアンサー
セルとセルの間に余白を開けたレイアウトの作成方法
添付のファイルのようなデザインをCSSでレイアウトする方法を教えてください。 自分では、リスト（<ul><li></li></ul>）を使う方法とtableを使う方法を試してみましたが、うまくできませんでした。 失敗した点を説明させていただきます。 【<ul><li></li></ul>で作成した場合】 ・タイトル部分（施設案内）の縦の高さが１行分で表示されるため、右の内容のセルと高さが揃わない。 ・縦の高さを強引に指定したとしても縦での中央揃えが出来なかった。 【tableで作成した場合】 ・セルとセルの間にborder-spacingを指定するが効かなかった。 ・セルの間隔は、タイトルと内容の間に１本と列ごとに１本いれたいが方法がわからない。 出来れば、リスト（<ul><li></li></ul>）で作成する方法を教えて欲しいです。 他にシンプルにできるオススメの方法がありましたらご教授お願いいたします。
- xjptm
- お礼率69% (25/36)
- CSS
- 回答数6
- ありがとう数14
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ご希望のリスト（<ul><li></li></ul>）で作成する方法です。ちょっと無理やりですが、 cssのulやliに関わる記述を削除し、次のcssを乗っけてみてください。 ul li{ margin-bottom:10px;{/*liと次のliとの間のスペースです。*/ } ul li p{/*liの中のpをテーブルのセルとして表示させる事により、お隣のセルと高さを揃えています。また、縦方向の中央揃えも可能となります。*/ display:table-cell; border:1px solid #cccccc; } .title1{ width:180px; background:#444AFF; color:#fff; padding:5px 0 5px 14px; vertical-align:middle; border:none; border-right:10px solid #ffffff;{/*白い罫線をタイトルの右にいれることで、空白に見せかけています。*/ } .content1{ width:500px; padding:5px 0 5px 14px; } ーーーーーーーーーーーーーーーーーーーーここまで tableでborder-spacingが効かなかったのは、border-collapseでcollapseを指定しているからだと思います。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> にtable{border-collapse:collapse;border-spacing:0}の記述があります。 border-collapse: separate; を指定し直せば、効く筈です。
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
#4 です。 #4 では別の方への回答用のリンクでしたので下記に訂正します。失礼しました…。 http://jsfiddle.net/98mtx4kd/3/ http://jsfiddle.net/98mtx4kd/3/show/ # Re: xjptmさん
- think49
- ベストアンサー率59% (285/482)
構造的にもブラウザ対応状況的にも table で実装するのが最良だと思います。 http://jsfiddle.net/2VfDu/12/ display: flex もありますが、IEのサポート状況を考えると現実的ではないですね。 http://caniuse.com/#feat=flexbox # どうでもいいですが、サンプル画像とサンプルHTMLの色合いが違うことが気になりました。 # Re: xjptmさん
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たとえば、下記のように ★タブは＿に置換してあるので戻す。 ★文字コードはUTF-8 ★liはdisplay:table-cellにしても、巾はそうはならない。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- figure[title="一覧"]{display:table;} figure[title="一覧"] ul{display:table-row-group;} figure[title="一覧"] ul li{list-style:none;display:table-row;} figure[title="一覧"] ul li dl{display:block;margin:0;padding:0;} figure[title="一覧"] ul li dt, figure[title="一覧"] ul li dd{display:table-cell;} table[title="一覧"], figure[title="一覧"]{ border-collapse:separate; border:none; width:50%; margin:0 auto; line-height:1.6em; border-spacing:6px 4px; } table[title="一覧"] th,table[title="一覧"] td, figure[title="一覧"] ul li dt,figure[title="一覧"] ul li dd{ border:solid gray 1px; padding:6px; } table[title="一覧"] th, figure[title="一覧"] ul li dt{ width:6em; background-color:rgb(0,120,200); color:white; text-align:left; font-weight:normal; vertical-align:middle; } table[title="一覧"] p, figure[title="一覧"] ul li dl dd p{ margin:0;text-indent:1em; } --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<table title="一覧" border="1"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th>タイトル01</th> ＿＿＿＿＿<td>あいうえおあいうえおあいうえお</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th>タイトル02</th> ＿＿＿＿＿<td>あいうえおあいうえおあいうえお</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th>タイトル03</th> ＿＿＿＿＿<td>あいうえおあいうえおあいうえお</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th>タイトル04</th> ＿＿＿＿＿<td> ＿＿＿＿＿＿<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p> ＿＿＿＿＿＿<p>あいうえおあいうえおあいうえお</p> ＿＿＿＿＿＿<p>あいうえおあいうえおあいうえお</p> ＿＿＿＿＿</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<figure title="一覧"> ＿＿＿<ul> ＿＿＿＿<li> ＿＿＿＿＿<dl> ＿＿＿＿＿＿<dt>タイトル01</dt> ＿＿＿＿＿＿<dd>あいうえおあいうえおあいうえお</dd> ＿＿＿＿＿</dl> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<dl> ＿＿＿＿＿＿<dt>タイトル02</dt> ＿＿＿＿＿＿<dd>あいうえおあいうえおあいうえお</dd> ＿＿＿＿＿</dl> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<dl> ＿＿＿＿＿＿<dt>タイトル03</dt> ＿＿＿＿＿＿<dd>あいうえおあいうえおあいうえお</dd> ＿＿＿＿＿</dl> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<dl> ＿＿＿＿＿＿<dt>タイトル04</dt> ＿＿＿＿＿＿<dd> ＿＿＿＿＿＿＿<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも</p> ＿＿＿＿＿＿＿<p>あいうえおあいうえおあいうえお</p> ＿＿＿＿＿＿＿<p>あいうえおあいうえおあいうえお</p> ＿＿＿＿＿＿</dd> ＿＿＿＿＿</dl> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</figure> ＿</section> ＿<footer> ＿＿<h2>A nice footer</h2> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインはあくまで文書構造に則したものになります。重要!! この場合、項目の内容がひとつの要素内にあること。項目内に複数の項目があること。それがあって初めて、それをtable風に表示できるのです。以前はHTMLは最初にデザインがあって、デザインの基づいてHTMLを書くことがしばしば行なわれてきました。それだと様々な不都合があるので・・。 これは、二次元データですからtableで良いです。 <table summary="> <tbody> <tr> <th>タイトル01</th> <td>あいうえおあいうえおあいうえお</td> </tr> <tr> <th>タイトル02</th> <td>あいうえおあいうえおあいうえお</td> ・・・・ ★thはable header cell、tdfはtable data cellと言う意味ですから、classなんてつける必要はない リストでマークアップされているなら、定義とその説明のセット(定義リスト)が、複数項目あるのですから <ul> <li> <dl> <dt>タイトル01</dt> <dd>あいうえおあいうえおあいうえお</dd> </dl> </li> <li> <dl> <dt>タイトル02</dt> <dd>あいうえおあいうえおあいうえお</dd> </dl> の様にマークアップされている。これが、文書構造だけをきちんとマークアップしなさいという事です。デザインはこの時点では一切考えていない。 このようにマークアップされているから、スタイルシートでその文書構造を利用してデザインできるのですよ。 この基本を守るとHTMLを作成するのもメンテナンスも容易です。そして、対象に合わせてデザインできる。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞セルの間隔は、タイトルと内容の間に１本と列ごとに１本いれたいが方法がわからない この意味が分からない。 tableだろうがulだろうが、HTMLはきちんとマークアップすること この場合はtableのほうがよいでしょう。
補足
ご指摘ありがとうございます。 ご指導いただけると助かります。 HTMLの記述は以下としました。 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <style type="text/css"> <!-- table{ border-spacing:5px; margin-bottom:40px; } .title{ width:180px; background:#444AFF; color:#fff; padding:5px 0 5px 14px; } .content{ width:500px; border:1px solid #ccc; padding:5px 0 5px 14px; } ul li{ overflow:hidden; } .title1{ width:180px; background:#444AFF; color:#fff; padding:5px 0 5px 14px; float:left; margin:0 5px 5px 0; } .content1{ width:500px; border:1px solid #ccc; padding:5px 0 5px 14px; float:left; margin:0 5px 5px 0; } --> </style> <title>サンプル</title> </head> <body> <table> <tr> <th class="title">タイトル01</th> <td class="content">あいうえおあいうえおあいうえお</td> </tr> <tr> <th class="title">タイトル02</th> <td class="content">あいうえおあいうえおあいうえお</td> </tr> <tr> <th class="title">タイトル03</th> <td class="content"> <p>あいうえおあいうえおあいうえお</p> <p>かきくけこかきくけこかきくけこ</p> <p>さしすせそさしすせそさしすせそ</p> </td> </tr> </table> <ul> <li> <p class="title1">タイトル01</p> <p class="content1">あいうえおあいうえおあいうえお</p> </li> <li> <p class="title1">タイトル02</p> <p class="content1">あいうえおあいうえおあいうえお</p> </li> <li> <p class="title1">タイトル03</p> <p class="content1">あいうえおあいうえおあいうえお<br>かきくけこかきくけこかきくけこ<br>さしすせそさしすせそさしすせ </p> </li> </ul> </body> </html>
関連するQ&A
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>
- ベストアンサー
- HTML
- ul、dlタグでリストを作成すると行間に余白が
とても基本的な質問なのですが、どなたか教えて頂けると助かります。 ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。 この余白を消したいのですが、どうすれば宜しいでしょうか？ ■htmlの記述 <ul> <li>画像１</li> <li>画像２</li> <li>画像３</li> </ul> <dl> <dt>画像1-1</dt> <dd>画像1-2</dd> <dt>画像2-1</dt> <dd>画像2-2</dd> <dt>画像3-1</dt> <dd>画像3-2</dd> </dl> ■CSSの記述 #ul{ margin:0; padding:0; line-height:0; list-style:none; } #ul li{ margin:0; padding:0; line-height:0; } #dl{ margin:0; padding:0; line-height:0; list-style:none; } アドバイスをどうぞ宜しくお願いします。
- 締切済み
- Mac
- listアイコン画像だけが中央揃えにならない
listタグでリスト化したリンクを、中央揃えするように指定したdivで囲んでいるのですが リストアイコンの画像だけが中央揃えになってくれません。（添付画像参照） HTMLとCSSは以下の通りです。 <div class="box"> <ul class="list01"> <li>テキスト</li> <li>テキスト</li> </ul> </div> .box { text-align:center; } ul.list01 { list-style-image: url(～); } リストアイコンの画像もテキストと一緒に中央揃えにしたいのですが、 何かやり方があるのでしょうか？ どなたかよろしくお願いします。
- ベストアンサー
- ブログ
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- リストの左余白の削除方法
<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。 どなたかご教授頂けませんでしょうか？ =>CSS記述<= ul li { list-style: none; margin: 0px; padding: 0px;} =>HTML記述<= <ul> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> </ul>
- ベストアンサー
- CSS
- セル内のテキストを中央揃えにする方法は？
今、ＨＰビルダー７でＨＰを作っています。 が、困ったことに、１ページ内で上下にテーブル？セル？を２つ作ったんだけど、 下のセルの中のテキストがどうやっても左揃えになってしまいます。 中央揃えに指定して中央になることはなるんだけど、 プレビューで見てみると必ず左揃えになっています。 タグの指定とかいろいろな方法があるみたいで、試してみたんだけど無理でした。 どなたか良い方法を知っていたら教えてください。 けっこう急いでます！
- ベストアンサー
- HTML
- 初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません メニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。 縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。 ・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- HTML
- リストの高さを揃えたい
リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。（図があります） どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです （HTML） <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> （CSS） .sample{ text-align: left; valign: top; padding: 0px; border: none; }
- ベストアンサー
- CSS
お礼
DrFellさん ご回答ありがとうございます。 ご指摘の通り、cssリセットが障害となっており、border-collapse: separate;を追記したところ、希望の形となりました。 おまけにulでの作成方法まで教えていただき本当に感謝です。 ベストアンサーとして選ばせていただきます。 この度は本当にありがとうございました。