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

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

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

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

CSS

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

Q&A

解決済

4回答

10422閲覧

画像を横4枚ずつ並べて綺麗なレイアウトにしたい

amagurio

総合スコア15

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/06/14 04:17

編集2019/06/14 04:50

画像を4枚ずつ横に並べて、以下のように実装したいのですが、
うまいこと行きません。何か記述ミスでしょうか?

実装イメージ↓
実装イメージ

<追記>現状はこんな感じになってしまっています。
イメージ説明

html

1<div class='topic'> 2 <div class="topic-title"> 3 <h2>トピック</h2> 4 </div> 5 <div class='topic-image'> 6 <img src='img/topic/book.jpg'> 7 <img src='img/topic/car.jpg'> 8 <img src='img/topic/cos.jpg'> 9 <img src='img/topic/enjoy.jpg'> 10 <img src='img/topic/familly.jpg'> 11 <img src='img/topic/furima.jpg'> 12 <img src='img/topic/isan.jpg'> 13 <img src='img/topic/line@.jpg'> 14 <img src='img/topic/linear.jpg'> 15 <img src='img/topic/movie_tosimaen.jpg'> 16 <img src='img/topic/singer.png'> 17 <img src='img/topic/song.jpg'> 18 <img src='img/topic/sport.jpg'> 19 <img src='img/topic/tokimeki.jpg'> 20 </div> 21</div> 22 23 24 25

css

1div.topic{ 2 display: block; 3 position: relative; 4 top: 800px; 5 left: 380px; 6 } 7 8 div.topic-title{ 9 display: block; 10 background-color:mediumorchid; 11 } 12 div.topic-image{ 13 display: block; 14 background-color: white; 15 width: 900px; 16 height: auto; 17 } 18 div.topic-image img{ 19 display: flex; 20 flex-direction: row; 21 flex-wrap: wrap; 22 justify-content: space-between; 23 }

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

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

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

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

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

miyabi_takatsuk

2019/06/14 04:34

何がどううまくいっていないのか、具体的に記載してください。 ex)画像が、歯抜けで、三つしかでない列がある など。 また、現状の方もキャプチャいただけると助かります。 そして、HTML、CSSの文法はまず直しましょう。 HTML→最初のdiv要素の"<"が抜けている CSS→最後のブロックの終了の"}"が抜けている 実際に動かそうとしているソースも、同じようになっているのなら、 そこを直すだけでも、直る可能性があります。
miyabi_takatsuk

2019/06/14 04:52

質問修正ありがとうございます。 回答させていただきますので、お待ちください。
guest

回答4

0

まず、flexの使い方を間違われているようです。
今、imgに効かせているflex系のプロパティは、
要素を並べたい親要素に効かせるプロパティとなります。
よって、正しくは下記になります。

CSS

1div.topic{ 2 display: block; 3 position: relative; 4 top: 800px; 5 left: 380px; 6} 7 8div.topic-title{ 9 display: block; 10 background-color:mediumorchid; 11} 12 13div.topic-image{ 14 background-color: white; 15 width: 900px; 16 height: auto; 17 /* imgに効かせていたflex系プロパティをこっちにもってくる */ 18 display: flex; 19 flex-direction: row; 20 flex-wrap: wrap; 21 justify-content: space-between; 22}

投稿2019/06/14 05:06

miyabi_takatsuk

総合スコア9528

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

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

miyabi_takatsuk

2019/06/14 10:51

低評価をされた方、どうか、理由をコメントで寄せていただけないでしょうか? 今後の資糧とさせていただければと思いますので。
amagurio

2019/06/19 03:39

そもそも、効かせるところが違ったんですね(゚д゚) かなり助かりました!ありがとうございます。 ちょっと修正してまた試してみます!
guest

0

以下のように margin-left プロパティ, calc 関数nth-of-type 擬似クラスを用いることで、質問者さんの実現したいことを行うことが出来ると思います(動作確認用リンク)。

HTML

1<div class="topic"> 2 <div class="topic-title"> 3 <h2>トピック</h2> 4 </div> 5 <div class="topic-image"> 6 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=book.jpg" alt> 7 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=car.jpg" alt> 8 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=cos.jpg" alt> 9 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=enjoy.jpg" alt> 10 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=familly.jpg" alt> 11 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=furima.jpg" alt> 12 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=isan.jpg" alt> 13 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=line@.jpg" alt> 14 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=linear.jpg" alt> 15 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=movie_tosimaen.jpg" alt> 16 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=singer.jpg" alt> 17 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=song.jpg" alt> 18 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=sport.jpg" alt> 19 <img src="http://placehold.jp/3d4070/ffffff/350x500.png?text=tokimeki.jpg" alt> 20 </div> 21</div>

CSS

1body { 2 margin: 0; 3 background: #fbfaec; 4} 5 6.topic { 7 padding: 1.5em; 8} 9 10.topic-title { 11 background: mediumorchid; 12} 13 14.topic-image { 15 display: flex; 16 flex-wrap: wrap; 17 max-width: 900px; 18 margin: 0 auto; 19 padding: 2em; 20 background: white; 21} 22 23.topic-image > img { 24 --margin-left: 10px; 25 width: calc(25% - (3 * var(--margin-left) / 4)); 26 margin-bottom: 1em; 27 margin-left: var(--margin-left); 28} 29 30.topic-image > img:nth-of-type(4n + 1) { 31 margin-left: 0; 32}

投稿2019/06/14 10:16

編集2019/06/14 10:24
s8_chu

総合スコア14731

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

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

amagurio

2019/06/19 03:37

わざわざコーディングしてくださり、ありがとうございます!! 結構参考になりました!ちょっと試してみますっ♪
guest

0

ベストアンサー

複数のアイテムを整然と配置したい場合は、display: grid、いわゆるグリッドの方が向いていると、私見ですが、思います。

display: flex、いわゆるフレックスは、

  • 一つのアイテムを軸X,Y軸共に中心寄せしたい

等に、僕はですが使っています。

複数のアイテムを整然と配置したい場合は、名前の通り(gridは日本語訳すると格子状のいう意味になります????)、グリッドが適しており、簡単に細部までレイアウトする事が出来ます。

フレックスについては、最後に少し述べています。

html

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8" /> 5 <title>グリッドレイアウト</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="grid.css" /> 8</head> 9<body> 10 11 12<div class='topic'> 13 <div class="topic-title"> 14 <h2>トピック</h2> 15 </div> 16 <div class='topic-image'> 17 <img src='img/topic/book.jpg'> 18 <img src='img/topic/car.jpg'> 19 <img src='img/topic/cos.jpg'> 20 <img src='img/topic/enjoy.jpg'> 21 <img src='img/topic/familly.jpg'> 22 <img src='img/topic/furima.jpg'> 23 <img src='img/topic/isan.jpg'> 24 <img src='img/topic/line@.jpg'> 25 <img src='img/topic/linear.jpg'> 26 <img src='img/topic/movie_tosimaen.jpg'> 27 <img src='img/topic/singer.png'> 28 <img src='img/topic/song.jpg'> 29 <img src='img/topic/sport.jpg'> 30 <img src='img/topic/tokimeki.jpg'> 31 </div> 32</div> 33 34 35</body> 36</html>

css

1.topic-title{ 2 background-color: mediumorchid; 3} 4.topic-image{ 5 background-color: white; 6 width: 900px; 7 8 /* 追加 */ 9 display: grid; 10 grid-template-columns: auto auto auto auto; 11 grid-gap: 20px; 12} 13.topic-image img{ 14 /* 追加 */ 15 width: 100%; 16}

グリッド学習おススメWebサイト

グリッドレイアウト-w3school.com-

ページ↗︎の????マークを押すと、日本語翻訳で読めます(スマホからだと、????マーク出ないので注意)。
w3school日本語
イメージ説明

おまけコラムw

元々cssの発展経緯的に、display: flex(2009) → display: grid(2011) であり(初出)、gridの方がより近年のWeb開発者・デザイナーの需要に応えた形になっている、と感じています。それ以前はflex等で、何とか2,3,4列レイアウトをされていたようです。。
flexはどちらかというと、整然と複数のアイテムを配置するというより、もう少し特殊な場合に向いている、と言えるかもしれません。

ソース:

投稿2019/06/14 07:39

編集2019/06/20 03:03
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

amagurio

2019/06/19 03:34

なるほど!! grid初めて知りました! 確かにめっちゃ便利ですねっ♪ちょっと勉強してみますっ☆
退会済みユーザー

退会済みユーザー

2019/06/19 04:59

|ω・)و ̑̑༉✨✨♪♪♪
guest

0

多分、
Bootstrap GridとかFlexbox使った方がいいと思います。
実装が楽です。

投稿2019/06/14 04:24

ak_suzuki

総合スコア194

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

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

miyabi_takatsuk

2019/06/14 04:39

確かに言わんとされることはわかりますが、 発展させることはいいとは思いますが、あくまで本質問のような一箇所でならCSSライブラリは冗長かと思います。 また、質問者さんはflexboxは使おうとされてますよ。 (使い方間違ってますが)
amagurio

2019/06/19 03:40

Boostrap Gridというものがあるんですね! 知りませんでした('_')そのBoostrapGridも勉強してみますっ♪ ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問