小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

CSSで新着情報や一覧(ul + li)に罫線を表示する方法

最終更新日: 2016-08-08
<ul> + <li>の一覧や新着情報にCSSで罫線を表示

「すぐ使えるCGI」で作成する目次や新着情報などの一覧に、CSS(スタイルシート)で罫線を付けたり表組、アイコンを表示したりする方法をご紹介します。

「一覧」に罫線を指定するとは?

ホームページ上に一覧(目次、新着情報など)を表示する場合、<ul> と <li> を使うのがHTMLタグの意味合い上は最も適しているとされています。

<ul> と <li> を使うと検索エンジンなどにも分かりやすいページになりますが、これらのタグをそのまま使うと、先頭に丸印がついた飾り気の無い表示になってしまいます。

このサポートページでは、これらのタグで表示した一覧を、CSS(スタイルシート)で表組や罫線付きにする方法をご紹介します。また、先頭にアイコンをつける方法や、マウスオーバーした時に行の色を変えるパターンもご紹介します。

サンプルの内容

このサポート情報では、以下の表示の方法をご紹介します。コピーして使えるサンプルのダウンロードも可能です。

  • 一覧に罫線を付ける
  • 一覧の行によって背景色を変える(CSS3)
  • 一覧の各行にマウスオーバーした時に背景色を変える
  • 一覧の各行の先頭にマーク(アイコン)を付ける
  • 一覧を表組で表示する(四角の枠で囲む)

参考:CSSによる設定のしくみ

最終的に記事を登録した時に生成される一覧の HTMLはいずれの表示の場合でも以下のような <ul> と <li> のリストです。CSSのクラス設定(青字)の指定を変更するだけで表示の調整が可能なように、サンプルCSSには予め複数の設定が含まれています。

<ul class="ruled">
<li>
<span class="listdate">2012-11-05</span>
<span class="listlink"><a href="5.html">登録記事サンプル5</a></span>
</li>
<li>
<span class="listdate">2012-10-18</span>
<span class="listlink"><a href="4.html">登録記事サンプル4</a></span>
</li>
</ul>

サンプルの使い方

表示デモのパターンがすべて含まれた編集済みのテンプレートが上のボタンからダウンロードできます。ただし、このサンプルは「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」という製品を使っています。

これ以外の製品の場合は、ダウンロードしたファイルをコピーした後調整して使うか、お手元の製品に直接変更を加えて下さい。

以下のように、対応状況や調整方法について順にご説明します。

  1. 製品別のサンプル対応状況
  2. サンプルファイルをコピーせずご自分で編集する場合の編集方法
  3. デザイン変更の方法(コピー、手編集共通)

製品別のサンプル対応状況

上のボタンからダウンロードできる製品は、「添付ファイル付 ウェブページ更新ツール 大容量版」という製品に一覧のデザインを設定したものです。たまたまお使いになる予定の製品がこの製品だった場合は、ダウンロードしたものをそのまま設置して下さい。

これ以外の製品をお使いになる場合の対応状況は下表の通りです。

◎印のページは、このページからダウンロードしたファイルをそのままコピーして使用できます。△印のページは、このページからダウンロードしたテンプレートファイルをコピーした後、「製品別調整方法」の調整を行って下さい。既にお手元にある製品にスタイルを設定する場合は「一覧のCSSスタイル設定方法」をご覧下さい。

なお、使用中の製品の製品名は、管理画面フッタの「ライセンス情報」のリンクから確認できます。

※ファイル名はtemplates/article/ 内のテンプレートファイル名。
製品名
(従来版および大容量版)
目次(全一覧) 新着情報(短い一覧)
article_list.htmlarticle_list.txtshort_list.htmlshort_list.txt
ウェブページ更新ツール
画像付 ウェブページ更新ツール
添付ファイル付 ウェブページ更新ツール

コピー可

コピー可

コピー可

コピー可
ニュース更新ツール
画像付 ニュース更新ツール
×
利用不可
×
利用不可

コピー可
コピーした後
リンクのhrefを調整

一覧のCSSスタイル設定方法

サンプル製品のテンプレートファイルをコピーせず、お手元の製品に手動で罫線等を加える場合は下記の通り設定して下さい。

準備:「すぐ使えるCGI」を設置

もしまだ「すぐ使えるCGI」を設置していない場合は、「製品一覧」から製品を選んで設置をして下さい。テストは無料でご利用いただけます。

ダウンロードが終わったページに「ステップ by ステップガイド」へのリンクが表示されますので、このガイドを見ながら設置を行って下さい。

設置を行ったら、1件テスト登録を行って情報の登録ができる事を確認して下さい。

templates/article/xxx_list.txt の編集

まず、一覧の1件1件に最初のサンプルHTMLコードに示したような <span> タグが付くように、テンプレートを編集します。編集対象ファイルは以下の通りです。

ページ 編集対象ファイル
目次(全一覧)※ webdir/index.html templates/article/article_list.txt
新着情報(短い一覧) webdir/index_short.html templates/article/short_list.txt
※「ニュース更新ツール」と「画像付ニュース更新ツール」(含 大容量版)の全一覧は対象外です。

「ウェブページ更新」製品の tempates/article/xxx_list.txt 編集例(ファイル全体)

「ウェブページ更新ツール」、「画像付 ウェブページ更新ツール」、「添付ファイル付 ウェブページ更新ツール」(含 大容量版)の場合は、編集したいページに対応するファイルを開いて、以下のように書き換えて下さい。どちらのファイルでも内容は同じです。

<li>
<span class="listdate">%_yyyy_%-%_mm_%-%_dd_%</span>
<span class="listlink"><a href="%_d_%.html">%_subject_%</a></span>
</li>


「ニュース更新」製品の場合の tempates/article/short_list.txt 編集例(ファイル全体)

「ニュース更新ツール」と「画像付ニュース更新ツール」(含 大容量版)の場合は、以下のように変更して下さい。青字のhrefの部分が「ウェブページ更新」製品の場合とは異なる点です。

<li>
<span class="listdate">%_yyyy_%-%_mm_%-%_dd_%</span>
<span class="listlink"><a href="%_to_index_%#%_d_%">%_subject_%</a></span>
</li>

templates/article/xxx_list.html の編集

次に、CSSの設定を行います。以下のファイルを編集します。

ページ 編集対象ファイル
目次(全一覧)※ webdir/index.html templates/article/article_list.html
新着情報(短い一覧) webdir/index_short.html templates/article/short_list.html

※「ニュース更新ツール」と「画像付ニュース更新ツール」(含 大容量版)の全一覧は対象外です。

編集ポイントは以下の2点です。これらのファイルについては、製品による変更内容の違いはありません。

  • ベースとなるCSS設定を <head> 内に追加
  • 表示したい内容によってリスト部分のクラスを調整

templates/article/xxx_list.html に追加するCSS設定

編集したいページに対応するファイルを開いて、<head> と </head> の間に以下のコードを追加して下さい。

<style type="text/css">
/* 一覧表示のためのスタイル */

/* 罫線の設定 ここから */
ul.ruled {
	list-style: none outside none;
	padding-left: 0;
	margin-top: 0;
}
.ruled li {
	border-bottom: 1px solid gray; /* 太さ、線種、色 */
	height: 1.3em;
	padding-top: 0.3em;
}
/* 一番上(リストの上)の罫線 */
div.ruled {
	border-bottom: 1px solid gray; /* 太さ、線種、色 */
}
/* 罫線の設定 ここまで */


/* 文字色・スタイルの設定 ここから */
.listdate {
	color: gray;
}

.listlink a,
.listlink a:link
{
	color: #389ABE;
	text-decoration: none;
}
.listlink a:hover,
.listlink a:active
{
	text-decoration: underline;
}
.listlink a:visited
{
	color: #9A38BE;
}
/* 文字色・スタイルの設定 ここまで */


/* 行による背景色の設定 ここから (ブラウザによっては無効) */
.zebra li:nth-child(odd){ /* 奇数行 */
	background-color: #f0f0f0;
}
.zebra li:nth-child(even){ /* 偶数行 */
	background-color: #fffff0;
}
/* 行による背景色の設定 ここまで */

/* マウスオーバーでの背景色の設定 ここから */
.interactive li:hover{
	background-color: #f0f0f0;
}
/* マウスオーバーで背景色を変更する時は、リンク文字の変更を止めておく */
.interactive .listlink a:hover,
.interactive .listlink a:active
{
	text-decoration: none;
}
/* マウスオーバーでの背景色の設定 ここまで */

/* アイコンの設定 ここから */
.marked li {
	padding-left: 22px; /* 表示するアイコンの幅+余白 */
	background-image: url(./parts/img/arrow.png);
	background-position: left center;
	background-repeat: no-repeat;
}
/* アイコンの設定 ここまで */


/* 表組表示する場合の設定 ここから */
.tablelist
{
	list-style: none outside none;
	padding-left: 0;
	width: 600px; /* 幅を決めておく必要がある */
	              /* 日付部分 150px + タイトル部分 450px = 600px の設定 */
}

.tablelist span
{
	display: block;
	height: 1.2em;
	padding: 4px 0 0 4px;
	overflow: hidden; /* あふれたら非表示 */
	white-space: nowrap;
	float: left;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	border-right: 1px solid gray;
	margin-top: -1px; /* 上下罫線の重複を解消 */
}

/* 日付部分 */
.tablelist span.listdate
{
	width: 140px; /* 幅 150 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
	border-left: 1px solid gray;
	margin-left: -1px; /* 左側罫線の重複を解消 */
}

/* タイトル部分 */
.tablelist span.listlink
{
	width: 440px; /* 幅 450 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
}
/* 表組表示する場合の設定 ここまで */

</style>


リスト部分のクラスを調整

続けて同じファイル templates/article/xxx_list.html を編集します。
一覧を表示したい位置に以下のコードを追加して下さい。表組みにする場合だけ、別のコード(下の2番目の例)を使って下さい。

一覧表示部分に追加するコード(罫線付一覧の場合)

<div class="ruled"></div>
<ul class="ruled">
%_article_list_%
</ul>


一覧表示部分に追加するコード(表組の場合)

表組(サンプルで一番下にあるもの)にしたい場合のみ、以下のように設定して下さい。<div>タグやクラス指定が少し違います。

<ul class="tablelist">
%_article_list_%
</ul>
<div style="clear: both;"></div>


アップロード

デザイン調整の前に、1回動作確認をします。
編集した下記のファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article_list.txt
templates/article/article_list.html
templates/article/short_list.txt
templates/article/short_list.html

再構築

管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

確認

ブラウザのキャッシュを一旦クリアして表示の確認を行って下さい。
1件のみですが、罫線付の一覧が表示されるはずです。

デザイン変更方法

デザイン調整のための編集対象ファイルは以下の通りです。ここからの手順は、手動編集した場合でも、サンプルファイルをダウンロードして使っている場合でも共通です。

ページ 編集対象ファイル
目次(全一覧)※ webdir/index.html templates/article/article_list.html
新着情報(短い一覧) webdir/index_short.html templates/article/short_list.html
※「ニュース更新ツール」と「画像付ニュース更新ツール」(含 大容量版)の全一覧は対象外です。

変更手順

具体的なコードはこの後目的別にご案内しますが、いずれの場合も、テンプレートファイル編集後は以下の手順で反映と確認を行って下さい。

  1. 変更したファイルをサーバに上書きアップロード
  2. 再構築(テンプレート変更反映)
  3. ブラウザのキャッシュをクリア
  4. 再読み込み

なお、下記では編集か所のみご案内しますので、CSSの細かい設定方法は一般の参考書などをご参照下さい。

変更できる点

以下の変更が可能です。

罫線のスタイルを変更(太さ、線種、色)

罫線の色や太さ、種類を変更するには以下の青字部分を変更して下さい(2か所)。

/* 罫線の設定 ここから */
ul.ruled {
    list-style: none outside none;
    padding-left: 0;
    margin-top: 0;
}
.ruled li {
    border-bottom: 1px solid gray; /* 太さ、線種、色 */
    height: 1.3em;
    padding-top: 0.3em;
}
/* 一番上(リストの上)の罫線 */
div.ruled {
    border-bottom: 1px solid gray; /* 太さ、線種、色 */
}
/* 罫線の設定 ここまで */

日付の色を変更

日付部分は「listdate」というクラスを付けておきましたので、色を変更するには以下の青字部分を変更して下さい(1か所)。

/* 文字色・スタイルの設定 ここから */
.listdate {
    color: gray;
}

タイトル(リンク部分)の色を変更

タイトル(リンク部分)の色を変更するには、以下の2か所を変更して下さい。
青字部分が未訪問のリンク、赤字部分が訪問済みリンクの設定です。

/* 文字色・スタイルの設定 ここから */
.listdate {
    color: gray;
}

.listlink a,
.listlink a:link
{
    color: #389ABE;
    text-decoration: none;
}
.listlink a:hover,
.listlink a:active
{
    text-decoration: underline;
}
.listlink a:visited
{
    color: #9A38BE;
}
/* 文字色・スタイルの設定 ここまで */

行によって背景色を変える

行によって背景色を変えるには、以下の3か所を変更して下さい。
青字が背景色の設定(奇数行、偶数行各1か所合計2か所)、赤字がリスト部分に追加するクラス指定です。

なお、この設定方法は古いブラウザでは対応がありません。

/* 行による背景色の設定 ここから (ブラウザによっては無効) */
.zebra li:nth-child(odd){ /* 奇数行 */
    background-color: #f0f0f0;
}
.zebra li:nth-child(even){ /* 偶数行 */
    background-color: #fffff0;
}
/* 行による背景色の設定 ここまで */
<div class="ruled"></div>
<ul class="ruled zebra">
%_article_list_%
</ul>

マウスオーバーで背景色を変える

マウスが上にある時だけ背景色を変えるには、以下の2か所を変更して下さい。
青字が背景色の設定(1か所)、赤字がリスト部分に追加するクラス指定です。

/* マウスオーバーでの背景色の設定 ここから */
.interactive li:hover{
    background-color: #f0f0f0;
}
/* マウスオーバーで背景色を変更する時は、リンク文字の変更を止めておく */
.interactive .listlink a:hover,
.interactive .listlink a:active
{
    text-decoration: none;
}
/* マウスオーバーでの背景色の設定 ここまで */
<div class="ruled"></div>
<ul class="ruled interactive">
%_article_list_%
</ul>

アイコンを変更

表示するアイコン画像を変更するには、以下の3か所を変更して下さい。青字はアイコン画像の設定で、幅とファイルの場所を設定して下さい。赤字がリスト部分に追加するクラス指定です。

サンプルの製品の webdir/parts/img/ の中に別のマーク用の画像が含まれていますので適宜ご利用下さい。

/* アイコンの設定 ここから */
.marked li {
    padding-left: 22px; /* 表示するアイコンの幅+余白 */
    background-image: url(./parts/img/arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
}
/* アイコンの設定 ここまで */
<div class="ruled"></div>
<ul class="ruled marked">
%_article_list_%
</ul>

記事ごとにアイコンを変更したい場合

記事ごとに表示するアイコンを変更したい場合は別の設定を行う必要があります。下記ページをご覧下さい。

新着情報に NEW アイコンやカテゴリーアイコンを表示する方法

表の幅を変更

表の幅を変更する場合、以下の3か所を変更して下さい。
幅は固定値で決めておく必要があります。

/* 表組表示する場合の設定 ここから */
.tablelist
{
    list-style: none outside none;
    padding-left: 0;
    width: 600px; /* 幅を決めておく必要がある */
                  /* 日付部分 150px + タイトル部分 450px = 600px の設定 */
}

.tablelist span
{
    display: block;
    height: 1.2em;
    padding: 4px 0 0 4px;
    overflow: hidden; /* あふれたら非表示 */
    white-space: nowrap;
    float: left;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    margin-top: -1px; /* 上下罫線の重複を解消 */
}

/* 日付部分 */
.tablelist span.listdate
{
    width: 140px; /* 幅 150 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
    border-left: 1px solid gray;
    margin-left: -1px; /* 左側罫線の重複を解消 */
}

/* タイトル部分 */
.tablelist span.listlink
{
    width: 440px; /* 幅 450 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
}
/* 表組表示する場合の設定 ここまで */

表の罫線を変更

表の罫線を変更するには、以下の青字で示す4か所を、同じように変更して下さい。
罫線の幅を変更した場合は、赤字部分(4か所)も変更した幅に合わせて変更して下さい。

/* 表組表示する場合の設定 ここから */
.tablelist
{
    list-style: none outside none;
    padding-left: 0;
    width: 600px; /* 幅を決めておく必要がある */
                  /* 日付部分 150px + タイトル部分 450px = 600px の設定 */
}

.tablelist span
{
    display: block;
    height: 1.2em;
    padding: 4px 0 0 4px;
    overflow: hidden; /* あふれたら非表示 */
    white-space: nowrap;
    float: left;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    margin-top: -1px; /* 上下罫線の重複を解消 */
}

/* 日付部分 */
.tablelist span.listdate
{
    width: 140px; /* 幅 150 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
    border-left: 1px solid gray;
    margin-left: -1px; /* 左側罫線の重複を解消 */
}

/* タイトル部分 */
.tablelist span.listlink
{
    width: 440px; /* 幅 450 - border幅 左右 1pxずつ - padding幅 左右 4pxずつ */
}
/* 表組表示する場合の設定 ここまで */

製品別調整方法

製品別のサンプル対応状況」でご説明した通り「○○ニュース更新ツール」(従来版、大容量版)の場合は、サンプルのテンプレートファイルををコピーしたら以下の変更を行って下さい。

「ニュース更新」製品の場合の調整点

「ニュース更新ツール」と「画像付ニュース更新ツール」(含 大容量版)の場合は詳細の記事ページが無いので、新着情報(短い一覧)からのリンク先が全一覧になります。このため、コピーしたテンプレート templates/article/short_list.txt のリンク先を以下のように変更して下さい。

変更前

<li>
<span class="listdate">%_yyyy_%-%_mm_%-%_dd_%</span>
<span class="listlink"><a href="%_d_%.html">%_subject_%</a></span>
</li>

変更後

<li>
<span class="listdate">%_yyyy_%-%_mm_%-%_dd_%</span>
<span class="listlink"><a href="%_to_index_%#%_d_%">%_subject_%</a></span>
</li>

関連リンク

さらに詳しく