マルシェル新規登録で5000円分当たる

Webサイトの更新履歴のページですが、過去何年分もの更新履歴を1ページに掲載しているので、ページがかなり縦長になっています(文章だけなので、重くはないのですが)。

一応目次から各年度の更新履歴に飛べるようにし、各年度の項目に「ページの先頭に飛ぶ」リンクを貼っているので閲覧には不便しないと思いますが、どうもページが縦長で見づらいのが気に入りません。
何かよい方法はありませんか?

私が考えたのは
・formタグによるプルダウンメニュー
・CSSによるプルダウンメニュー
なのですが、これ以外にありますか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

私なら、コンテンツの抜本的見直しをします。


サイトの内容にもよるので一概に言えませんが、一般的にWebサイトの過去の更新履歴が重要な意味を持つことはありません。つまり、コンテンツの量が減れば、結果的に質問は解決されます。たとえば、アクセス解析で、数年前の更新履歴ページにどれくらいのアクセスがありますか?仮にそれが全体のアクセスの1%だとしたら、1%のために、使いにくいページを提供する必要があるのか、あるいは、それを修正するコストを見る必要があるのか。とか、そんな考え方をします。
    • good
    • 0

たとえば


<div id="UPDATE_LIST">
 <h2>更新履歴</h2>
 <div class="contentTable">
  <ol>
   <li><a href="#Y2012">2012年</a>
    <ol>
     <li><a href="Y2012M1">1月</a></li>
     <li><a href="Y2012M2">2月</a></li>
     <li><a href="Y2012M3">3月</a></li>
・・・・
   </li>
  </ol>
 </div>
 <dl>
  <dt id="Y2012">2012年</dt>
  <dd>
   <dl>
    <dt id="Y2012M01">2012年1月</dt>
    <dd>2010.01.02:<span><a href="">なんとか</a>を更新しました。</dd>
    <dd>2010.01.05:<span><a href="">なんとか</a>を更新しました。</dd>
・・とかだったとします。

スタイルシートにて、#UPDATE_LISTの高さを400px程度にしておいて、その中の目次をその高さいっぱい程度で表示させて、必要ならoverflow:autoにでもしておきます。
#UPDATE_LIST{height:400px;position:relative;}
#UPDATE_LIST div.contentTable{
position:absolute;
width:200px;
top:0;left:0;
overflow:auto;
}
#UPDATE_LIST dl{
margin-left:210px;
orverflow:hidden;/* またはauto */
}

 目次や、それぞれのデータもクリック(:active)やマウスオーバー(:hover,:active)でひがるようにしておいたら見やすいでしょう。
 スタイルシートで、frameもどきを行うと考えれば良いです。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qよくサイトの更新履歴のような形でスクロールできるやつがありますがあれはどうやっているのでしょうか?

個人でサイトを運営しております。

そこで、更新履歴を表示させたいのですが、
よくサイトの更新履歴のような形でスクロールできるやつがありますがあれはどうやっているのでしょうか?

参考になるサイト様などありましたらぜひ教えてくださいm(_ _)m

Aベストアンサー

http://allabout.co.jp/internet/hpcreate/closeup/CU20050922A/index.htm
こちらが参考になると思います。
リンク先にも書いてある事ですが、textareaやiframeを利用した方法は比較的手軽ですが、デメリットもあるのでcssを利用した方法がおすすめです。

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Qホームページにブログ更新情報(RSS)で自動表示させる方法

自分のホームページの更新情報を現在まで手作業で入力していましが、更新頻度が増えるにつれて、大変になってきました。そこで、ホームページは、サイトのトップページとしての役割をさせ、コンテンツは比較的労力のかからないブログで作成していこうと考えています。

そこで、自分の作成したホームページに自分の作成したブログ更新情報をRSSを使ってホームページのトップページにiflameで自動表示させる方法を教えて頂きたいのですが宜しくお願い致します。

私はRSS初心者で、検索をかけても良くわからないので宜しければ教えて頂きたく思います。宜しくお願い致します。

Aベストアンサー

CGIが使えなのならJavaScriptを使うしかないですね。
参考URLにはRSSのURLを入れれば自動的にJavaScriptを吐き出してくれるものです。

参考URL:http://www.moondakota.com/feed/index_u.php


人気Q&Aランキング