プロが教えるわが家の防犯対策術！

CSS「table-cell」で横並びにしたときの最両端のスキマを埋めたい

解決済

  • 質問者：Mami.an
  • 質問日時：
  • 回答数：3件

CSS 「table-cell」に詳しい方にお聞きしたいですっ(*^_^*)


「table-cell」で横並びにして、各要素の間隔を開けた際に
一番左と一番右のスキマを埋めたいのですが、
何か有効なテクニックはありますでしょうか？

※添付画像をご参照くださいませ


【HTML】

<div class="content02__listwrap">
<div class="content02__list">
リスト01
</div>
<div class="content02__list">
リスト02
</div>
<div class="content02__list">
リスト03
</div>
<div class="content02__list">
リスト04
</div>
<div class="content02__list">
リスト05
</div>
</div>


【CSS】

.content02__listwrap{
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 10px 0;
width: 100%;

}
.content02__list{
display: table-cell;
border: solid 1px #ddd;
}


【必須条件】
（1）ie9に対応するため、「table-cell」 にてレイアウト
（2）各要素にborderを設定して、間隔を5〜10px開ける


よろしくお願いしますm(_ _ )m

「CSS「table-cell」で横並びに」の質問画像
通報する

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

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： fji
  • 回答日時：

table-cellで横並びにし、左右の隙間を無くすテクニックとして、


下記の方法はどうでしょうか？

【HTML】
<ul class="horz_list">
<li><div>リスト01</div>
<li><div>リスト02</div>
<li><div>リスト03</div>
<li><div>リスト04</div>
<li><div>リスト05</div>
</ul>

【CSS】
.horz_list {
display:table;
table-layout: fixed;
border-collapse:collapse;
width:100%;
margin:0px;
}

.horz_list > li {
display:table-cell;
}
.horz_list > li > div {
border:1px solid gray;
margin-left:10px;
}
.horz_list > li:first-child > div {
margin-left:0px;
}

※1 table-cellに対しての余白は、CSSによる制御が制限されるため、入れ子で行うことによりそれぞれの領域のCSSレイアウトが扱いやすくなります。
※2 念のため、liの終了タグは省略可能であり、ファイルサイズが小さくなり、表示高速化のテクニックの一つです。
※3 もしfirst-child が効かない場合は、<li class="first">等にすることで、.firstに対するスタイルを記載するのと同様の効果を得られるかと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

fji さん

回答ありがとうございます！！！！

実は。。。。かれこれ５時間くらい格闘している中で、
ご提案いただいた「入れ子で行う方法」を
試してみたのですっヾ(●´□｀●)ﾉ

（考えついた時はワタシって天才！！！って思ったーwww）

ただ、入れ子にした要素のheightを100％にしたりして、
chrome/safari では上手くいったものの、
firefox, IEで思ったような結果になりませんでしたっ(ノД`)・゜・。

入れ子にした要素にボーダーを設定したので、
height：100％が全く効かないIEで撃沈。。。

CSSって簡単って言う人もいるけど、
奥が深くて難しいですねっ(ToT)

せっかく良いアドバイスをいただいたのに、
事前の説明が足りなかったですね。。。スミマセンm(_ _)m

また、何かありましたらアドバイスをお願いいたします！！！！

通報する
お礼日時：2016/10/23 23:59

No.2ベストアンサー

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

HTMLを修正


★ divはご存知のように、HTML4以前で不足している構造を示す要素がないために
「id属性及び class属性と併用することで、文書に構造を付加するため」であって、直接デザインのためではない。
　HTML5では、他に適切な要素がない場合の最後の手段としてしか使えません。
　NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( https://www.w3.org/TR/html5/grouping-content.htm … )
　　注意：著者は他に適切な要素がない時の最後の最後の手段としてdiv要素を使用することが強く推奨される。

よって、「リスト」と書かれているように、これはリストでマークアップすべきです。

<ul>
　<li>働くママの家事ラク術とは？
　　<ul>
　　　<li>スマホ操作で外から家事！</li>
　　　<li>夜の時短が自分時間のカギ</li>
　　　<li>家事の時短がポイント！</li>
　　</ul>
　</li>
　<li>葬儀業界の巧妙な仕掛けと罠
　　<ul>
　　　<li>高額すぎる葬儀料金なぜ？</li>
　　　<li>葬儀業界「言い値」の問題</li>
　　　<li>お葬式に必要な費用とは？</li>
　　</ul>
　</li>
　<li>教えて!gooのAI</li>
</ul>

＞（1）ie9に対応するため、「table-cell」 にてレイアウト
　table-cell を使用するのは、vertical-align:が必要なときとか・
　　また、IE9に対応するために、HTMLが標準モードで動作するようにdoctypeの指定をしなければなりません。
　　なお、サンプルはＩＥ８(WindowsXP)でもちゃんと表示される

サンプル
★ Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　右上(DATA)で検証済みのHTML4.01 strict IEは標準モードで動作する。
★タブは＿に置換してあるので戻す。
★class名のheader,footer,section,navなどは、HTML5だと、それぞれ、<header><section>になる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
/* ５コマ */
div.header,div.footer{border:solid 1px gray;}
div.section ul,div.section ul li{list-style:none;margin:0;padding:0;}
div.section ul{margin:0 -15px;display:table;border-collapse:separate;border-spacing:10px;}
div.section ul li{display:table-cell;border:1px red solid;margin:0 10px;padding:5px;}
div.section ul li{font-weight:bold;}

/* 内部リストの設定 */
div.section ul li ul{display:block;padding:0;margin:0 1em 0 2em;}
div.section ul li ul li{margin:0;display:list-item;list-style-type:disc;list-style-position:outset ;border:none;padding:0;}
div.section ul li ul li{font-weight:normal;}

/* 色を付けておく */
html,body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<ul>
＿＿＿<li>働くママの家事ラク術とは？
＿＿＿＿<ul>
＿＿＿＿＿<li>スマホ操作で外から家事！</li>
＿＿＿＿＿<li>夜の時短が自分時間のカギ</li>
＿＿＿＿＿<li>家事の時短がポイント！</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>葬儀業界の巧妙な仕掛けと罠
＿＿＿＿<ul>
＿＿＿＿＿<li>高額すぎる葬儀料金なぜ？</li>
＿＿＿＿＿<li>葬儀業界「言い値」の問題</li>
＿＿＿＿＿<li>お葬式に必要な費用とは？</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>教えて!gooのAI
＿＿＿＿<ul>
＿＿＿＿＿<li>教えて!gooのAI</li>
＿＿＿＿＿<li>恋愛の悩みにお答えします</li>
＿＿＿＿＿<li>相談してみる→</li>
＿＿＿＿＿<li>オシエルの回答はこちら→</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>訪日外国人のQA開設!
＿＿＿＿<ul>
＿＿＿＿＿<li>訪日外国人のQA開設!</li>
＿＿＿＿＿<li>日本の魅力を伝えよう</li>
＿＿＿＿＿<li>外国人の質問に答えて</li>
＿＿＿＿＿<li>gooﾎﾟｲﾝﾄ500ptが当たる!</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>ポケモンGO最新情報！
＿＿＿＿<ul>
＿＿＿＿＿<li>ポケモンGO最新情報！</li>
＿＿＿＿＿<li>ゲットしたポケモンは？</li>
＿＿＿＿＿<li>ポケモンGOに関するQ&A</li>
＿＿＿＿＿<li>関連記事まとめはこちら</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951　さん

めちゃくちゃ詳しい回答ありがとうございます！！！

結論から言いますと、
ORUKA1951　さんのアドバイスの中の
margin:0 -10px; が強力なヒントになり、
ワタシが抱えていました問題が解決しましたっ!!!!

ありがとうございますm(_ _)m


ただ、本音を言いますと、
ORUKA1951　さんのサンプルのソースが
まだ完全に理解できていませんっ

table-layout: fixed;　を使用していないのにも関わらず
なぜか子要素の幅が均等になっていたり、

全く同じスタイルにも関わらず、
div.section ul では適用されるのに
新規で作ったclassは適用されなかったり、、、

CSSの物凄い深い知識から繰り出している
高等テクニックような印象です。。。

３時間ほどかけて読み解いていたのですが、
未だ解明できてません！(/ω＼*)ｳｩ…

ただ、れっきとしたサンプルをいただいたので、
少しづつ読み解いていきたいと思います！


完璧に理解はできていませんが、
問題が解決しましたので、
ベストアンサーに選ばせていただきましたっo(´▽｀*)/

ありがとうございました！！！m(_ _)m

通報する
お礼日時：2016/10/24 00:10

No.1

  • 回答者： rukuku
  • 回答日時：

こんばんは



CSS３の「疑似クラス」で
first-child
や
last-child
の設定が出来ます。
文字通り、「最初の要素」や「最後の要素」だけにスタイルを設定できます。

以下のサイトを参考にしてみてください。
http://www.vanfu-vts.jp/blog/2014/09/first-child …
http://www.htmq.com/selector/first-child.shtml

難しいことが分からなければ、力技でHTMLに「 style=" "」で書き込んでしまう手もあります。
…後々のメンテが面倒になりますので、「ここだけにしか使わない」という場合以外にはお勧めできませんが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

rukuku さん

回答ありがとうございます！！！


早速、first-child, last-child でやってみましたが、
table-cell の仕様として、お互いの要素の間隔を空けるためには、
親要素に対して、
border-collapse: separate;
border-spacing: 10px;
を指定する仕様のようで、

子要素に直接適用できるのは、
marginは適用できないとのこと。。。。

解決には至りませんでしたが、
色々発見する機会となりました！！！

ありがとうございますっ(´∀｀*)ﾉ

通報する
お礼日時：2016/10/23 23:50

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報