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

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

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

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

CSS

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

Q&A

解決済

1回答

1362閲覧

html css グリッドレイアウト

kokok

総合スコア145

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/09/25 08:02

編集2019/09/25 09:15

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>グリッドレイアウト</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10 <section class="item item-l item-maindish"> 11<a href="#"> 12<img class="image" src="images/image_L_1.jpg" alt="メインディッシュ"> 13<div class="category">Main Dish</div> 14<p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 15wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 16</a> 17</section> 18<section class="item item-m item-appetizer"> 19<a href="#"> 20<img class="image" src="images/image_M_1.jpg" alt="メインディッシュ"> 21<div class="category">Main Dish</div> 22<p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 23wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 24</a> 25</section> 26 27<section class="item item-m item-maindish"> 28<a href="#"> 29<img class="image" src="images/image_M_2.jpg" alt="メインディッシュ"> 30<div class="category">Main Dish</div> 31<p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 32wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 33</a> 34</section> 35 36<section class="item item-maindish"> 37 <a href="#"> 38 <img class="image" src="images/image_S_1.jpg" alt="メインディッシュ"> 39 <div class="category">Main Dish</div> 40 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 41 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 42</a> 43</section> 44 45<section class="item item-appetizer"> 46 <a href="#"> 47 <img class="image" src="images/image_S_2.jpg" alt="前菜"> 48 <div class="category">APPETIZER</div> 49 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 50 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 51</a> 52</section> 53<section class="item item-m item-maindish"> 54<a href="#"> 55<img class="image" src="images/image_M_3.jpg" alt="メインディッシュ"> 56<div class="category">Main Dish</div> 57<p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 58wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 59</a> 60</section> 61<section class="item item-column"> 62 <a href="#"> 63 <img class="image" src="images/image_S_3.jpg" alt="コラム"> 64 <div class="category">COLUMN</div> 65 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 66 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua fieldsetfwef 67 fgefgefeffgegfegefgefgefefefdddddddddddddefe</p> 68</a> 69</section> 70<section class="item item-column"> 71 <a href="#"> 72 <img class="image" src="images/image_S_4.jpg" alt="コラム"> 73 <div class="category">COLUMN</div> 74 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 75 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua fieldsetfwef 76 fgefgefeffgegfegefgefgefgefgefgefefefefefef<br>efefdddddddddddddefe</p> 77</a> 78</section> 79<section class="item item-column"> 80 <a href="#"> 81 <img class="image" src="images/image_S_5.jpg" alt="コラム"> 82 <div class="category">COLUMN</div> 83 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 84 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua fieldsetfwef 85 fgefgefeffgegfegefgefgefgefgefgefefefefefef<br>efefdddddddddddddefe</p> 86</a> 87</section> 88<section class="item item-column"> 89 <a href="#"> 90 <img class="image" src="images/image_S_6.jpg" alt="コラム"> 91 <div class="category">COLUMN</div> 92 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 93 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua fieldsetfwef 94 fgefgefeffgegfegefgefgefgefgefgefefefefefef<br>efefdddddddddddddefe</p> 95</a> 96</section> 97<section class="item item-m item-maindish"> 98<a href="#"> 99<img class="image" src="images/image_M_4.jpg" alt="メインディッシュ"> 100<div class="category">Main Dish</div> 101<p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 102wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 103</a> 104</section> 105<section class="item item-appetizer"> 106 <a href="#"> 107 <img class="image" src="images/image_S_8.jpg" alt="前菜"> 108 <div class="category">APPETIZER</div> 109 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 110 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 111</a> 112</section> 113<section class="item item-appetizer"> 114 <a href="#"> 115 <img class="image" src="images/image_S_9.jpg" alt="前菜"> 116 <div class="category">APPETIZER</div> 117 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 118 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 119</a> 120</section> 121<section class="item item-appetizer"> 122 <a href="#"> 123 <img class="image" src="images/image_S_10.jpg" alt="前菜"> 124 <div class="category">APPETIZER</div> 125 <p class="description">Lorem ipsum dolor sit amet, consecetur adipisicing 126 wiit sed do eiusmod tempor incidudynt ut labore etdolore magna aliqua</p> 127</a> 128</section> 129 130<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> 131<script> 132new Masonry('body',{ 133itemSelector:'.item', 134columWidth:180, 135gutter:4 136}); 137</script> 138</body> 139</html> 140

css

1@charset "UTF-8"; 2 3html{ 4font-size:62.5%; 5} 6body{ 7padding:30px; 8background-color: #f6f7fb; 9color: #333; 10font-size: 1.2rem; 11font-family:Meiryo; 12 13} 14a:link,a:visited,a:hover,a:active{ 15 color:#7c5119; 16 text-decoration: none; 17} 18*::before,*::after{ 19box-sizing:border-box; 20} 21.item{ 22display: inline; 23 width: 180px; 24 margin-bottom: 4px; 25 padding: 8px; 26 border-bottom: 3px solid; 27 border-radius: 5px; 28 background-color: #fff; 29 30} 31.item .image{ 32 diplay:block; 33 width:100%; 34 height:109px; 35} 36 37.item .category{ 38 margin:15px 9px 10px; 39color:#aaa; 40letter-spacing: 1px; 41} 42.item .category::before{ 43content:''; 44display: inline-block; 45width: 19px; 46height:19px; 47margin-right: 5px; 48border: 2px solid; 49border-radius: 50%; 50vertical-align: -5px; 51} 52 53.item .description{ 54 margin:10px; 55 line-height: 1.5; 56 57} 58 59.item > a{ 60 display:block; 61 margin: -8px -8px -11px; 62 padding: 8px 8px 11px; 63 border-radius: inherit; 64 color: #777; 65 transition: all 0.3s; 66} 67 68.item > a:hover{ 69 70box-shadow: 0 0 6px -1px rgba(0,0,0,0,3); 71opacity: 0.8; 72} 73 74 75.item-m .image{ 76 77 height:146px; 78} 79.item-l .image{ 80 81 height:403px; 82} 83 84.item-l{ 85 width:732px; 86}

現在、CSSの学習をしております。(HTML5/CSS3 モダンコーディング(書籍))

グリッドレイアウトで Masonry javascriptのライブラリを使用しています。

しかし、表示すると 右側の余白や 画像と画像の間に余白などが出来てしまいます。
(画像はダウンロードの時点で崩れています。)
イメージ説明

綺麗に右側の余白にも詰めたいのですが、下に折り返してしまいます。
なかなか、なぜこうなるのか理解できなかったのでアドバイス頂けると助かります。

--追記--

修正の依頼を頂き
columWidth:180,

columnWidth:180,

.item{
display: inline;
↑削除してみました。

イメージ説明

画像と画像の間に空白が出来てしまいます。
アドバイス頂けると助かります。

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

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

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

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

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

Lhankor_Mhy

2019/09/25 08:57

↓このスタイルの意図を教えていただけますか? .item{ display: inline;
Lhankor_Mhy

2019/09/25 08:59

typoがあります。 columWidth:180, ↓ columnWidth:180,
kokok

2019/09/25 09:10

回答ありがとうございます。 .item{ display: inline; 表示がおかしかったので色々と試行錯誤してました。(余計な物でした) columnWidth ご指摘ありがとうございます。
kei344

2019/09/26 01:29

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

css

1body{ 2 width: 740px; 3} 4.item{ 5 box-sizing: border-box; 6}

とすると、どうなりますか?

投稿2019/09/25 10:38

Lhankor_Mhy

総合スコア35869

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

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

kokok

2019/09/26 00:13

コメント遅くなりすみません。 .item{ box-sizing: border-box; } を追加したところ、綺麗に表示されました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問