現代のWeb開発において、限られたスペースに大量のコンテンツを効率的に表示することは非常に重要です。特にスマートフォンやタブレットのような小さな画面では、ページ全体に一度にすべての情報を表示するのが難しくなります。そのため、ユーザーが快適にコンテンツを閲覧できるようにするための工夫が必要です。
今回は、JavaScriptを使って、コンテンツエリアに収まりきらないテキストや画像を「上下移動でスライド表示する方法」をご紹介します。この技術を使えば、ユーザーがマウスを特定のリンクにマウスオーバーするだけで、コンテンツを滑らかに上下に移動させることができます。さらに、この手法は視覚的に優れた体験を提供し、ページスペースを効率的に利用するための手段として非常に有用です。
1. コンテンツエリアの基本設計とCSS
まず、コンテンツエリアに収まりきらないテキストや画像を、上下に移動できるようにするためには、CSSで適切なスタイルを設定する必要があります。このセクションでは、必要なスタイルを1つ1つ説明していきます。
1.1 基本のCSSスタイル
以下は、コンテンツエリア全体を管理するためのCSSスタイルです。必要に応じて、各プロパティを調整することで、デザインを自由にカスタマイズできます。
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
#idBoxWrap{
position:relative;
width:200px;
height:200px;
border:1px solid black;
overflow:hidden;
margin:0 auto;
}
#idBox{
position:absolute;
width:170px;
left:0;
top:0;
}
#idBox p{
line-height:1.6em;
margin:5px;
}
.clLink{
padding:25px 0 0 0;
text-align:center;
}
.clLink a{
text-decoration:none;
border:solid 1px #666666;
padding:5px;
color:#666666;
}
.clLink a:hover{
text-decoration:none;
border:solid 1px #666666;
padding:5px;
color:#ffffff;
background-color:#666666;
}
-->
</style>
上記のコードは、基本的なコンテンツエリアのレイアウトを設定します。ポイントとなる部分は以下の通りです。
- #idWrap：全体の幅を設定し、中央揃えにします。これにより、ページの中心にコンテンツが配置されます。
- #idBoxWrap：コンテンツを表示するボックスエリアのサイズを指定し、内容がオーバーフローする部分を隠します。
- #idBox：スクロール可能なコンテンツが入るエリアです。このエリアの高さや位置を調整します。
1.2 ユーザーインターフェイスのデザイン
リンクのデザインにも工夫が必要です。ユーザーがどのリンクをクリックすればよいか直感的に分かるように、リンクのスタイルを明確にすることが大切です。リンクにホバーすると色が変わるなど、視覚的なフィードバックを与えることで、使い勝手を向上させます。
2. JavaScriptを使ったコンテンツの上下移動
次に、JavaScriptを使って、コンテンツエリア内のテキストや画像を上下に移動させる仕組みを作成します。マウスオーバーで上下にスライドする動作は、setTimeoutを利用して連続的に実行されます。
2.1 JavaScriptの基本ロジック
以下に、上下にコンテンツを移動させるための関数moveを示します。この関数は、マウスオーバー時にコンテンツをスライドさせ、マウスアウト時にはその動作を停止させるように設計されています。
<script type="text/javascript">
function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
} else {
obj.style.top=(spd>0?0:max)+"px";
}
}
</script>
このコードは、指定されたIDの要素（コンテンツエリア）を上下に動かします。spdパラメータは移動の速度と方向を制御します。正の値なら上方向、負の値なら下方向に移動します。
2.2 setTimeoutによるスムーズな動き
setTimeoutは、JavaScriptで一定時間ごとに特定の処理を繰り返し実行するための関数です。この機能を使うことで、スムーズなスクロール動作を実現できます。
3. HTMLでの実装例
最後に、実際にこのスライド機能を使用したHTMLの実装例を示します。この例では、上下にある「↑」「↓」リンクにマウスオーバーすると、テキストがスライドします。
3.1 実装例
<div id="idWrap">
<h1>ボックスエリア内に納まりきれてない情報を<br />「↑」「↓」リンクにマウスオーバーでスライドして表示します。</h1>
<div id="idBoxWrap">
<div id="idBox">
<p>
このボックスに入りきらないテキストや画像を<br />
下にある↑↓リンクで上下にスライドして表示させます。<br />
<br />
「DAD UNION（ダットユニオン）」は「世のお父さんをもっと生きやすく」をテーマにしたWEB技術メディアです。<br>
<br>
ゆくゆくはDAD＝「お父さん」「おやじ」、UNION＝「連合」「組合」で世のお父さん・おやじ同士で組合を作って「こっちだって色々頑張ってんだよ」を主張し春闘し、お父さんの価値を少しでもベースアップしていければと考えております。
</p>
</div><!--/idBox-->
</div><!--/idBoxWrap-->
<div class="clLink">
<a href="#" onMouseover="move('idBox',5)" onMouseout="clearTimeout(move.to)">↑</a>
<a href="#" onMouseover="move('idBox',-5)" onMouseout="clearTimeout(move.to)">↓</a>
</div>
</div>
エリア内に収まりきれないテキストや画像を上下スライドで表示するデモページ
以下のデモページで実際の動作を確認してみてください。
エリア内に収まりきれないテキストや画像を上下スライドで表示するデモページ
ソース元：Dynamic Drive- Scrollable Content script
ソース元：Dynamic Drive- Scrollable Content script
まとめ
JavaScriptを使用したコンテンツの上下スライド表示は、ユーザーエクスペリエンスを向上させるための非常に効果的な手法です。特に、コンテンツが多く、限られたスペースに表示する必要がある場合、このようなインタラクションを導入することで、ユーザーがストレスなく情報にアクセスできるようになります。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
