質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

2804閲覧

table-layout: fixedにするとなぜか左によってしまう

ironman

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/03/20 07:19

編集2022/01/12 10:55

疑問点

※「該当のソースコード」のCSSコードから抜粋

CSS

1.input-wrap { 2 display: table; 3 width: 100%; 4 white-space: nowrap; 5 table-layout: fixed; 6}

.input-wrapperのtable-layout: fiexedにすると、input-wrapperが左によります。
しかし、なぜそうなるのかわかりません。

table-layout:fixed;の働き自体は理解しているつもりです。
まだまだ初心者なので、初歩的な質問なのかもしれません。
ご返答お願いいたします。
ちなみにFontawesomeのアイコンがあるのですが、構いませんでしょうか?

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 8<!-- Fontawesome CSS --> 9 <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"> 10 11 <title>Document</title> 12</head> 13<body> 14 <header> 15<!-- brand --> 16 <a href=""> 17 <div class="brand"> 18 <div class="brand-inner"> 19 <i class="fab fa-500px" aria-hidden="true" focusable="false" style="display:block; fill:currentcolor; height:34px; width:34px;"></i> 20 </div> 21 </div> 22 </a> 23 24<!-- search-form --> 25 <label for="" class="input-wrap"> 26 <div class="i-box"> 27 <i class="fas fa-search" style="display:block; fill:currentcolor; height:18px; width:18px"></i> 28 </div> 29 30 <div class="input-box-a"> 31 <div class="input-box-z"> 32 <input type="text", aria-autocomplete="list", aria-describedly="", aria-expanded="false", autocomplete="off", autocorrect="off", spellcheck="false", name="query", placeholder="探す", role="", value> 33 </div> 34 </div> 35 </label> 36 </header> 37 38 <!-- Optional JavaScript --> 39 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 40 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 41 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 42 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 43</body> 44</html>

CSS

1/* reset.css */ 2html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, i, svg{ 3 margin: 0; 4 padding: 0; 5 border: 0; 6 font-weight: normal; 7 font-size: 100%; 8 vertical-align:baseline; 9 -webkit-box-sizing: border-box; 10 -moz-box-sizing: border-box; 11 box-sizing: border-box; 12} 13article, header, footer, aside, figure, figcaption, nav, section { 14 display:block; 15} 16body { 17 line-height: 1; 18 -ms-text-size-adjust: 100%; 19 -webkit-text-size-adjust: 100%; 20/* background-color: #000; */ 21} 22ol, ul { 23 list-style: none; 24 list-style-type: none; 25} 26 27/* brand */ 28a { 29 display: table-cell; 30 text-decoration: none; 31 color: inherit; 32 border: 2px solid blue; 33} 34 35header { 36 display: table; 37 width: 100%; 38 border-spacing: 0px; 39} 40 41.brand { 42 display: table-cell; 43 vertical-align: middle; 44 padding: 0 24px; 45 position: relative; 46 height: 80px; 47} 48 49.brand-inner { 50 display: inline-block; 51 color: #F5194B; 52 font-size: 34px; 53} 54 55/* input-wrapper */ 56.input-wrap { 57 display: table; 58 width: 100%; 59 white-space: nowrap; 60 table-layout: fixed; 61} 62.i-box { 63 background-color: #89888A; 64 display: table-cell; 65 vertical-align: middle; 66 width: 39px; 67 padding-left: 5px; 68 padding-right: 10px; 69 padding-top: 3px; 70} 71i:not(:root) { 72 overflow: hidden; 73} 74.input-box-a { 75 display: table-cell; 76 vertical-align: middle; 77 position: relative; 78} 79.input-box-z { 80 display: block; 81 position: relative; 82 overflow: hidden; 83} 84

試したこと

上のコードだと
イメージ説明
のように表示されるのですが、

※「該当のソースコード」のCSSコードから抜粋

CSS

1.input-wrap { 2 display: table; 3 width: 100%; 4 white-space: nowrap; 5 table-layout: fixed; 6}

.input-wrapperのtable-layout: fiexedにすると、

イメージ説明

となります。ちなみにwidth: 100%;を無くしてもこうなります。
青のボーダーはHTMLコード内のbrandのaタグになります。

table-cellのおかげで自動的になる仕様なのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

原因・・・不明。table関連で「カオス」になっているので「コレ」と言えません。

実態・・・リンク青枠内のすべてが、伸びたり縮んだりに見えるかもですが、枠だけが動いており、中身は変わっていません。
(背景色を付けると分かるかと思います。)

大まかに言えば、<header>のtableと「width:100%;」により、引き伸ばされており、「.input-wrap」の「table-layout: fixed;」で本来の大きさになっていると思われます。


今後のレイアウト調整を考えると、今のを調整するよりも、HTML・CSSの組み直しが、良い気がします。

投稿2019/03/24 05:58

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ironman

2019/03/24 13:00

ありがとうございます。まだまだ初心者で、https://www.airbnb.jp/giftのサイトを自分になりに模写していく中で、この疑問にぶつかりました。そうですね実態は、中身は変わらずaタグのみが変わっているという感じです。table-layout: fixedを消すと、aタグが引き延ばされるので、table-layout: fixed関連ではないかと思っているのですが、未だに謎です。組み直しとは一から総とっかえした方がいいということでしょうか。
yoshinavi

2019/03/24 13:10

そうですね。header部分が、いきなりtable等良い構造とは言えません。 あくまでも、「表(ひょう)」がtableの定義としてありますので、レイアウトに用いるべきでは無いと思います。 tableの中のtableも、本来は問題無いのですが、この場合はレイアウトで用いるのは避けた方が良いです。
yoshinavi

2019/03/25 02:14

「table」と言っても、HTMLとCSSの違いもありますが、メリットとしては「レスポンシブ」「リキッド」と言われる、画面サイズに対応させるのに使用しているかと思います。 しかし今は、「Flexbox」や「Grid」、単位も「vw」等、以前は無いものがフレキシブルに対応できるものがあるので、「table」の定義からみると、本来の用途ではない使い方は、しない方が良いと思います。 それぞれのプロパティには、一長一短があるので、「コレはOK」「アレはダメ」ってのは、実際の所は、ほぼありません。 レイアウトの組み方は、人それぞれであり、求めるスタイルに結果的になれば良いからです。 コーディングが「十人十色」と言われる部分でもあります。 なので、私が「いきなりtableは良くない」と言っても、「いやいや、HTMLでは無くCSSのtableだから何ら問題ない、もっと活用すべき」の意見もあると思います。 もう一度、HTMLからひとつひとつ挙動を整理・確認しながら行えば、tableでも意図したデザインになります。現に、参考サイトは成立していますので、まずは見直しから頑張ってみてください。
ironman

2019/03/26 04:09

なるほど、結構自由度があるということですね。ありがとうございます。Flexboxなどは使いたかったのでそちらも試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問