リストタグ<ul><li>を使って箇条書きにする方法とマーカー変更方法

箇条書きリストタグの使い方

箇条書きリストなどを作りたいときはどうしていますか?一行ずつ<br>で強制改行しながら書いていたりしませんか?今回は簡単にリスト形式の記事を書く方法です。

PR

箇条書きリストを作る方法

リストタグを使用すると記事も読みやすく、見栄えも良くなります。細かな設定をCSS(スタイルシート)で行うことで、編集画面ではタグで括るだけで済むようになるので、記事の作成もとても楽になります。

<ul>~</ul>で括りリストを書く

箇条書きにしたいとき、どうしていますか?

リストタグを知るまで、わたしは改行タグを使い以下のような形で書いていました。

【リストの悪い例】
箇条書きしたい部分は強制改行しながらマーカー(・)も直接自分で入力
入力例
・リスト1<br />
・リスト2<br />
・リスト3<br />
表示画面
・リスト1
・リスト2
・リスト3

「・」は「てん」と入力して変換していました。お恥ずかしい。

正しいリストの書き方は次のようになります。使うだけならCSSの編集は特に必要ありません。記事を書く編集画面で以下のように入力します。

【リストの良い例】
リスト全体を<ul>~</ul>で括り、その中に箇条書きにしたいテキストを<li>~</li>で括って入力。<ul>~</ul>の中に入れられるタグは<li>のみです。
入力例
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3

見栄えの良さは一目瞭然です。以前「改行の連打はいけません」「人にもコンピューターにも好かれる文章構造」で記事を書きましょう、とお伝えしましたが、正しい書き方はそれにも通じています。

<list-style-type:○○>を使いマーカーのデザインを変更

デフォルト設定ではマーカーが黒い丸になります。このマーカーはプロパティを指定することで、デザインを変更することができます。

【マーカーを白い丸にする】
プロパティで「circle」を指定する
入力例
<ul style="list-style-type: circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3
【マーカーを黒い四角にする】
プロパティで「square」を指定する
入力例
<ul style="list-style-type: square">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3
【マーカーを非表示にする】
プロパティで「none」を指定する
入力例
<ul style="list-style-type: none">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3

パターンは同じです。オレンジ色のプロパティ部分だけ変えればいいので、使い分けも簡単です。何よりCSSにまったく手を加えずに使えるというのは嬉しいですね。

画像は少しハードルが高い、という方でもマーカーの変更は簡単に使いこなせると思います。お試しください。

尚、 <ul type="square"><ul> という指定も以前はできましたが、現在は「type」属性は非推奨となっています。

リスト設定をCSSで変更する方法

上下余白や左側の余白設定、マーカーのデフォルト設定などはCSSでデザインを編集しましょう。編集前には必ずバックアップを取ってください。

バックアップ方法とスタイルシートの場所については次の記事を参照してください。

ブログ記事内の文字の大きさ太さ色を変えてみよう(HTML-CSS)

デフォルト表示されるマーカーの変更や余白の調整

基本的には一つのマーカーしか使わないという場合、毎回
<ul style="list-style-type: ○○"> と入力するのは面倒な作業になります。このような場合は、CSSで最初から使いたいマーカーに設定しておきましょう。初期設定を変更すれば<ul>~</ul>で括るだけで指定したマーカーが毎回表示されます。

【デフォルト設定を黒い丸⇒黒い四角に変更】
CSSを以下のように編集します

解説
1行目はコード説明です。
2行目ul の設定を開始するという意味で、3行目が指示内容になります。
squarecircle にすれば白い丸のマーカーに設定されます。

スタイルシートの編集画面を開いたら ctrl+Fキーを使い ul で検索して設定されている箇所を探します。それらしい場所が見つかったら、4行目にあるような設定終了タグ直前に1行の空きを作り、3行目のリスト設定をそのまま追加します。編集が終わったら保存して完了です。

テーマやテンプレートによっては

のように、なっていることもあると思います。

これは、<ul>と<li>を一括で指定しています。あるいは、1行目の部分が ulol になっているケースもあるかもしれません。いずれにしても、設定したい部分が共通する場合はいいですが、<ul>だけ個別に適用させたいようなときには、1行目~5行目の共通設定はそのまま残します。そして、すぐ下(6行目以降)へ、最初のCSS設定を丸ごとコピペします。

また、上のように共通で設定されている余白を、個別に設定し直したい場合には、1行目を ul { だけ、または li { だけにして、それぞれに余白の設定をしましょう。そうすることで、さらに詳細なデザイン指定が可能になります。

<li>頭部分を画像で表示する方法

箇条書きのマーカー部分を画像にしたい場合の編集方法です。このサイトの場合、PCでご覧になっている方は右サイド上に、スマホでご覧の方は記事下にある「ポイント交換報告」の箇条書き部分の頭が画像になっているのが確認できると思います。あのようなスタイルにしたい場合の設定です。

画像の設定の方法は二つのパターンがありますので、それぞれ説明します。

list-style-image で画像を設定する

【プロパティで「表示せたい画像URL」を指定する】
CSSを以下のように編集します

解説
1行目はコード説明です。
2行目ulsample というクラス名を指定した場合の設定を開始するという意味になります。上のままではクラス名が sample なので、任意で変更してください。その際、「s」の前のピリオドは消さないように気をつけてください。
3行目で表示させたい画像を指定しています。""は消さずに残します。
4行目で箇条書き部分の余白幅を設定しています。この数値を大きくすると、以下の表示画面のリスト1とリスト2、リスト2とリスト3の行間がさらに広くなります。
入力例
<ul class="sample">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3

<ul>タグを使用した時点で、リスト全体の上下余白や左側の余白などは、初期設定のものが適用されます。ですから、ここでは個別で指定しておきたい部分だけを追加しています。

.sample はクラス名ですが、この部分を削除した場合、<ul>で括られた全ての場所に適用されてしまいます。例えば、関連記事などでリストタグが使用されている場合、そうした場所も一気に画像になってしまう可能性があるので、上記ではクラス指定しておきました。不要な場合は.sample 部分を削除してください。

上の例では16×16 のアイコン画像を使用していますが、うまく表示されない場合には、次のような方法もあります。

backgrounrd で画像を設定する

【backgrounrd(背景)で「表示せたい画像URL」を指定する】
例1. CSSを以下のように編集します

解説
1行目はコード説明です。
2行目ulsample1 というクラス名を指定したときの、liタグ範囲内に適用される設定を開始するという意味になります。上のままではクラス名が sample1 なので、任意で変更してください。「s」の前のピリオドは消さないように気をつけてください。
3行目で箇条書きテキスト1文字目の開始位置を調整しています。画像は背景扱いなので、この指定がないと画像と1文字目が被ります。
4行目で表示させたい画像を指定しています。""は消さずに残します。
5行目で画像を繰り返し表示しない(1個だけ表示する)設定をしています。この設定がないと<li>~</li>タグの範囲内が、何個もの同じ画像で埋まります。以下の表示画面であれば「リスト1」という文字範囲に双葉の画像が何個も並び、文字と重なって表示されることになります。(背景設定のため)
6行目は、その1個の画像を指定範囲内のどこに表示するか指示しています。マーカーとして使うものなので、左端に表示されるようにしてあります。
7行目は、初期設定のマーカーを非表示にする設定です。この設定がないと、画像とマーカーの両方が表示されてしまいます。うまく画像の下にマーカーが隠れて目には見えないこともありますが、必要ないので非表示にしておきましょう。
入力例
<ul class="sample1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3

同じく背景での設定ですが、少し内容の違うパターンもあります。

【backgrounrd(背景)で「表示せたい画像URL」を指定する】
例2. 基本は例1と同じですが表示する画像の大きさを変更できます。

解説
1行目~5行目は「例1」と同じです。
6行目も意味は「例1」と同じです。書式が違うだけですが「left」「right」に変更すると、左端ではなく右端に表示されます。
7行目で画像が表示される大きさを設定しています。数値を大きくするとその分、画像が大きくなります。
8行目は、初期設定のマーカーを非表示にする設定です。
入力例
<ul class="sample2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
表示画面
  • リスト1
  • リスト2
  • リスト3

今回はクラス指定してあるので list-style-image あるいは backgrounrd どちらで設定を追加した後でも、単に<ul>~</ul>で括った場合には、これまでと同じ初期設定のマーカー(黒い丸)が表示されます。

画像表示したい場合のみ、記事編集の画面で<ul>の中にクラス指定を付け加えればいいので、臨機応変な使い分けが可能です。さらにクラス名を変えて、別画像を複数設定すると <ul class="sample2"></ul><ul class="sample3"></ul> と、状況に応じた画像の切り替えも簡単にできるようになります。

このページでは「入力例」の鉛筆アイコンと「表示画面」の本アイコンもクラス名の変更だけで画像を変えています。便利です。

設定の方法も3パターンあれば、いずれかで成功すると思うのですがいかがでしょう。表示例では、実際に3パターンすべての方法で表示させています。画像の大きさなどで変化もあると思うので、お好みの方法をご利用ください。

最後の方法は、スマホ(縦向き)とガラケーでは画像が小さく表示されてしまうかもしれません。対処法もあるのだと思いますが、現状のわたしの知識ではご案内できません。携帯からの閲覧者にも配慮したいという方は、1番目か2番目の方法をおすすめします。

ほぼ問題なく表示されると思いますが、余白指定や画像の大きさ指定などは、実際にプレビューで確認しつつ数値の微調整をお願いします。

ここがポイント
  • リストで改行は使いません。リストタグを使いましょう
  • マークは style="list-style-type: ●●" でチェンジ
  • 画像は予めCSSに登録。使い分けも簡単でバリエーション豊富に!

画像登録が初めての場合は、少し時間がかかってしまうかもしれませんが、これができるようになるとリスト以外の場所でも、応用すれば同じように使えます。覚えるととても便利なので、この機会に奮闘してみてください。

尚、箇条書きの文頭に番号やアルファベットなどを付けたリストの書き方を知りたい方は、以下の記事で説明しています。

箇条書きの文頭に数字やアルファベット等で順序付けをしたリストタグ(ol,li)の使い方

最後まで読んでいただきありがとうございました。そして、いつかのわたしのように奮闘された皆さん、お疲れさまでした。この記事が少しでも問題解決の糸口になれば幸いです。

» サムネイルやイメージ画像にピッタリ!
無料イラストなら【イラストAC】
※商用でも無料・クレジット表記不要
ブログランキング
お帰り前に応援1クリックいただけたら嬉しいです!
このページの情報があなたのお役に立ちましたらお願いします。
ブログランキング   にほんブログ村 小遣いブログ ポイントサイトへ
PR

シェアはとても励みになります。ありがとう!

購読はフォローが便利です

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です