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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

レスポンシブWebデザイン

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

HTML

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

CSS

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

Q&A

解決済

1回答

13032閲覧

同じ大きさの横並び4つの画像を2列に2つずつ並べて表示させたいです。

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

レスポンシブWebデザイン

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/08/12 02:08

実現したいこと
PC上で表示されている同じ大きさの横並び4つの画像をスマホの画面幅300px~600px程度の幅の時に横並び4つの画像を2列に2つずつ並べて表示させたいです。。
flexでPC上では横並び表示に設定しています。PCの設定はこれでOKです。

問題はスマホの設定で2列に2つずつ並べて表示させたいです**。付属画像1**のような感じです。
cssとresponsivecssは全く同じコードです。

付属画像1
イメージ説明

試したこと
flexの折り返しコードflex-wrap: wrap; /* 折返し指定 */をresponsivecssにflex2{に追加して、#icon_list div {
width: 25%;
}
を追加してみても全然おかしな表示になり✖

li {のコードところにwidth: 10%または、width20%を追加
効果なし✖

常に付属画像2のようになる
付属画像2
イメージ説明

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="robots" content="noindex,nofollow"> 6 <title></title> 7 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <link rel="stylesheet" href="companyhp2.css"> 12 <link rel="stylesheet" href="responsive.css"> 13 14 <script src="jquery-3.6.0.min.js"></script> 15 <style type="text/css"> 16/* レスポンシブ対応で右に出る謎の余白を無くす */ 17.wrapper { 18 overflow: hidden; 19 } 20 21 </style> 22 23 24</head> 25<body> 26<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応--> 27<div class="wrapper"> 28 29 30 31<section id="service"> 32 <h1 class="slide-bottom show">会社の4つのMission<span></span></h1> 33 <div> 34 <div class="icon_list"> 35 <ul class="flex2"> 36 <li class="slide-left show"><img src="icon_hearing.png" alt="改善"><p>改善</p></li> 37 <li class="slide-left show"><img src="icon_marketing.png" alt="開発"><p>開発</p></li> 38 <li class="slide-left show"><img src="icon_planning.png" alt="向上"><p>向上</p></li> 39 <li class="slide-left show"><img src="icon_support.png" alt="サポート"><p>サポート</p></li> 40 </ul> 41 </div> 42 <p class="slide-right show">全てのお客様の未来のために尽力する。</p> 43 </div> 44 </section> 45 <script> 46 //フェードイン用のコードです 47 $(function(){ 48 $(window).on('load scroll', function() { 49 $(".show").each(function() { 50 var winScroll = $(window).scrollTop(); 51 var winHeight = $(window).height(); 52 var scrollPos = winScroll + (winHeight * 0.9); 53 if($(this).offset().top < scrollPos) { 54 $(this).css({opacity: 1, transform: 'translate(0, 0)'}); 55 } 56 }); 57 }); 58 }); 59 //フェードイン用のコードはここまでです 60 61 62</script> 63 64</div> 65</body> 66</html> 67

css

1/* 4つの画像を横並び配置display: flex; */ 2.flex2 { 3 display: flex; 4} 5section { 6 overflow: hidden; 7 text-align: center; 8 padding: 1px 0; 9} 10 11 ul { 12 list-style: none; 13 margin: 0; 14 display: flex; 15 16 } 17 li { 18 margin: 0 0 0 15px; 19 font-size: 14px; 20 } 21 /* 丸い画像の背面の色薄グレー */ 22 #service { 23 background-color: #f7f7f7; 24 } 25 #service .icon_list { 26 display: block; 27 margin: 0 auto; 28 max-width: 800px; 29 } 30 #service ul { 31 margin: 0;padding: 0; 32 flex-direction: row; 33 justify-content: space-between; 34 flex-wrap: wrap; 35 } 36 #service ul li { 37 width: 25%; 38 margin: 0; 39 text-align: center; 40 } 41 #service ul li:nth-of-type(2){ 42 transition-delay: .2s; 43 } 44 #service ul li:nth-of-type(3){ 45 transition-delay: .4s; 46 } 47 #service ul li:nth-of-type(4){ 48 transition-delay: .6s; 49 } 50 /* この記述で丸い画像が均等に4つ表示 */ 51 #service ul li img { 52 max-width: 116px; 53 } 54 /* 丸い画像の下のテキストのスタイル */ 55 #service ul li p { 56 font-size: 19px; 57 color: #f73f6f; 58 } 59 #service p { 60 margin: 0 0 40px 0; 61 } 62 63 /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */ 64 65 66 67 68 /* フェードイン用のCSS */ 69 /* 下からフェードイン */ 70 .slide-bottom { 71 opacity: 0; 72 transform: translate(0, 20px); 73 transition: all 1s ease-out; 74 } 75 /* 左からフェードイン */ 76 .slide-left { 77 opacity: 0; 78 transform: translate(-20px, 0); 79 transition: all 1s ease-out; 80 } 81 82 /* 右からフェードイン */ 83 .slide-right { 84 opacity: 0; 85 transform: translate(20px, 0); 86 transition: all 1s ease-out; 87 } 88 89 /* フェードイン用のCSSここまで */

responsivecss

1/* 画面幅(300px以上の時までの適応)指定 */ 2@media screen and (min-width: 300px){ 3 4/* 4つの画像を横並び配置display: flex; */ 5.flex2 { 6 display: flex; 7} 8section { 9 overflow: hidden; 10 text-align: center; 11 padding: 1px 0; 12} 13 14 ul { 15 list-style: none; 16 margin: 0; 17 display: flex; 18 19 } 20 li { 21 margin: 0 0 0 15px; 22 font-size: 14px; 23 } 24 /* 丸い画像の背面の色薄グレー */ 25 #service { 26 background-color: #f7f7f7; 27 } 28 #service .icon_list { 29 display: block; 30 margin: 0 auto; 31 max-width: 800px; 32 } 33 #service ul { 34 margin: 0;padding: 0; 35 flex-direction: row; 36 justify-content: space-between; 37 flex-wrap: wrap; 38 } 39 #service ul li { 40 width: 25%; 41 margin: 0; 42 text-align: center; 43 } 44 #service ul li:nth-of-type(2){ 45 transition-delay: .2s; 46 } 47 #service ul li:nth-of-type(3){ 48 transition-delay: .4s; 49 } 50 #service ul li:nth-of-type(4){ 51 transition-delay: .6s; 52 } 53 /* この記述で丸い画像が均等に4つ表示 */ 54 #service ul li img { 55 max-width: 116px; 56 } 57 /* 丸い画像の下のテキストのスタイル */ 58 #service ul li p { 59 font-size: 19px; 60 color: #f73f6f; 61 } 62 #service p { 63 margin: 0 0 40px 0; 64 } 65 66 /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */ 67 68 69 70 71 /* フェードイン用のCSS */ 72 /* 下からフェードイン */ 73 .slide-bottom { 74 opacity: 0; 75 transform: translate(0, 20px); 76 transition: all 1s ease-out; 77 } 78 /* 左からフェードイン */ 79 .slide-left { 80 opacity: 0; 81 transform: translate(-20px, 0); 82 transition: all 1s ease-out; 83 } 84 85 /* 右からフェードイン */ 86 .slide-right { 87 opacity: 0; 88 transform: translate(20px, 0); 89 transition: all 1s ease-out; 90 } 91 92 /* フェードイン用のCSSここまで */

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

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

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

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

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

guest

回答1

0

ベストアンサー

2つ並びにしたいのであれば
#icon_list divはwidth100%
#service ul liのwidthは50%
だと思いますがいかがでしょうか?

投稿2021/08/12 03:13

meli

総合スコア312

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

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

ghtew2

2021/08/12 04:11

ありがとうございます。上記の方法で解決できました。感謝です。もう少し意味を勉強したいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問