JavaScript

setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法

  /

この記事では、Webサイトにおいてリスト（li）タグの要素を使い、setTimeoutとfadeOut・fadeInを活用して、1行ずつ切り替わるニュース表示のようなエフェクトを実現する方法をご紹介します。この技術を利用することで、ページ内の限られたスペースを効果的に活用し、複数の情報を一度に表示できるようになります。特に、ニュースティッカーやお知らせ機能を実装したい場合に役立つ手法です。

この記事は、Web開発に興味がある方に向けて、ステップバイステップで解説していきますので、プログラミングの経験が少ない方でも安心して取り組める内容となっています。

Contents

CSSを使ったリストタグのスタイリング

まず、リスト（li）タグを1行ずつ切り替えるために必要なCSSの設定について説明します。以下のコードは、リストタグに適用する基本的なスタイルを定義したものです。ここでは、レイアウトの基本設定やリストタグの外観を整えるためのCSSを紹介します。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#idNews{
	border:solid 1px #CCCCCC;
	width:370px;
	margin:0 auto;
	text-align:left;
}
#idNews ul {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
#idNews li {
	list-style-position:inside;
	list-style-type:none;
}
#idNews li a{
	text-decoration:underline;
	color:#333333;
}
#idNews li a:hover{
	text-decoration:underline;
	color:#666666;
}
-->
</style>

スタイルの詳細説明

  • bodyタグは、ページ全体の余白とパディングをゼロに設定し、ページがブラウザの縁にぴったりと収まるようにしています。
  • h1タグでは、見出しのフォントサイズや行間、高さなどを設定し、中央揃えで表示します。
  • #idWrapは、全体のラップ要素で、ページの中央に配置されるように幅とマージンを調整しています。
  • #idNewsでは、リストのコンテナの幅やボーダーの設定を行い、ニュースティッカーがページ内で目立つようにしています。
  • #idNews ulでは、リスト全体の高さを固定し、内容が溢れないようにoverflow: hidden;を使用して切り捨てています。
  • #idNews liは、リスト項目のスタイルを整え、リストアイテムの位置や表示方法をカスタマイズしています。

これらのCSS設定により、ニュースティッカーとしての基本的な外観が整います。

jQueryを使ったリストの切り替えアニメーション

次に、JavaScriptとjQueryを使用して、リストの項目を1行ずつ切り替える方法について説明します。jquery.min.jsファイルを読み込みます。
この手法では、setTimeoutを利用して一定の間隔でリストの表示を切り替えるとともに、fadeOutとfadeInを使用して滑らかなアニメーション効果を実現します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	function fncnews() {
		setTimeout(function() {
			fncnews();
			$("#idNews li").not(':first').css('display', 'none');
			$("#idNews li:first").fadeOut('normal', function() {
				$(this).next().fadeIn('normal');
				$(this).clone().appendTo("#idNews ul");
				$(this).remove();
			});
		}, 2000);
	}
	var n_size = $("#idNews li").size();
	if(n_size > 1) {
		fncnews();
	}
});
</script>

スクリプトの詳細説明

  • $(function() { … });は、ページが読み込まれた後に実行されるスクリプトを定義します。
  • fncnews()関数は、リストの切り替え処理を行います。この関数は、まず次に表示するリスト項目以外を非表示にします。
  • その後、現在表示されているリスト項目をフェードアウトし、次の項目をフェードインさせます。この一連の処理を繰り返すことで、リストが自動的に切り替わります。
  • setTimeout()は、指定した時間（この場合は2000ミリ秒）ごとにfncnews()を再実行させることで、リストの切り替えを続けます。
  • n_size変数には、リスト項目の数が格納され、2つ以上の項目がある場合のみアニメーションが実行されるようにしています。

このスクリプトを利用することで、簡単にニュースティッカーのようなリストの切り替えアニメーションを実現できます。

HTMLの設定

最後に、リスト項目を設定するHTMLの部分について説明します。このHTML構造は、CSSとJavaScriptによって動的に表示が切り替わるリストを作成するための基本です。

<div id="idWrap">

    <h1>リスト（liタグ）の情報を1行ずつ切替えて表示します</h1>

    <div id="idNews">
    <ul class="xoxo categories">
    	<li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">css</a></li>
    	<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>
    	<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>
    	<li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li>
    </ul>
    </div><!--/idNews-->
    
</div><!--/idWrap-->

HTMLの詳細説明

  • #idWrapは、全体を囲むコンテナで、ページの中央に配置されるように設定されています。
  • h1タグは、ニュースティッカーのタイトルとして機能し、ユーザーに表示される内容を簡潔に説明します。
  • #idNewsは、ニュースティッカーの内容を表示する領域で、ulタグを使用してリスト形式でニュース項目を表示します。
  • liタグは、それぞれのニュース項目を定義し、各項目にはリンクが設定されています。このリンクは、各項目がクリック可能であることを示しています。

このHTMLコードを元に、CSSとJavaScriptを組み合わせることで、ニュースティッカーの機能が完成します。

liタグの情報を1行でずつ切替えて表示するデモページ

liタグの情報を1行でずつ切替えて表示するデモページ

まとめ

この記事では、CSSとJavaScriptを活用して、Webページ上でリストタグを1行ずつ切り替えて表示するニュースティッカーを実装する方法について解説しました。これにより、限られたスペースを有効に活用し、ユーザーに重要な情報を効率的に伝えることが可能になります。

この技術は、ニュースサイトやブログ、企業のホームページなど、情報を視覚的に訴求したい場面で特に役立ちます。この記事を参考に、ぜひご自身のWebサイトにこの機能を取り入れてみてください。技術の理解が深まるとともに、訪問者にとっても魅力的なサイト作りができるようになります。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

リストタグ 切替表示
関連記事