ホームページ作成について

ホームページ作成について

ホームページを見ていると、ページの更新状況などを表示している欄（News）などがありますが、あれってどうやって貼り付ければいいでしょうか？

また、無料でしょうか？？

作者のサイトを出すのは失礼かもしれませんが、下記のURLにアクセスして、Domino NEWSの部分みたいなものを張りたいと思っています。

http://takabosoft.com/domino

お早目のご回答をお待ちしております。

No.4 ベストアンサー 回答者： naokita 回答日時： 2010/04/09 23:04

CSSを利用

■　head内もしくは外部CSSに ---------
<style type="text/css">
#news {
background:#F7F6F4;
padding:0.5em; margin:1em;
width:360px;
height:80px;
overflow-y:scroll;
border:1px solid silver;
}
#news p {margin:0; padding: 0 0 1em; font-weight:bold;}
#news dl {margin:0;padding: 0;}
#news dl dt { float:left; width:7em; clear:left;}
#news dl dd {
border-bottom:1px solid white;
margin: 0 0 0.6em 0;
padding-bottom:0.3em;
padding-left: 8em;
}
</style>

■　HTMLに ------------------
<div id="news">
<p>NEWS</p>
<dl>
<dt>2010/04/10</dt><dd>晴れでした。</dd>
<dt>2010/01/23</dt><dd>大雪でした。</dd>
<dt>2009/09/17</dt><dd>台風で大雨でした。</dd>
<dt>2009/09/10</dt><dd>秋晴後、夕立でした。</dd>
<dt>2009/08/20</dt><dd>台風で大雨でした。</dd>
</dl>
</div>

No.3 回答者： ORUKA1951 回答日時： 2010/04/09 23:01

このサイトは、PHPで動的にHTMLを作成し更新歴を作成しているようですが、通常は単にHTMLを書きます。

　HTML自体は、単なる汎用ブロックDIVで囲んだだけで、スタイルシートでスライドバー付きのボックスに見せているだけです。
div#newslist dl {
height:150px;
overflow-y:scroll;
padding-right:15px;
}

firefoxをお使いなら、fire Bugというアドオンを入れておけば、仕組みは一目瞭然です。

No.2 回答者： panto-maim 回答日時： 2010/04/09 22:40

例として載せているサイトさんは、

更新状況部分は
<dl>
<dt>日付</dt><dd><a href="リンク先URL">内容</a></dd>
・
・
</dl>
のようにリスト形式で並べて、
それをボックスで囲んで、枠とスクロールバーは、スタイルシートで行なっているようですね。

同じようなことは、下記を参考にすれば可能です。

参考
http://www.tagindex.com/stylesheet/box/overflow. …
http://allabout.co.jp/internet/hpcreate/closeup/ …

参考サイトさんにも説明がありますが、
フォームのテキストボックス（textarea要素）ではリンクを貼ることができませんので、ご注意を。
リンクを貼るのが不要であれば、テキストボックスでもよいと思います。


>また、無料でしょうか？？

どういう意味で「何」が無料、という質問でしょうか？
参考にするだけなら無料で使えます。

No.1 回答者： draco_love 回答日時： 2010/04/09 21:59

タグを貼れば簡単です。

私は、パソコンのメモ帳からつくっています。

リンク先のような格好いい感じではありませんが、
更新履歴などには十分使えると思います。
これだったら、お金はかかりません。

試しに、メモ帳にこれを書き込んで、
ＨＴＭＬで保存してみてください。↓↓
<textarea rows="4" cols="20">
あいうえお
かきくけこ
</textarea>
↑↑
多分、リンク先のように出来るのでは…？
もし、こんなものを望んでいたのでなければ、
ごめんなさい。
私は、リンク先のようなものは作れません。

ＵＲＬを貼っておきましたので、参考にどうぞ！

参考URL：http://www2.netwave.or.jp/~nontan7/