人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

こんにちは。HTML初心者です。
宜しくお願いします。

iTunesのミュージックリストのように、
左側がメニューがあって、右側にコンテンツがずらーと並ぶようなレイアウトを作りたいです。

そこで、例えばコンテンツの数が動的に変化するような場合、
数に応じてコンテンツの背景画像やテキストの数の数も動的に増やす必要があると思うのですが、その方法が分かりません。

つまり、コンテンツ数が"3"と指定されれば、3つ分だけ背景画像とテキストを用意し、
その後、"5"と入力されればすれば5つ分だけ背景画像とテキストを用意するように変化させたいのです。

初心者なのでとんちんかんな質問で分かりにくいかもしれませんが、どうぞ宜しくお願いします。

●質問者: kzy1201
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML iTunes こんにちは とんちんかん コンテンツ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● onigirin
●27ポイント

HTMLだけでは「動的」には出来ないと思います。

JavaScriptや、cgi/phpというプログラムを組み合わせることで、

「動的」なサイトができます。

この場合、右のコンテンツ数が増減したら、

その都度自動的に3つなら3つ、

5つなら5つの内容を出力できます。

iTunesみたいなことをするとしたら、

元になる音楽のデータをcsvファイルなどで用意し、

それをプログラムで読み込み、

そして出力する、という流れになりそうです。


ここに、cgiというプログラムのデータベースソフトがあります。

設置すると、web上に簡易的にデータベースを作れて、

検索したり一覧表示とかできます。

http://www.cgi-amigo.com/database.html


HTMLだけだと「動的」にならないので、

何か自動的に反映させたい、ということがあれば、

「 cgi 」や「 php 」や「 javascript 」というものを

組み込んでみてください。

初めは難しく感じますが、

フリーのプログラムが沢山あるので、

設置したりしていると慣れてきますよ。

◎質問者からの返答

早速の回答ありがとうございます。


現在はHTMLとCSSとJavaScriptのファイルを作って作成しています。


コンテンツの取得は別途取得する仕組みを考えてるのですが、cvsファイル読み書きと仕組みは同じだと思います。


全てについて知識レベルが初心者なのが痛いのですが、ではJavaScriptを用いて実現するにはどうすればよいのでしょうか?


色々Webを巡回したのですが分かりませんでした。

すいませんが、どうぞ宜しくお願いします。


2 ● onigirin
●27ポイント

ご質問の内容からは、

「なにをしたいのか?どういうものか?」

というのがいまいち想像できなくて

具体的にどうすればいいか、まではわからないです。

回答数の制限とコメント欄がかけないので

この回答で終わりになってしまいますが、

「こういうことがしたい」

と詳しく書いておくと、

的確なアドバイスをいただける事が多いです。


もし、いろいろ裏の仕組みは考えていて、

「サイト上で表示する方法」

でお悩みの場合は、

ajax

で検索してみるといいかもしれません。

これは、ジャバスクリプトで表現できる仕組みの呼び方のようなものです。

いろいろサンプルが載っていますので、

もしかしたら参考になるかもしれません。

http://e0166.blog89.fc2.com/blog-entry-217.html

◎質問者からの返答

再度ありがとうございます。

質問に具体性がないですか・・難しいですね。

ajaxの言葉は知ってますが、もっと簡単にできないのかとも思います。

色々自分で調べてみます。

どうも有り難うございました。


3 ● Mook
●26ポイント

技術的な部分の概要はすでに、先の回答者がされていますが、

Ajax 動的テーブルの書き換え

にはサンプルコードもありますので、具体的なイメージとして参考にならないでしょうか。


どの程度簡単なものをイメージされているかわかりませんが、JavaScript をご存知であれば、概要は理解できるかと思います。

基本操作な動的要素の変更操作は createElement などで追加する要素を作成し、insertBefore や appendChild で表示中の内容に付け加えるような処理になります。

とほほのJavaScriptリファレンス DOM 要素を作る



ライブラリもありますが、一度上記のような基本操作を理解したうえで利用された方が良いかと思います。

Ajax対応ライブラリを利用しよう

◎質問者からの返答

回答ありがとうございます。

自分は基礎的な知識がかけているようですので順番に学んでいこうとおもいます。

どうもありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ