電子書籍の厳選無料作品が豊富！

おしえて

画像を、横並びにするには！？

解決済

  • 質問者：Campus2
  • 質問日時：
  • 回答数：1件

注：以下の------～------ですが！
実際のソースコードには入っていません
-以下の----～------の範囲の
-----------------------------------------------------------------
<section class="leafse">
<a href="hover.html"><img src="images/leaf/14366.jpg" style="width:50%"></a>
<a href="hover.html"><img src="images/leaf/14365.jpg" style="width:50%"></a>
</section>
---------------------------------------------------------------------
以上のコードが参考書片手に適当に作りましので、そもそもむちゃくちゃ
でしょう！？つきまして、パソコン画面ですが、
Webサイトのスマートフォン表示用、Google Chromeの
デベロッパーツールでエミュレート（Galaxy s5）で見る限り
14366.jpg
14365.jpg
の画像が縦並びに、仲良くぴったり重なった状態で表示されます。
これでは全くものになりませんので、※せめて14366.jpgの右に
14365.jpgの画像が来るようにし、間隔を約１㎝開けたい
のです。この場合、CSS側の設定するコードですが、参考書を見ながら
当てずっぽうに
.leafse：float: left;
しました！これでは全く変化なしでした。
以上の※のようにしたいのですが、できるでしょうか？
よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Leaf cutting｜○○○「SNAPPERS」</title>
<link href="https://https://fonts.google.com/specimen/Noto+S …|Noto+Serif+JP:wght@20;300;400;500;600;700;900">
<link href="css/style.css" rel="stylesheet">
</head>
<body id="Leaf"><!--idでCSSから特定指令ができるようになる-->
<!-- header始まり -->
<header>
<div class="logo"><!--P80・P109-->
<a href="index.html"><img src="images/top.png" alt="TOP"></a>
<!--P84-->
</div>
<nav>
<ul class="global-nav">
<li><a href="Lea.html">Leaf</a></li>
<li><a href="Dis.html">Disney's</a></li>
<li><a href="Flo.html">Flower</a></li>
</ul>
</nav>
</header>

<!-- header終わり -->
<!-- wrap始まり -->
<div id="wrap" class="clearfix">
<div class="content">
<div class="main">
<h1> ○○を待ってくださっている方のために</h1>
<h1>Collection of leaf cuts</h1>
</div>
-----------------------------------------------------------------
<section class="leafse">
<a href="hover.html"><img src="images/leaf/14366.jpg" style="width:50%"></a>
<a href="hover.html"><img src="images/leaf/14365.jpg" style="width:50%"></a>
</section>
---------------------------------------------------------------------
</div>
<!-- wrap終わり -->

<!-- footer始まり -->
<footer>
<small>(C)2017 Hattori-studio.</small>
</footer>
<!-- footer終わり -->
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

見やすい様にソースコードを改行すると、困った事に画像と画像の間にスペースが勝手に追加されます。


htmlのスペックなので仕方有りません。

回避方法は3通りです。好きなもので回避して下さい。

◆例 　改行して2行にしてるので、画像間に隙間が出来ます。
<img src="1.gif" style="width:50%">
<img src="2.gif" style="width:50%">

◆回避1 改行を止める
<img src="1.gif" style="width:50%"><img src="2.gif" style="width:50%">

◆回避2 改行をコメントアウトする
<img src="1.gif" style="width:50%"><!--
--><img src="2.gif" style="width:50%">

◆回避3 画像をブロックとして横並びにする
<img src="1.gif" style="width:50%;float:left;">
<img src="2.gif" style="width:50%;float:left;">

●●●●●●●
質問の内容では、回避3が良いかと思います。
スペースを少し入れたいとの事なので、幅は49くらいにして調整して下さい。
2個目の画像の左にマージンを入れます。

<a href="hover.html"><img src="images/leaf/14366.jpg" style="width:49%;float:left;"></a>
<a href="hover.html"><img src="images/leaf/14365.jpg" style="width:49%;float:left;margin-left:1%;"></a>
    • good
    • 1
    • 件
通報する
この回答へのお礼

早々ご回答くださいまして、ありがとうございました。
ご紹介してくださいました最後のソースコードで試したところ
できました。
今朝までの期限でしたので、助かります。

　早速、送信準備にかかります。

通報する
お礼日時：2020/05/28 06:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報