助太刀忍者(質問掲示板)

助太刀忍者

No.53944    各パラグラフの頭に■を付けたい
数行の各パラグラフの頭に丸か■を付けたいのですが、上手くいきません。
一行ならば、li タグを使えますが、、、
どうか教えて下さい。
試した操作手順
いろいろやってみました。
投稿者:みみお 投稿時間:2014-02-02 15:00:09
投稿者 : No Name Ninja
投稿時間:2014-02-06 16:00:00
>一行ならば、li タグを使えますが、、、
リストタグは普通、複数行を前提に使用するのでは?
「リスト」というくらいですし・・・。

それとも、1要素内(1li要素内)に複数行表示させたいということでしょうか。
そうなると、それがリストではないのであれば、(リストタグではない)別の方法の方が良いのかもしれません。

リストと言えるものであれば、リストタグを使用したままで良いですし、liに横幅を持たせれば、それ以上の長文になれば、勝手に折り返されて表示されると思いますが・・・。改行タグで改行するとか。

>いろいろやってみました。
例えば?
以下で紹介する例が、もう既に質問者さんが試した方法だとすると、回答が無駄になってしまいます。次回質問する際には、是非に詳細な情報を。

一応確認ですが、テキストとして、文章と同じく「■」を記述するのではダメなんでしょうか?

CSSで、というのであれば、
1)疑似要素(:before)を使用すると良いかも。
参考:http://www.tagindex.com/stylesheet/basic/format6.html
※注意事項などは参考ページを読んでください。

以下は、例です。


──────(CSS)──────

p.fields:before {
content: "■";
color: #da0b00;
padding-right: 5px;
}


──────(HTML)──────

<p class="fields">ここに入る内容には先頭に■が付きます。</p>
<p class="fields">ここに入る内容には先頭に■が付きます。</p>
<p>適用範囲を指定しない場合には先頭に■が付きません。</p>


──────(ちょびっと解説)──────

content: "■";
段落の直前にテキストを入れます(今回はマーカー)。
上記の「■」を好きなものに変えて下さい。

color: #da0b00;
■の色を指定します。
上記の「#da0b00」を好きな色(カラーコードでもカラーネームでも可)に変えて下さい。

padding-right: 5px;
■と、その後に続く文章との間の「間隔」を指定します。
上記の「10px」を好きな数値に変えて下さい。

その他、■の大きさ等、指定したい場合は好きに付け加えると良いです。


2)ボックス(p要素とか)の背景にマーカー画像を使用するとか。
参考:http://www.tagindex.com/stylesheet/box/background.html


※もしかすると、要望通りの回答ではないかもしれません。その場合は、更に質問を追記下さい。分かる範囲であれば更に回答しますよー。