HTML？で作られているのでしょうか…

質問

ホームページを見ると、よく見出し（タブ）のようなものを見ますが
あれは、HTMLで作成してあるのでしょうか？？
たとえばこんな感じで↓

http://oshiete1.goo.ne.jp/goo_search.php3

最新の質問・最新の回答など黄色の部分です。

回答No.6

crepon133

CSSで作るタブ風メニュー その2
http://clockworks-99.taro.boy.jp/?eid=274628

回答No.5

alwayz66

専門的な回答になりますが、ご了承ください。

切り替え自体は、ジャバスクリプトというもので行っています。

そして、ここの切り替える項目にある【質問タイトル】などを簡単に追加してけるようにphpという動的なファイル使っています。

htmlを使うと、自分でいちいちhtmlファイル自身をいじらなければならないですが、phpファイルというものを使うと簡単に文書を追加できるようなプログラムが組めます。

ここはそういったシステムが組まれているページです。

とはいえ「じゃphpを使って簡単に登録できるようにして、ジャバスクリプトで切り替えるの？」となると、それは難しいと思います。

対策としては、htmlをジャバスクリプトを使って、表示を切り替えるのならhtmlを理解していれば可能です☆

見た目は何ら変わりません。動的(phpを使った)ページなのか静的(htmlの)ページなのかの違いです。

特に、やり方がのっているわけではありませんが、下記サイトのソースをみて参考にすればこのようなことが「html＋ジャバスクリプト」のみでできます。

下記URLの誕生月を押せば、下の部分が切り替わるのでご参照ください。

やり方が一から載っているサイトは、見つけれなかったですが、是非ご参考にしてください。

参考URL：

http://www.ishida-flower.com/birthday_flower/

回答No.4

sekiya-h

"CSS" と "list タグ" を使用しています。

リストを利用してリンクボタンを作成 -OKWave
http://okwave.jp/qa3881409.html
リストとスタイルシートを利用してリンクボタンを作成しているのですが///。 -OKWave
http://okwave.jp/qa3928728.html

[Think IT] 第3回：リストタグを試す！ (3/3)
http://www.thinkit.co.jp/article/39/3/3.html
nondelion.com - 画像リンクを横に並べる方法
http://nondelion.com/archives/2007/07/04/0522
WeBlogZine: HTMLの構造化 - リストタグを横に並べる
http://www.weblogzine.com/2004/2005/01/html___2.html

Google [list 横 ボタン]
http://www.google.co.jp/search?hl=ja&rls=GGLL%2CGGLL%3A2008-20%2CGGLL%3Aen&q=list+%E6%A8%AA+%E3%83%9C%E3%82%BF%E3%83%B3&btnG=%E6%A4%9C%E7%B4%A2&lr=

お礼

ありがとうございます。難しそうですが（初心者なので）とても分かりやすいページを紹介して頂いて…。じっくり腰をすえてチャレンジしてみます。

回答No.3

tsucu

#1です。
「このサイトのようなタブの表現をHTMLのみで可能ですか？」
という聞き方の方がよかったですね。
それなら、「可能ですよ」とお答えできます。
単純なターブル組みだけで出来ますよ。

回答No.2

fujillin

回答とは関係ありませんが、HPを表示する際のURLの最後の拡張子をみることで、そのファイルがどのようなファイルであるかおよその見当をつけることが可能です。フレームなどの場合は、わかりにくくなりますが。
サンプルの場合は「．php3」となっていますので、htmlにphp3スクリプトを含むものと想像されるのですが、実際のところはJavaScriptが使われているようですね。

さらに、表示した状態で「ソースを表示」すると、そのhtmなどの記述の内容をみることも可能です。
「ソースの表示」の方法はブラウザによって異なりますが、IEの場合は「表示」-「ソース」となります。
ご自分でいろいろ調べる時の、勉強の足しにでもなればと・・・

お礼

ありがとうございました。HTMLで作成されているのであればチャレンジしてみようと思ったのですが…。難しそうですね。ソースの表示方法知らなかったので、参考になりました。

回答No.1

tsucu

質問の意図が見えませんが、URLのページではHTMLとCSSですね。
それ以外にも、Flashを用いたもの、Javascriptを用いたものなどいろいろでしょう。

補足

意図がみえませんでしたか？では、作成方法を知っている方は是非教えてください。参考ページなどありましたら宜しくお願いします。