• ベストアンサー

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

ホームページ作成について ホームページを見ていると、ページの更新状況などを表示している欄(News)などがありますが、あれってどうやって貼り付ければいいでしょうか? また、無料でしょうか?? 作者のサイトを出すのは失礼かもしれませんが、下記のURLにアクセスして、Domino NEWSの部分みたいなものを張りたいと思っています。 http://takabosoft.com/domino お早目のご回答をお待ちしております。

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.4

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>

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

このサイトは、PHPで動的にHTMLを作成し更新歴を作成しているようですが、通常は単にHTMLを書きます。  HTML自体は、単なる汎用ブロックDIVで囲んだだけで、スタイルシートでスライドバー付きのボックスに見せているだけです。 div#newslist dl { height:150px; overflow-y:scroll; padding-right:15px; } firefoxをお使いなら、fire Bugというアドオンを入れておけば、仕組みは一目瞭然です。

回答No.2

例として載せているサイトさんは、 更新状況部分は <dl> <dt>日付</dt><dd><a href="リンク先URL">内容</a></dd> ・ ・ </dl> のようにリスト形式で並べて、 それをボックスで囲んで、枠とスクロールバーは、スタイルシートで行なっているようですね。 同じようなことは、下記を参考にすれば可能です。 参考 http://www.tagindex.com/stylesheet/box/overflow.html http://allabout.co.jp/internet/hpcreate/closeup/CU20050922A/ 参考サイトさんにも説明がありますが、 フォームのテキストボックス(textarea要素)ではリンクを貼ることができませんので、ご注意を。 リンクを貼るのが不要であれば、テキストボックスでもよいと思います。 >また、無料でしょうか?? どういう意味で「何」が無料、という質問でしょうか? 参考にするだけなら無料で使えます。

回答No.1

タグを貼れば簡単です。 私は、パソコンのメモ帳からつくっています。 リンク先のような格好いい感じではありませんが、 更新履歴などには十分使えると思います。 これだったら、お金はかかりません。 試しに、メモ帳にこれを書き込んで、 HTMLで保存してみてください。↓↓ <textarea rows="4" cols="20"> あいうえお かきくけこ </textarea> ↑↑ 多分、リンク先のように出来るのでは…? もし、こんなものを望んでいたのでなければ、 ごめんなさい。 私は、リンク先のようなものは作れません。 URLを貼っておきましたので、参考にどうぞ!

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

関連するQ&A

専門家に質問してみよう