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

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

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

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

HTML

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

CSS

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

解決済

横並びにした要素を折り返えさせる方法

toll_tree
toll_tree

総合スコア0

HTML5

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

HTML

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

CSS

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

1回答

0評価

0クリップ

756閲覧

投稿2019/05/02 03:14

編集2022/01/12 10:58

以下のような、デザインとしたいのですが、うまくいかない為、ご質問させて頂きました。
イメージ説明
自分のコードは以下の通りです。

php

<?php session_start(); include 'shop_class.php'; if(!isset($_SESSION['id'])){ header('Location:login.php'); } $shop = new Shop('mysql:host=localhost;dbname=ec_website','root','12345'); $product_list = $shop->line_up_product(); // var_dump($product_list); // exit(); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="./css/top.css"> <title>トップページ</title> </head> <body> <header class="header_box"> <a href="top.php"> <img class="logo" src="./images/logo.png" alt="CodeShop"> </a> <p class="user_name"> ユーザー名:<?php echo $_COOKIE['name']; ?> </p> <a href="cart.php"> <img src="./images/cart.png"> </a> <a href="logout.php" class="logout"> ログアウト </a> </header> <div class="content"> <?php foreach($product_list as $list): ?> <form action="cart.php" method="post"> <div> <img src="<?=$list['img']?>" width="300px" height="300px"> <div class="wrap_content"> <p><?=$list['name']?></p> <p><?=$list['price']?></p> </div> <button>送信</button> </div> </form> <?php endforeach;?> </div> </body> </html>

css

.header_box{ background-color: blue; display:flex; } body{ font-size:20px; } .content{ display:flex; width:500px; margin: auto; } .logo{ margin-left:123px; margin-right:634px; } .user_name{ color:#fff; } .logout{ color:#fff; margin-left:155px; margin-top:14px; text-decoration:none; } .content form{ margin-bottom:35px; margin-top:-13px; } .err{ color:red; margin-bottom:-16px; } .success_msg{ color:blue; } .check_msg{ margin-top:50px; } .wrap_content{ display:flex; }

上記を実行しますと、以下の画像のようになります。
イメージ説明
下側に横のスクロールバーが表示されてしまい、画像が折り返らない状態です。
header部分も、ごちゃごちゃになってしまっています。
うまくそろえる為のご助言をどなたか、頂けましたら幸いです。
よろしくお願い致します。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2019/05/02 03:55

<img src="<\?=\$list\['img'\]\?>" width="300px" height="300px"> とあり、 \.content{ display:flex; width:500px; } とありますから、どうがんばっても1つしか入らないと思うのですが、それで問題ありませんか?
toll_tree
toll_tree

2019/05/02 03:59

ご指摘ありがとうございます。 そうですよね\.\.\. クラス「content」のwidthは、960pxとかに設定すべきでした\.\.\.

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

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

HTML

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

CSS

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