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

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

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

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

CSS

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

Q&A

解決済

2回答

197閲覧

レスポンシブのコーディング

kawakami_kk

総合スコア15

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/08/17 07:39

編集2018/08/17 08:48

下記画像みたいに作りたいのですが、同じタグを共有して下記レイアウトにするにはどうすればいいかわかりません。
※display: none;などでけして同じ内容を作るなどは極力避けたいです。
イメージ説明

<main> <h1>hed</h1> <div class="flexbox"> <div class="summaryBox"> <figure> <img src="images/abc.jpg" alt=""> </figure> </div> <section class="list"> <h2>Contents</h2> <ul> <li>詳細</li> <li>About</li> <li>Contact</li> </ul> </section> </div> <div class="flexbox"> <section class="speclist"> <h2>Contents</h2> <ul> <li>詳細</li> <li>About</li> <li>Contact</li> </ul> </section> </div> </main>
main{ width:100%; max-width:950px; margin: auto; } h1{ margin: 2.5rem; padding: 1.8rem; font-size: 1.8rem; font-weight: bold; border-top: 0.1rem solid #CCC; border-bottom: 0.1rem solid #CCC; text-align: justify; text-justify: inter-ideograph; } .flexbox { display: -webkit-flex; display: flex; flex-wrap: nowrap; } .summaryBox { flex:1; background: #fcc; } .summaryBox img{ width:100%; } .list { flex: 2; background: #afd; } .speclist, .list { padding: 2%; } /* PC(640px以上に適用) */ /* 640px以上*/ @media screen and (min-width:640px) { .flexbox { display: -webkit-flex; display: flex; flex-wrap: wrap; } .summaryBox { flex:1; } .summaryBox img{ width:100%; } .list ul{ flex-basis: 300px; } .list{ flex:2; } .list ul{ display: flex; } .speclist{ width: 100%; background: aliceblue; } }

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

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

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

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

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

m.ts10806

2018/08/17 08:00

インデント 特にHTMLのほうがグチャグチャなので調整していただけますか?
kawakami_kk

2018/08/17 08:47

コード整形しました。これでいいですかね?
m.ts10806

2018/08/17 08:56

スペース8個タイプですかね?了解です
guest

回答2

0

.flexboxを外した状態でグリッドレイアウトにするとか

CSS

1main { 2 display: grid; 3 grid-template-areas: 4 'h1 h1' 5 'img text1' 6 'text2 text2'; 7 grid-template-rows: 1fr 1fr 1fr; 8 grid-template-columns: 1fr 1fr; 9} 10 11@media screen and (min-width:640px) { 12 main { 13 grid-template-areas: 14 'h1 h1' 15 'img text1' 16 'img text2'; 17 } 18}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

投稿2018/08/17 09:07

x_x

総合スコア13749

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

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

kawakami_kk

2018/08/17 10:40

ありがとうございます!初心者なのでグリッドレイアウトはもう少し勉強してからにします。
guest

0

ベストアンサー

x_xさんがgrid layoutしてるので,私はposition: absolute;のパターンの方を(笑

https://thimbleprojects.org/liveasnotes/532801/
イメージ説明
右上の「リミックス」ボタンからソースが見れます

figure要素の挙動が気になったので,そっちも修正してます

投稿2018/08/17 09:25

編集2018/08/17 09:43
liveasnotes

総合スコア1284

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

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

liveasnotes

2018/08/17 09:44 編集

あ,いまちょっと他に気になったところがあったので調整中です/調整終わりました
kawakami_kk

2018/08/17 10:40

ありがとうございます!こちらでやってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問