Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
HTML,CSS初心者です。Webページの作成を行っております。
発生している問題・エラーメッセージ
ulタグの中に画像を6枚入れています。
２段に分けて上下３枚ずつ（3枚×2段）の表示をさせていますが、
画像の間に20pxのmariginを与えたいですが、上手くいきません。
是非書き方のアドバイスを教えて下さい。
該当のソースコード
<HTML> ``` <section class="main2"> <div class="left"> <h2>最新の作品</h2> <ul class="left-ul"> <li><img src="./img/thumb1.jpg"></li> <li><img src="./img/thumb2.jpg"></li> <li><img src="./img/thumb3.jpg"></li> <li><img src="./img/thumb4.jpg"></li> <li><img src="./img/thumb5.jpg"></li> <li><img src="./img/thumb6.jpg"></li> </ul> </div> <div class="right"> <h2>自己紹介</h2> <p> こんにちは、Manaです。世界中を旅しながら写真を撮っています。 <a href="#">Twitter</a>や<a href="#">Facebook</a>やってます。 お気軽にフォローしてください。 <a href="#">ブログ</a>もチェックしてみてください。これはデモサイトです。実際は写真苦手です。はい。 こんにちは、Manaです。世界中を旅しながら写真を撮っています。 <a href="#">Twitter</a>や<a href="#">Facebook</a>やってます。 お気軽にフォローしてください。 <a href="#">ブログ</a>もチェックしてみてください。これはデモサイトです。実際は写真苦手です。はい。 </p> </div> </section>コード
<CSS>
.main2 {
width: 950px;
height: 340px;
margin: 0 auto;
}
.left {
height: 350px;
width: 670px;
float: left;
}
.left-ul {
height: 320px;
}
li img {
float: left;
border: 5px solid #fcfafa;
display: block;
}
.left-ul > li:nth-child(n+4) {
margin-top: 20px;
}
.right {
width: 280px;
float: left;
}
h2 {
border-left: 5px solid #ee55da;
padding-left: 10px;
font-size: 20px;
}
.right p {
font-size: 18px;
margin-top: 20px;
line-height: 20px;
}
コード
### 試したこと ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
回答2件
0
こんな感じですかね
https://codepen.io/Reek/pen/VXJBmW
・imgにfloatかかってましたが、親要素にかけないと意味ないと思います。
・画像はダミーなので300x300と書かれていますが、表示サイズは違います。
・FlexBoxとCalcとbox-sizingを使っていますので、これらプロパティはご自分で調べて下さい。
投稿2018/04/15 09:44
総合スコア607
0
li要素にfloatが設定されていないためです。
【よこ並びのCSS。】
http://lopan.jp/layout/
【段組みのCSS。】
https://lopan.jp/layout2/
とりあえずデベロッパーツールの使い方を覚えると問題解決が早くなると思います。
【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01
【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2
投稿2018/04/15 09:41
総合スコア69400
あなたの回答
tips
プレビュー
