リストで画像を右に表示したい

締切済

質問者：kokoiti0301
質問日時：2015/07/11 02:17
回答数：2件

リストを表示して画像を右にだしたのですが、float:right を使用した場合、変なスペースが表示されます。
隙間なく表示したいです。だれか、ご教示願います。

以下ソースです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobil … />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></s …
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobil …

</head>

<body>

<div data-role="page">
<div role="main" class="ui-content">
<ul data-role="listview" data-split-icon="info">
<li data-icon="false">
<a href="xxxxxxx" target="_self">
<div style="float:right;"><img src="exsample.jpg" width="100" height="100"/></div>
<h3>リスト要素１</h3>
<p>リスト要素２</p>
</div>
</a>
</li>
</ul>
</div>
</div>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2015/07/12 16:28

スタイル(プレゼンテーション)もHTML(文書構造)も質問からは読取れないので、具体的なアドバイスは不可能です。

＞変なスペースが表示されます。
　これは、firebugでどの要素に由来する物か確認する。

　『リストを表示して画像を右にだしたのですが、』に絞って、潤を追って方法を説明します。

[1] ひたすら文書構造をHTMLでマークアップします。
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )は、現在のHTML+CSSを用いたページ作成の基本ですが、もう15年になるのに(^^)

下記をサンプルとします、
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<nav>ナビゲーション</nav>
　</header>
　<section>
　　<h2>写真リスト</h2>
　　<dl>
　　　<dt id="Photo1"><img src="" width="" height="" alt=""></dt>
　　　<dd>画像の説明</dd>
　　　<dd>撮影場所</dd>
　　</dl>
　　<nav>
　　　<h3>目次</h3>
　　　<ol>
　　　　<li><a href="#Photo1">写真1</a></li>
　　　　<li><a href="#Photo2">写真1</a></li>
　　　</ol>
　　</nav>
　　<aside>
　　　<h3>本文とは関係ない記事</h3>
　　</aside>
　</section>
　<footer>
　　<h2>この文書のフッタ</h2>
　</footer>
</body>

[2] HTMLが正しいかAnothe html Lint( http://www.htmllint.net/html-lint/htmllint.html )などでチェックし、修正します。
　これがまずいと期待通りにデザインできないので

[3] スタイルシートを書きます。
　このとき、[1]の文書構造を使ってセレクタ書きます。
section dl dt{clear:right;}
section dl dt img{float:right;}

これで画像が右でリスト項目ごとに整理されるはずです。

★数日前に( https://oshiete.goo.ne.jp/qa/9016357.html )でも回答しましたが、きちんとHTML書くことが基本です。

[より具体的なサンプル]
★ Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　の[DATA}でチェック済みのHTML5+CSS2.1です。
★ タブは＿に置換してあるので戻す。
★ :は：(全角)に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<link rel="stylesheet" href="css/style.css">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1>ページタイトル</h1>
＿＿<nav>ナビゲーション</nav>
＿</header>
＿<section>
＿＿<h2>写真リスト</h2>
＿＿<p>使用した画像は<a href="https://pixabay.com/">Pixabay - 無料の写真</a>のフリー画像です。</p>
＿＿<dl>
＿＿＿<dt id="Photo1">金魚の写真1<img src="https://pixabay.com/static/uploads/photo/2012/01 … width="640" height="480" alt=""></dt>
＿＿＿<dd>画像や画像のタイトルは定義リスト(dd)の定義要素(dt)、画像の説明は定義リストの説明要素(dd)を使ってマークアップする。</dd>
＿＿＿<dt id="Photo2">金魚の写真2<img src="https://pixabay.com/static/uploads/photo/2013/12 … width="640" height="426" alt=""></dt>
＿＿＿<dd>画像の説明</dd>
＿＿＿<dd>HTMLやCSSを学ぶときに、素人の説明をつまみ食いしても上達しません。多くは誤まったHTMLやCSSを覚えてしまいます。</dd>
＿＿＿<dd>まず仕様書をしっかり読んで理解してから書いてみる。判らないところを探すというのが、最も短期間で上達します。</dd>
＿＿＿<dt id="Photo3">金魚の写真3<img src="https://pixabay.com/static/uploads/photo/2012/01 … width="640" height="480" alt=""></dt>
＿＿＿<dd>divは文書構造を示すためです。安易に使ってはならない。適当な要素がないか探す。</dd>
＿＿＿<dd>適当な要素がないときは、idやclassで何のブロックであるかを示す。例えば要約だったら(summary)、アルバムだったら(album)とか・・</dd>
＿＿＿<dd>その文書構造を元にセレクタを書く。デザインのためにclassやidを書くなんて事は決してしない。初心者が最も犯しやすい間違い。後でメンテナンスで困る。</dd>
＿＿</dl>
＿＿<nav>
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li><a href="#Photo1">写真1</a></li>
＿＿＿＿<li><a href="#Photo2">写真2</a></li>
＿＿＿＿<li><a href="#Photo3">写真3</a></li>
＿＿＿</ol>
＿＿</nav>
＿＿<aside>
＿＿＿<h3>本文とは関係ない記事</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h2>この文書のフッタ</h2>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2015/07/11 14:34

どのようなスタイルシートなのかが判断できないので

まず、基本が間違っている。HTMLが間違っていたら、ブラウザはその構造を補完しますが、その時点で期待と異なる物になるし、HTML5以前はブラウザにより異なるので期待通りになりません。
<!DOCTYPE html>なのでHTML5だと思いますが、HTML5では、DIVは原則として使いません。【超重要】
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
[4.4 Grouping content — HTML5]( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )より
　もちろん、それ以前のHTMLであっても『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』でデザインのために書く物ではありませんでした。以前のHTMLでは文書構造が分からないために、HTML5では文書構造を示す新しい要素が追加され( http://standards.mitsue.co.jp/resources/w3c/TR/h … )、DIVが使えなくなった。
　
<body>
　<header>
　　<h1>ページタイトル</h1>
　</header>
　<section>
　　<h2>内容の見出し</h2>
　　<ul>
　　　<li></li>
　　　<li></li>
と率直に文書構造だけをHTMLで記述して、スタイルシートで指定して行きます。画像がそのページの重要なコンテンツ(内容)であれば

<section>
　<h2>内容の見出し<img src="" width="" height="" alt=""></h2>
　<ul>
　　<li></li>
　　<li></li>

とすればよい。
　そうでなければ、背景か内容の追加(content:)で右に配置して、内容自体はその分marginを取ればよい。

＞<h3>リスト要素１</h3>
＞<p>リスト要素２</p>
　の意味が不明--並列したリスト項目なのに一方はh3
　ひょっとして
<dl>
　<dt>定義</dt>
　<dd>説明</dd>
と定義リストを使うか
<ul>
　<li>リストの項目
　　<p>この項目の詳細</p>
　</li>
を使うべきじゃないかと・・・

＞変なスペースが表示されます。
　これも何を言われているかわかりませんが、h1,h2,・・p,ul,ol,liなどには、ブラウザによって異なりますがmarginやpaddingによって余白を持ちます。
　ウェブ開発でしたら、Web 開発( https://addons.mozilla.org/ja/firefox/extensions … )ツールの豊富なfirefoxをお使いだと思いますが、それらは Firebug( https://addons.mozilla.org/ja/firefox/addon/fire … )で簡単に調べられます。

- 0
- 件

通報する

この回答へのお礼

<div style="float:right;">の部分がまず間違っているということでしょうか？

アドバイスを元にいかのように修正しましたが、意図している表示となりませんでした。
どこに不備があるかご教示いただけないでしょうか？
①
<style type="text/css">
h2.sample1:after {content: url("ｘｘｘｘ.jpg") }
</style>

②
<li data-icon="false">
<h2 class="sample1"><img src="" width="" height="" alt=""></h2>
<ul>
<li>テスト１</li>
<li>テスト２</li>
</ul>
</li>

cssの定義として①を追加し、htmlで②を追加しましたが。
意図している表示となりませんでした。

以下のような表示となりました。
--------
画像
テスト１
テスト２
--------

希望としては、以下のような感じに表示したいです。
--------
テスト１　　｜画|
テスト２ |像|
--------