【大喜利】【投稿～9/18】 おとぎ話『桃太郎』の知られざるエピソード

セルとセルの間に余白を開けたレイアウトの作成方法

解決済

  • 質問者：xjptm
  • 質問日時：
  • 回答数：6件

添付のファイルのようなデザインをCSSでレイアウトする方法を教えてください。
自分では、リスト（<ul><li></li></ul>）を使う方法とtableを使う方法を試してみましたが、うまくできませんでした。
失敗した点を説明させていただきます。
【<ul><li></li></ul>で作成した場合】
　・タイトル部分（施設案内）の縦の高さが１行分で表示されるため、右の内容のセルと高さが揃わない。
　・縦の高さを強引に指定したとしても縦での中央揃えが出来なかった。

【tableで作成した場合】
　・セルとセルの間にborder-spacingを指定するが効かなかった。
　・セルの間隔は、タイトルと内容の間に１本と列ごとに１本いれたいが方法がわからない。

出来れば、リスト（<ul><li></li></ul>）で作成する方法を教えて欲しいです。
他にシンプルにできるオススメの方法がありましたらご教授お願いいたします。

「セルとセルの間に余白を開けたレイアウトの」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： DrFell
  • 回答日時：

ご希望のリスト（<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/c …
にtable{border-collapse:collapse;border-spacing:0}の記述があります。

border-collapse: separate;
を指定し直せば、効く筈です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

DrFellさん
ご回答ありがとうございます。
ご指摘の通り、cssリセットが障害となっており、border-collapse: separate;を追記したところ、希望の形となりました。
おまけにulでの作成方法まで教えていただき本当に感謝です。
ベストアンサーとして選ばせていただきます。
この度は本当にありがとうございました。

通報する
お礼日時：2014/11/23 19:16

No.5

  • 回答者： think49
  • 回答日時：

#4 です。


#4 では別の方への回答用のリンクでしたので下記に訂正します。失礼しました…。
http://jsfiddle.net/98mtx4kd/3/
http://jsfiddle.net/98mtx4kd/3/show/

# Re: xjptmさん
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： think49
  • 回答日時：

構造的にもブラウザ対応状況的にも table で実装するのが最良だと思います。


http://jsfiddle.net/2VfDu/12/

display: flex もありますが、IEのサポート状況を考えると現実的ではないですね。
http://caniuse.com/#feat=flexbox

# どうでもいいですが、サンプル画像とサンプルHTMLの色合いが違うことが気になりました。

# Re: xjptmさん
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

たとえば、下記のように


★タブは＿に置換してあるので戻す。
★文字コードは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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

デザインはあくまで文書構造に則したものになります。

重要!!
この場合、項目の内容がひとつの要素内にあること。項目内に複数の項目があること。それがあって初めて、それを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を作成するのもメンテナンスも容易です。そして、対象に合わせてデザインできる。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

＞セルの間隔は、タイトルと内容の間に１本と列ごとに１本いれたいが方法がわからない


　この意味が分からない。

　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/c …
<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>

補足日時：2014/11/20 23:04
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報