【模写】画像を横並びにしたい

前提・実現したいこと

【メインコンテンツの完成】
練習のためコーポレートサイトの模写をしています。
PC画面での「画像横並び」が上手くいきません。
画像サイズを50％に指定しましたが、それもうまくいきませんでした。
画像サイズを50%にして{display: flex;}で横並びにできると思いましたが変化はありませんでした。
他にも、下記のコードを試しました。

.case-flexbox {
 display: flex;
}


@media screen and (max-width: 960px) {
.case-flexbox {
 width: 100%;
 text-align: center;
 margin-bottom: 50px;
}
}

.case-img {
 width: 50%;
 text-align: center;
}

ご教授の程、宜しくお願い致します。

■見本と模写サイトのリンク
・見本サイト　※模写サイトを提供してるサイト主様がこちらポートフォリオに使ってOKと許可を出しております。
・模写サイト

■使用言語
・HTML
・CSS

■レンタルサーバー
・さくらインターネット（ライト）

■プログラミング経験
・経験年数：4か月
・学習方法：Progate歴3ヶ月（HTML,CSS）
・コードを見た時に何が書いてあるか理解できますが、
私自身で記述できるレベルには到達していません。
↓
2021年3月4日
独学での模写に挑戦中

※検証は30~60分と制限時間を設け、調べても分からない時はこちらで質問させて頂いております。
検証時間が短いと思われる方もいらっしゃるかと思いますが、
教えて貰うことで前に進め、挫折を避けるために時間設定を設けています。

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

■エラーページ↓↓

■見本ページ↓↓

該当のソースコード

ソースコード：

■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex , nofollow">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>corporate-site</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="reset.css" type="text/css" media="screen">
  <link rel="stylesheet" href="style.css" type="text/css" media="screen">
 </head>
 <body>
  <div class="header-container">
  <header class="wrap">
   <div class="header-test">
   <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="139px" height="60px"></a></h1>  
   <ul class="sec-navi">
    <li class="header-list"><a href="#">企業理念</a></li>
    <li class="header-list"><a href="#">施工事例</a>
    <li class="header-list"><a href="#">採用情報</a>
    <li class="header-list"><a href="#">お問い合わせ</a>
   </ul>
   <div class="header-icon">
    <img src="img/hamburger.svg" alt="ハンバーガーメニュー">
　 </div>
   <p class="mainvisual-text">街を作る。未来を作る。</p>
 </div>
 </header>
  </div>

  <section id="sec-about">
   <h2 class="about">お知らせ</h2>
   <a href="#">
    <div class="about1">2020.11.17</div>
    <div class="about2">お知らせ</div>
    <div class="about3">本社打合せ室が完成しました。</div>
   </a>
   <a href="#">
    <div class="about1">2020.11.10</div>
    <div class="about2">お知らせ</div>
    <div class="about3">【メディア掲載】住宅雑誌2020年11月号</div>
   </a>
   <a href="#">
    <div class="about1">2020.11.01</div>
    <div class="about2">お知らせ</div>
    <div class="about3">ホームページが完成しました。</div>
   </a>
  </section>
  
 <section id="sec-case">
  <h2 class="case-title">施工事例</h2>
  <div class="case-flexbox">
　<img class="case-img" src="img/building1.png" alt="事例1"> 
   <h3 class="case1">M様邸新築工事</h3>
   <p class="case2">埼玉県</p>
   <img class="case3" src="img/more.png" alt="詳細を見る">
　<img class="case-img" src="img/building2.png" alt="事例1"> 
   <h3 class="case1">スカイビル</h3>
   <p class="case2">東京都</p>
   <img class="case3" src="img/more.png" alt="詳細を見る">
   </div>
   <p class="case4"><a href"#">施工実績一覧</a></p>
 </section>
 
 <section id="sec-img">
  <a href="#"><img class="img1" src="img/company.png" alt="img1"></a>
  <a href="#"><img class="img2" src="img/recruit.png" alt="img2"></a>
  <a href="#"><img class="img3" src="img/contact.png" alt="img3"></a>
 </section>

 <footer id="footer">
  <ul class="footer-list">
   <li class="footer-list1">企業理念</li>
   <li class="footer-list1">施工事例</li>
   <li class="footer-list1">採用情報</li>
   <li class="footer-list1">お問い合わせ</li>
  </ul>
　<a href="#"><img class="footer-logo" src="img/footer_logo.png" alt="footer-logo"></a>
  <p>Copyright &copy; 2021 Aono Corporation.</p>
 </footer>
</body>
</html>

■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 vertical-align:baseline;
 background:transparent;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

header {
 background-image: url(img/main.png);
 background-repeat: no-repeat;
 background-position: center;
 height: 75vh;
 background-size: cover;
 position: relative;
 object-fit: cover;
}

@media screen and (max-width: 960px) {
.logo {
 height: 40px;
 width: 92.66px;
}
}

@media screen and (max-width: 960px) {
.wrap {
 height: 50vh;
}
}

.header-test {
 max-width: 1100px;
 margin: 0 auto;
}

.sec-navi {
 margin-right: 0px;
}

a {
 color: gray;
}

a:hover {
 opacity: 0.5;
}


.header-list {
 display: inline-block;
 list-style: none;
 vertical-align: middle;
 float: right;
 margin-right: 55px;
 margin-top: 55px;
 justify-content: space-between;
}

.header-list a {
 text-decoration: none;
}

.logo {
 float: left;
 margin-top: 30px;
}

@media screen and (max-width: 960px){
.header-main__text {
    font-size: 24px;
}
}

.mainvisual-text {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%);
 width: 100%;
 text-align: center;
 font-size: 48px;
}

@media screen and (max-width=960px) {
.sec-case {
 padding: 50px 20px
}
}

.case-img {
 width: 100%;
}
 

@media screen and (max-width=960px){
.case-title {
 font-size: 24px;
 margin-bottom: 0px;
}
}



#sec-about {
 padding-left: 40px;
 padding-right: 40px;
}

#sec-about a {
 text-decoration: none;
}

.about {
 text-align: center;
 margin-top: 45px;
 font-size; 24px;
 
}

.about1 {
 display: block;
 font-size: 14px;
 float: left;
 margin-bottom: 15px;
 margin-top: 20px;
}

.about2 {
 font-size: 11px;
 border: 1px solid #000;
 display: inline-block;
 padding: 3px 6px;
 margin: 0 30px;
 margin-bottom: 15px;
 margin-top: 20px;
}

.about3 {
 font-size: 18px;
 text-decoration: none;
 margin-bottom: 15px;
 border-bottom: 1px solid #000;
 padding-bottom: 20px;
}

#sec-case {
 text-align: center;
 margin-top: 50px;
}

.case {

}

.sec-case {
    padding: 90px 0;
    max-width: 1100px;
    margin: 0 auto;
}

.case1 {
 font-size: 24px;
 margin-top: 20px;
}

.case2 {
 margin-top: 15px;
}

img.case-img {
 margin-top: 20px
}

img.case3 {
 width: 50%;
 height: 50%;
 margin-top: 20px;
}

.case-flexbox {
 display: flex;
}

.case-img {
 width: 50%;
 text-align: center;
}


@media screen and (max-width: 960px) {
.case-flexbox {
 width: 100%;
 text-align: center;
 margin-bottom: 50px;
}
}

.case4 a {
 text-decoration: none;
 border: 1px solid #000;
 display: inline-block;
 padding: 12px 40px;
 color: #000;
 font-size: 20px;
 margin-top: 20px;
}

#sec-img {
 margin-top: 20px;
}

#sec-img img {
 width: 100%;
 display: flex;
}
 
.img1 {
 display: block;
}

#footer {
 text-align: center;
 background-color: #000000;
 display: block;
}

.footer-list {
 list-style: none;
 color: #ffffff;
 max-width: 1100px;
 margin: 0 auto;
    padding-top: 50px;
    margin-bottom: 30px;
    flex-direction: column-reverse;
}

.footer-list1 {
 margin-top: 20px;
}

.footer-logo {
 height: 40px;
 margin-bottom: 20px;
}

#footer p {
 color: #ffffff;
 padding-bottom: 20px;
}


 

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

試したこと

一番初めの「実現したいこと」で記載しました。

補足情報（FW/ツールのバージョンなど）

■使用ツール
・Terapad

JAQKxsuke

2021/03/09 22:10

まずはタイトルを修正し、試したことは既に記載したのですが、いまいち書き方が分かりません。

行動規範の内容に同意します

回答1件

ベストアンサー

display:flex;を当てるためのdivを用意してCSSをあてる
用意したflex表示用のdivの中に事例を1例ずつdivに収めていれる

これだけで横並びになります。
カラム落ちする場合はmarginやpaddingをチェックしてください。

html
1<div class="flex case-box">
2  <div class="case">
3    事例
4  </div>
5  <div class="case">
6    事例
7  </div>
8</div>

css
1  .flex {
2    display: flex;
3  }

投稿2021/03/09 23:19

退会済みユーザー

総合スコア0

JAQKxsuke

2021/03/10 12:30 編集

amiya-se様 1.2.のアドバイスを試すことで解決しました。いつもありがとうございます。レスポンシブの練習として模写をしていたのですが、あまりに理解が追い付いていないためドットインストールでも勉強してみます。一点質問なのですが、低評価の理由はまだ調査内容やタイトルが質問に沿っていないことでしょうか。教えて頂けましたら幸いです。

退会済みユーザー

2021/03/10 23:27

> あまりに理解が追い付いていないためドットインストールでも勉強してみます。ドットインストールはわかりやすいので良いと思います。情報が少しずつ古くなっているのでバージョン情報には注意してくださいね。 > 低評価の理由はまだ調査内容やタイトルが質問に沿っていないことでしょうか。僕が付けたわけではないので憶測になるけども、初めから見てる人は、「ヘッダーのナビを横並びにするのにflexを使っているはず、なぜそこで調べない」という点で指摘が入るかな。あとは、「検証ツール使ってコード見ればわかるって言ってるやろ！なんでいちいち１個ずつ聞いてくんのやっ！！」っていう激しいツッコミが入りそうなくらいかなぁ… 模写おkってことはコード見ていいよってことであって、検証ツール使うことを所有者から嫌がられてはいないんだよね。ってことはガンガン検証ツールを使って実際に確認しながらパクって良いわけで… 検証ツール使えば大抵のことはわかっちゃうからね。模範解答が実際にそこにあって、しかも見ていいのに、「なぜ赤の他人にいつまでも教えてくれと言うのか」ここが一番大きいんじゃないかなぁ。初めから「分からなければ誰かに教えてもらおう」というスタンスは、正解を誰も知らない不具合が出た時に修正できずに詰むから、エンジニアとしては失格なんだよね。「成長する意志が本当にあるのかどうか」疑問を持たれているってこと。僕らが新人さんを育てるのは無償奉仕がしたいわけじゃなくて、将来自分が解決できないような不具合に当たったときに、成長した若い世代が柔軟な思考と培った知識によって、その不具合の解決方法を見つけてくれることを期待しているからなんじゃないかなぁ。なんて、まぁ適当に答えてみたけど、「教えて欲しい」そうどんなに願っても「教えてもらえる」なんてことは確定していないんだよあまり他人に頼り過ぎちゃダメだよー自分で出来なくなっちゃうからね？まとまらなくなったので、ここらで〆ってことで、これからも頑張っておくれっ

JAQKxsuke

2021/03/11 01:06 編集

まず長い時間を使ってご返答いただきありがとうございます。 amiya-se様の考えを知ることができ、エンジニアとしての在り方も改めて考えさせられ大変勉強になりました。＞初めから「分からなければ誰かに教えてもらおう」というスタンスは、正解を誰も知らない不具合が出た時に修正できずに詰むから、エンジニアとしては失格なんだよね。「成長する意志が本当にあるのかどうか」疑問を持たれているってこと。学校では分からなかった問題は聞く。答えを聞いて覚えて、それを応用に活かす。一般的な学校教育からその様に学んできた為、プログラミングも同じ様に考えていました。時間制限を設け、自分で一定時間模索してで分からなかった聞くことを決めていました。ただエンジニアを目指すなら、誰も答えを知らない不具合に直面することもあるだろうし、何より自身の成長を考えるなら、まずは自分で考えて答えを導き出す習慣を身につけようと思いました。頼り過ぎちゃダメ。。。本当ですね。甘ちゃんですが一生懸命プログラミングと向き合ってみます。ありがとうございます。そしてこれからもよろしくお願いします。

mai1210

2021/03/11 01:41 編集

私もこの質問に低評価をしたわけではないのですが、乗っからせてください。質問者さん宛てです。検証ツールで「見本サイトではどういうCSSが使われているのか」がわかるようにならない限り、同じような質問をし続けることになりませんか。 amiya-seさんも書いてますが「検証ツール使えば大抵のことはわかっちゃう」し、「模範解答が実際にそこにあって、しかも見ていい」んです。見ましょう。見れるようになりましょう。「その本に答えが書いてるんだけど、読める人読んで答え教えて～～～（自分は本を開いてもいない）」を繰り返しているように見えるので、低評価くらっちゃうのかな、と思ってます。検証ツールで見本サイトがどうなっているかチェック　↓↓ わからないプロパティが出てきたらリファレンスを中心に調べる（ブロック要素なの？インライン要素なの？かけるとどういう効果があるの？使う際の注意点は？）　↓↓ 実際に自分で作ってる方のサイトで使ってみるこの繰り返しができないなら、どんなサイトでも模写は厳しいのでは…？というのが正直な感想です。自分で検索して考える時間が1日30分という謎の縛りがあったとしても、1週間も使えば検証ツールの見方は理解できるんじゃないでしょうか。追記　がんばってくださいーデベロッパーツールの見方・使い方 https://nandemo-nobiru.com/2944/ https://support.sugutsukaeru.jp/ja/customize/homepage-design/253.html https://tonari-it.com/chrome-developertools/ HTML構文のチェックツール https://crowdworks.jp/times/know-how/5305#HTML3 差分がわかるツール https://difff.jp/ https://tool-taro.com/diff/ https://rakko.tools/tools/7/

K_3578

2021/03/11 02:10

アクティブでたまたま見かけたので自分も乗っからせて貰います。(自分も低評価はしてないです。) 質問者さんの過去質問を少し覗かせて頂いた所、恐らく殆どの質問が関連したもので、同じ目標を達成するのにあまり進展の無い質問を重ねられているので「丸投げ」と低評価されているのかな、と思いました。検証ツールに関しても、過去質問の方で回答者の方から検証ツールの使用を推奨されているのに使えていない、コメント見る限りそもそも使ってるのかな？と思っちゃいましたね。自分が質問者さんに検証ツールの使用を勧めた本人だったら「自分の回答ろくに見てないんじゃないか」と思いますね。まぁ、過去質問の殆どは初歩的な内容で躓いてるので(ググれば分かるような内容) 調べ方があまり良くないかもしれません。検索の仕方･コツなんかの質問もteratailの過去質問に結構あったと思うので一度見てみては如何でしょうか？長文失礼しました。質問者さんのエンジニアとしての成長、ご活躍をお祈りします。

JAQKxsuke

2021/03/11 11:43 編集

mai1210様＞検証ツールで「見本サイトではどういうCSSが使われているのか」がわかるようにならない限り、同じような質問をし続けることになりませんか。ここ数日、サイト模写との格闘で検証ツールの使い方とCSSの見方が分かるようになりました。分からないことが度々でてきても、質問したい気持ちをぐっとこらえて検証ツールと向き合いました。＞「その本に答えが書いてるんだけど、読める人読んで答え教えて～～～（自分は本を開いてもいない）」を繰り返しているように見えるので、低評価くらっちゃうのかな、と思ってます。私としては、見本の検証は解答と言うより解説書で、難易度が高めでした。解説書に書いてある通り、組み立てても上手く動いてくれませんでした。きちんと読んでいたのですが、皆様から見ると読んだつもりの取り組み方で、貴重なアドバイスを頂くことでプログラミングの学習方法を深く改める良い機会となりました。もっと調べます。ありがとうございます。＞自分で検索して考える時間が1日30分という謎の縛りがあったとしても、1週間も使えば検証ツールの見方は理解できるんじゃないでしょうか。謎の縛りは辞めました。自分で考え試し検索するを繰り返す。これが成長への道と腑に落ちました。参考サイトありがとうございます。見てみます。

JAQKxsuke

2021/03/11 11:51

K_3578様＞自分が質問者さんに検証ツールの使用を勧めた本人だったら「自分の回答ろくに見てないんじゃないか」と思いますね。そうですね。見ようが足りなかったと思います。本当の意味で見て実践できていませんでした。これからは分かるまで質問しないぐらいの気持ちでプログラミング学習と向き合ってみます。＞調べ方があまり良くないかもしれません。検索の仕方･コツなんかの質問もteratailの過去質問に結構あったと思うので一度見てみては如何でしょうか？ありがとうございます。その発想はなかったので、過去質問から探してみます。＞質問者さんのエンジニアとしての成長、ご活躍をお祈りします。貴重なお言葉、感謝しかありません。皆様から頂いたアドバイスを自分のものにし、精進いたします。

行動規範の内容に同意します