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
No.2ベストアンサー
- 回答日時:
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の指定をしなければなりません。
なお、サンプルはIE8(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@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;}
/* 5コマ */
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>
ORUKA1951 さん
めちゃくちゃ詳しい回答ありがとうございます!!!
結論から言いますと、
ORUKA1951 さんのアドバイスの中の
margin:0 -10px; が強力なヒントになり、
ワタシが抱えていました問題が解決しましたっ!!!!
ありがとうございますm(_ _)m
ただ、本音を言いますと、
ORUKA1951 さんのサンプルのソースが
まだ完全に理解できていませんっ
table-layout: fixed; を使用していないのにも関わらず
なぜか子要素の幅が均等になっていたり、
全く同じスタイルにも関わらず、
div.section ul では適用されるのに
新規で作ったclassは適用されなかったり、、、
CSSの物凄い深い知識から繰り出している
高等テクニックような印象です。。。
3時間ほどかけて読み解いていたのですが、
未だ解明できてません!(/ω\*)ウゥ…
ただ、れっきとしたサンプルをいただいたので、
少しづつ読み解いていきたいと思います!
完璧に理解はできていませんが、
問題が解決しましたので、
ベストアンサーに選ばせていただきましたっo(´▽`*)/
ありがとうございました!!!m(_ _)m
No.3
- 回答日時:
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に対するスタイルを記載するのと同様の効果を得られるかと思います。
fji さん
回答ありがとうございます!!!!
実は。。。。かれこれ5時間くらい格闘している中で、
ご提案いただいた「入れ子で行う方法」を
試してみたのですっヾ(●´□`●)ノ
(考えついた時はワタシって天才!!!って思ったーwww)
ただ、入れ子にした要素のheightを100%にしたりして、
chrome/safari では上手くいったものの、
firefox, IEで思ったような結果になりませんでしたっ(ノД`)・゜・。
入れ子にした要素にボーダーを設定したので、
height:100%が全く効かないIEで撃沈。。。
CSSって簡単って言う人もいるけど、
奥が深くて難しいですねっ(ToT)
せっかく良いアドバイスをいただいたのに、
事前の説明が足りなかったですね。。。スミマセンm(_ _)m
また、何かありましたらアドバイスをお願いいたします!!!!
No.1
- 回答日時:
こんばんは
CSS3の「疑似クラス」で
first-child
や
last-child
の設定が出来ます。
文字通り、「最初の要素」や「最後の要素」だけにスタイルを設定できます。
以下のサイトを参考にしてみてください。
http://www.vanfu-vts.jp/blog/2014/09/first-child …
http://www.htmq.com/selector/first-child.shtml
難しいことが分からなければ、力技でHTMLに「 style=" "」で書き込んでしまう手もあります。
…後々のメンテが面倒になりますので、「ここだけにしか使わない」という場合以外にはお勧めできませんが。
rukuku さん
回答ありがとうございます!!!
早速、first-child, last-child でやってみましたが、
table-cell の仕様として、お互いの要素の間隔を空けるためには、
親要素に対して、
border-collapse: separate;
border-spacing: 10px;
を指定する仕様のようで、
子要素に直接適用できるのは、
marginは適用できないとのこと。。。。
解決には至りませんでしたが、
色々発見する機会となりました!!!
ありがとうございますっ(´∀`*)ノ
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
番号付きリスト(<Ol><Li>・・...
-
ボタンを横に並べて表示させる方法
-
リンク文字同士の間隔を開ける...
-
htmlで行頭を下げる方法
-
透明のボックスにリンクを貼りたい
-
liタグの中に<p>タグやら<dl>を...
-
css ol liにdisplay:inlineを設...
-
ulとliで囲った文字の一部を変...
-
リストの数字のフォントサイズ...
-
jQuery-もっと見るボタンをスマ...
-
bxsliderの画像が左によってしまう
-
html/cssの、navを2段にする...
-
<ul><li></li></ul>にするメリ...
-
CSS「table-cell」で横並びにし...
-
Dreamweaverで、ul要素の下に写...
-
リストタグを用いた段組みメニ...
-
記事の最後の次のページ、前の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報