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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

display:table で横並びになった画像サイズを自動で揃える記述は可能?

Mimizk_50
Mimizk_50

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

1クリップ

749閲覧

投稿2020/10/11 13:35

前提・実現したいこと

ブログを書いています。
その際、下記のような** 写真の段組み** をよく作ります。
従来は table 機能でやっていましたが、今後は CSS に記述した設定を呼び出すかたちで実現したいと考えています。

イメージ説明

写真 A・B・C で段組みを構成します。
その際、画像にその場限りの width や padding の指定をしない ことが条件です。
画像に個別の条件付けをせずとも、自動的にこのレイアウトが成立する CSS を考えることが、この取り組みの重要な条件です。

この際私が難しさを感じている主因は、A・B・C の縦横比が異なる場合がしばしば起こる点にあります。
不揃いな画像でも自動的にこのレイアウトに収束する、CSS と HTML を書き出したい。

発生している問題・エラーメッセージ

実際にたどり着いた状況がこちらです。

イメージ説明

該当のソースコード

HTML

<div class="cover"> <div class="box"> <div class="cell_A"> <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9c83f35b2adeab985d814364018b5242.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9c83f35b2adeab985d814364018b5242.png" alt="画像A"> </div> <div class="cell_B"> <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/104e6657f44ad40831196f0c4eccda11.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/104e6657f44ad40831196f0c4eccda11.png" alt="画像B"> </div> </div> <div class="box"> <div class="cell_C"> <a href="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7521431933a264b39afd5ad35199d1de.png"><img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/7521431933a264b39afd5ad35199d1de.png" alt="画像C"> </div> </div> </div>

css

div.cover { width: 100%; margin-top: 5em; } div.cover div.box { display: table; max-width: 540px; } div.cover div.box div.cell_A { display: table-cell; padding-right: 10px; align: left; } div.cover div.box div.cell_B { display: table-cell; padding-left: 10px; align: right; } div.cover div.box div.cell_C { display: table-cell; max-width: 540px; padding-top: 20px; }

試したこと

display:table の標準仕様では、隣り合う table-cell は等幅になるそうですね。
まずはこれが不等幅になる記述を調べました。
それについては単純な横幅の指定でひとまず回避できるようになりましたが、縦幅も同時に調整できる記述については、全く道筋を立てられずにいます。

挿入される画像それ自体には、width 指定をしていません。
2000px くらいある無垢の画像が 540px の段組みに収まっている体裁は、あくまで、画像を収める div.cell の大きさ(小ささ)によって押しつぶされるようにして成り立っている、と理解しています。

補足情報

「CSS の記述で画像の大きさをコントロールする」動機があります。
私がブログを書くようになって15年以上経つのですが、これまでは HTML 編集の table 機能で “写真の段組み” を作ってきました。
そのように個別の width や padding を設定して構わないなら、希望するレイアウト自体はすぐに完成します。

しかしながら、先述の通り長い期間にわたって文章を書き続けていると、周囲の環境の変化が必ず起こり、文章の体裁を見直さなければならない時がきっと訪れます。
例えば、スマートフォンでの視聴は過去には全く存在しない要請ですし、パソコンにせよ、モニターサイズは常に大型化してきました。
10年前であれば2カラムのブログ本文表示欄は 700px 程度が関の山でしたが、現在は 900px くらいが標準ではないでしょうか。

貼付した画像に対して個別に width や style を設定して済ませた場合、たくさん投稿するほど、その修正は不可能に近づきます。
これまで「table 機能で書けるから」と不勉強のまま過ごしてきましたが、元栓をひねるように全ての画像サイズが管理できる ・・・そういう記述方法を確立しておく必要性を感じ、CSS について調べ始めました。
もしかするとかなり難しいことを考えているのかもしれませんが、素人にはその判断すらつきません。
機能が実現できるなら、display:table にこだわる必要はありません。
ぜひとも知恵をお貸しください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy
Lhankor_Mhy

2020/10/12 04:39

HTMLは変更してよいのですか?
Mimizk_50
Mimizk_50

2020/10/12 05:27

こんにちは。 全く新しい書き方で構いません。 display:table を使っているのも、数ある知識の中から最適と思われる方法を選んだ ・・・のではなく、今まで table タグを使って書いていたのに似ているから自然と手が伸びただけと言えます。書き方だってデタラメな部分があるはずです。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。