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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

3045閲覧

CSSでliを2カラムにしたい

ryota0315

総合スコア25

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/23 15:02

###前提・実現したいこと
flexを使って2カラムにしたい
デザインはレスポンシブデザインで組んでいます。

###該当のソースコード

html

1<section class="conA"> 2 <div class="container"> 3 <ul> 4 <li> 5 <p>Menu</p> 6 <a href=""><img src="img/menu-bnr.jpg" alt="menu" width="310" height="145"></a> 7 </li> 8 <li> 9 <p>Salon info</p> 10 <a href=""><img src="img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a> 11 </li> 12 <li> 13 <p>Access</p> 14 <a href=""><img src="img/access-bnr.jpg" alt="access" width="310" height="145"></a> 15 </li> 16 </ul> 17 </div> 18</section>

CSS

1@media only screen and (max-width:480px){ 2.conA .container { 3 width: auto; 4} 5.conA ul { 6 display: flex; 7 flex-wrap: wrap; 8} 9.conA ul li { 10 flex: 1 1 240px; 11 margin: 0 auto; 12} 13.conA li img { 14 max-width: 45%; 15 height: auto; 16} 17.mainPhoto img { 18 width: 100%; 19 height: auto; 20} 21

よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

的外れかもしれませんが、このような動作でしょうか?

HTML

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 @media only screen and (max-width: 480px) { 13 ul { 14 list-style: none; 15 } 16 17 .conA .container { 18 display: flex; 19 align-items: center; 20 width: auto; 21 } 22 23 .container ul { 24 flex: 1; 25 } 26 27 .conA ul { 28 display: flex; 29 flex-wrap: wrap; 30 } 31 32 .conA ul li { 33 flex: 1 1 240px; 34 margin: 0 auto; 35 } 36 37 .conA li img { 38 max-width: 45%; 39 height: auto; 40 } 41 42 .mainPhoto img { 43 width: 100%; 44 height: auto; 45 } 46 } 47 </style> 48</head> 49<body> 50<section class="conA"> 51 <div class="container"> 52 <ul class="nav"> 53 <li> 54 <p>Menu1</p> 55 <a href=""><img src="https://placehold.jp/310x145.png" alt="menu" width="310" height="145"></a> 56 </li> 57 <li> 58 <p>Salon info1</p> 59 <a href=""><img src="https://placehold.jp/310x145.png" alt="salininfo" width="310" height="145"></a> 60 </li> 61 <li> 62 <p>Access1</p> 63 <a href=""><img src="https://placehold.jp/310x145.png" alt="access" width="310" height="145"></a> 64 </li> 65 </ul> 66 <ul class="main"> 67 <li> 68 <p>Menu2</p> 69 <a href=""><img src="https://placehold.jp/310x145.png" alt="menu" width="310" height="145"></a> 70 </li> 71 <li> 72 <p>Salon info2</p> 73 <a href=""><img src="https://placehold.jp/310x145.png" alt="salininfo" width="310" height="145"></a> 74 </li> 75 <li> 76 <p>Access2</p> 77 <a href=""><img src="https://placehold.jp/310x145.png" alt="access" width="310" height="145"></a> 78 </li> 79 </ul> 80 </div> 81</section> 82</body> 83</html>

投稿2017/02/23 19:12

s8_chu

総合スコア14731

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

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

ryota0315

2017/02/24 00:07

解決しました!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問