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

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

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

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

CSS

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

Q&A

解決済

2回答

730閲覧

htmlのレイアウトをcssのみでに変更する方法(目指すレイアウトは画像で貼っています)

terataitai

総合スコア32

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/10 13:37

html

1<div></div> 2<div></div> 3<div></div> 4<div></div> 5<div></div> 6<div></div>

css

1div{ 2 display:inline-block; 3} 4div:nth-child(n+5){ 5 height:100%; 6} 7div:nth-child(-n+4){ 8 height:50%; 9}

のときcssのみの変更で(htmlをいじらずに)、レイアウトを下記の様にすることは可能なのでしょうか?親要素にdivを作ればつくれるのは分かるのですが、webサービスのカスタムcssなどをいじるときに使えないので質問しました。
イメージ説明

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

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

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

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

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

m.ts10806

2020/07/10 13:53

>webサービスのカスタムcssなど これは具体的に何を想定しているのでしょうか
terataitai

2020/07/10 18:06

TweetDeckのchrome拡張機能のBetterTweetDeckのカスタムcssからこの質問をしようと思いました。(tweetdeckのカラムはdivタグではなくsectoinタグですが、他のサービスでも似たようなことがあるかもしれないので、divタグで質問しました。)
m.ts10806

2020/07/10 22:53

質問編集して追記してください
guest

回答2

0

ベストアンサー

ものすごく無理やり実装するなら、以下のような実装も可能と思います。

Codepenでやってみました:
https://codepen.io/new1ro/pen/gOPKvYL

CSS

1div{ 2 display: inline-block; 3 border: 5px solid #09c; 4 width: 20vw; /* 任意の幅 */ 5 height: 50vh; /* 任意の高さ */ 6 font-size: 0; 7 box-sizing: border-box; 8} 9div:nth-child(3), 10div:nth-child(4) { 11 margin-bottom: calc(-50vh - 6px); /* -任意の高さ - 余白 */ 12 height: calc((50vh * 2) + 6px); /* (任意の高さ * 2) + 余白 */ 13}

上記について、7つ目のdivを追加した途端破綻したりするはずです。
また本当に採用するなら、display: inline-block;を使ったときに生じてしまう余白をどのようにコントロールするか、という課題は解決する必要はあると思います。


6つの<div>の親要素が必要になりますが、以下のような記述だと実現可能です。

HTML

1<div class="parent"> 2 <div></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 <div></div> 7 <div></div> 8</div>

CSS

1.parent { 2 display: grid; 3 grid-template-rows: 200px 200px; /* 縦方向 */ 4 grid-template-columns: 1fr 1fr 1fr 1fr; /* 横方向 */ 5 grid-gap: 10px; /* 余白 */ 6 7} 8.parent div { 9 border: 5px solid #09c; 10} 11.parent div:nth-child(1) { 12 13} 14.parent div:nth-child(2) { 15 16} 17.parent div:nth-child(3) { 18 grid-row: 1 / 3; 19 grid-column: 3 / 4; 20} 21.parent div:nth-child(4) { 22 grid-row: 1 / 3; 23 grid-column: 4 / 5; 24} 25.parent div:nth-child(5) { 26 27} 28.parent div:nth-child(6) { 29 30}

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/grid
https://qiita.com/kura07/items/e633b35e33e43240d363

投稿2020/07/11 01:45

編集2020/07/11 02:09
new1ro

総合スコア4528

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

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

0

このdivたちの親要素に触らない前提であれば、方法はないと思います。
なぜならば、heightの%指定には以下のようなルールがあるからです。

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

10.5 Content height: the 'height' property | Visual formatting model details

(勝手訳)
パーセンテージは生成されたボックスの包含ブロックを参照します。もし、包含ブロックの高さが明示的に定義されておらず(たとえば、コンテンツの高さに依存しているなど)、かつ要素が絶対配置されていない場合、'auto'として計算されます。

つまり、親要素のheightの影響を受けておそらくauto扱いになってしまうため、親要素にスタイルをつけないという条件では、確実な方法はありません。(たまたま上手くいくことはあると思います。)

投稿2020/07/11 01:35

Lhankor_Mhy

総合スコア35865

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問