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

サイトのヘッダー等にある動的コンテンツはどうやって作っているのでしょうか?

ウェブ制作をしています。簡易な動的コンテンツを使いたいのですが、
何を(プログラミング言語など)勉強すればよいのかわかりません。

「簡易な動的コンテンツ」として、下記に3つの例を挙げます。

このサイト→http://welself.com/
のヘッダー部分に使われている動的コンテンツや、

このサイト→http://www.oitasekijyuji.jp/
のヘッダーのメニューの、
マウスオーバーすると色彩が変化するコンテンツ、そして、

このサイト→http://www.tripadvisor.jp/
のヘッダーのメニューの、
マウスオーバーするとサブメニューがプルダウンされるコンテンツなどです。

Javascriptなどを使っているのでしょうか。

私は何をキーワードにして勉強すればよいのでしょうか?

●質問者: ak2ey4
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● ネット素浪人
●75ポイント

これから、ウェブデザイナーを目指されるのでしょうか。あるいはウェブエンジニアを目指されるのでしょうか。HTMLは可読性のあるソースコードをUAに読み込ませて表示する技術です。
まずはソースコードを確認することから始めましょう。
ソースコードを見て、まったく解らないと言うことであれば、先ず HTML/CSS を勉強してください。
ソースコードは何となく解るんだけど、ソースコードから動的な表示が解らないと言うことであれば JavaScript を勉強してください。
ウェブエンジニアを目指されるのであれば、PHP, MySQL なども勉強する(理解する)必要があるでしょう。動的生成コンテンツが増えており、昔ながらの1ファイル分を作成してFTPアップロードするスタイルは減っているからです。

デザイナーを目指されるのでなければ、HTML/CSS から手を付けて行くと言うのは、ありきたりな回答にはなりますが、必須だと思います。


2 ● bg5551
●75ポイント

HTMLは恐らく理解されていると思いますので、無難なところではPHP、CSS、Javascriptと言ったところを学習されると良いですよ。
動的コンテンツだけに限ればPHP、Javascriptどれでも実現可能です。
先ずはどれか一つを覚えておけば大体のことはできます。
それで出来ない事があれば別の言語をおぼえて行きましょう。


3 ● gizmo5
●75ポイント ベストアンサー

質問に挙げられた例を調べました。

このサイト→http://welself.com/
のヘッダー部分に使われている動的コンテンツや、

jQuery という javascript のライブラリを使って実装されています。
最近あちこちで使われている有名なものでサンプルもたくさんあります。

このサイト→http://www.oitasekijyuji.jp/
のヘッダーのメニューの、
マウスオーバーすると色彩が変化するコンテンツ、そして、

十年以上前から使われているような基本的な javascript で HTML を変える方法が使われています。
三つの中では一番簡単な実装です。

このサイト→http://www.tripadvisor.jp/
のヘッダーのメニューの、
マウスオーバーするとサブメニューがプルダウンされるコンテンツなどです。

この会社(トリップアドバイザー)で独自にライブラリを作って動かしています。
メニューの部分だけではなくいろいろな機能がありそうです。


例で挙げられたサイトでは、たまたま javascript で全て実装されていますが動的なコンテンツを作成する方法は他にもあります。
・Flash
HTML5 の登場で駆逐されるであろうと言われながら、まだまだ使われています。
一番目の例で挙げられたような画像を切り替えたりするようなタイプには向いています。
ゲームも作れるのはご存じかと思います。

・アニメーションGIF
画像のぱらぱら漫画を作るような感じです。
ユーザの操作に応じて動作を変えるようなものは無理ですが、流しっぱなしのアニメーションを作るような場合にプログラムの知識が必要ありません。

・CSS3
スタイルシートだけでもアニメーションを作ることができます。
例で挙げられた一番目の画像を移動させたり二番目のサイトのような画像を切り替えるようなことができます。


4 ● sin3364
●75ポイント

初心者向けJavaScript学習法

関連質問

●質問をもっと探す●



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