文字の先頭につけるアイコン

解決済

質問者：4o3a6g6e
質問日時：2009/02/12 01:18
回答数：4件

文字先頭につけるアイコン

文字先頭表示するアイコンの表示方法がわかりません。アイコンの選択基準もどのような規格（サイズ、拡張子）選択したらよいか、わかりません。

よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2009/02/17 18:34

No.2 ORUKA1951です。

＞回答のように★ではなく、何か、★の部分をヤフーの動くスマイルマークのようなアイコンにしたいとかです。
　それだけでは、情報不足なのです。

　あくまで表示したいということは、プレゼンテーションの問題であって、そのテキストがHTMLの文書構造の中で何なのかが示されてないからです。

　たとえば、<body>内の本文文章<div class="main">で、見出しがある。
例：
<div class="main">
　<h2>見出し</h2>
　<p>段落</p>
　<p>段落</p>
　<h2>見出し</h2>
　<p>段落</p>
　<p>段落</p>
</div>
のようなHTMLで、本文中の<h2>の先頭にアイコンをつけたい場合も、
　あるいは、リンクのリストの先頭につけたいのなら
例:
<ol id="navigation">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ol>
　リストの先頭に画像を表示するようにスタイルシートで指定すればよい。

　たぶん、ここまでの説明はちんぷんかんぷんだと思います。画面でどのように表示するかは、スタイルシートで指定しますが、その前提として、上記の例のようにきちんとHTMLでマークアップされていることが前提です。

＞どちらになるのかはよくわからないのですが、
　の時点では、アドバイスはこれ以上のことは出来ません。
適切なマークアップはどのようにしたらよいかは、

はじめてのWebドキュメントづくり
　 http://www.asahi-net.or.jp/%7Esd5a-ucd/www/

　などで、しっかり正しい方法を身につけてください。仕様書翻訳メンバーの主筆の内田さんがお子さんのために書かれたものと聞いています。ですから、下手なマニュアル本よりも、はるかに役立つかと・・

　マークアップが完了したら、改めて上記のようなHTMLをお示しの上、訪ねられたらよいと思います。

- 0
- 件

通報する

No.3

回答者： noname#100277
回答日時：2009/02/12 22:44

CSSを使う。

li{list-style-image: url('ファイルへのパス')}

<ul>
<li>文字列</li>
</ul>

画像の縦横の大きさは32px程度が限界でしょう。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2009/02/12 08:39

＞文字先頭につけるアイコン

文字先頭ではなく、テキスト先頭ですよね。これはまったく異なります。
文字(font)先頭と言うと、「★文★字★先★頭」のように文字一つ一つになります。
また、テキスト先頭として、それは段落ですか、それともリストですか？

　・一行目　　　　　→　　　★一行目
　・二行目　　　　　→　　　★二行目

としたいのか、

★文字先頭ではなく、テキスト先頭ですよね。これはまったく異なります。

としたいのか、

この回答への補足

どちらになるのかはよくわからないのですが、回答のとおりだとするとテキスト先頭に、というようになるのでしょうが、回答のように★ではなく、何か、★の部分をヤフーの動くスマイルマークのようなアイコンにしたいとかです。

補足日時：2009/02/12 14:07

通報する

- 0
- 件

通報する

No.1

回答者： Hardking
回答日時：2009/02/12 02:05

HTMLの<IMG>タグ、またはCSSで画像ファイルを表示します。

画像ファイルの種別は、bmp, gif, jpg, pngなどで
画像サイズは、画像の伸縮ソフト、width, heightアトリビュートで調整します。
例１
<div><img src="xxx.png" width="128" height="128">あいうえお</div>
例２
.myimg {
width:128px;
height:29px;
background:url(xxx.png) no-repeat left bottom;
}
<div class="myimg"></div><div>あいうえお</div>

この回答への補足

回答ありがとうございます。アイコンの表示はできましたが思ったより大きかったのでもう少し小さいものにしようと思うのですが、text設定コードのような、何かもっと小さいアイコン表示コードのようなものはないでしょうか？調べてみたのですが、どれがどのコードなのかわからないものが多かったので、

よろしくお願いします。

補足日時：2009/02/12 02:34

通報する