![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ブラウザで表現できる動きやデザインを、生かすためには
どのような言語や技術が選択肢としてあげられますか?
(ブラウザの構造、仕組みを知りたいのではなく、ブラウザはどんな言語を解読してどんな表現ができるのかを知りたいです。)
世の中の、インターネットサイトには、目をひくような動きのある楽しいサイトがあります。
サイトの作り方の入門本を読むと、HTML、CSS、JavaScriptの言語を駆使して
作られていますが、世の中のサイトは、この3点だけで、作られているのでしょうか?
以下に例を示してみます。
<表現1 写真切り替え時のなめらかな動き>
以下は音響メーカーのサイト。中央に製品紹介の大きな写真があります。この写真のサイドに矢印があり、クリックすると、次の製品の絵が表示されます。この写真の切り替わり時に、少しずつ写真を変えるような動きがあります。
http://www3.jvckenwood.com/
<表現2 常に前方に文字を表示>
以下は、ファッションブランドを扱う会社のサイト。ページをスクロールしても常に前方に「chanel news」と表示されています。
http://chanel-news.chanel.com/ja_JP/home.page.3. …
<表現3 前のページを「背景」にして、新しいページを表示する>
以下は、音楽フェスのサイト。ミュージシャンを選択すると、小さなプロフィールページを表示します。
プロフィールページは、ブラウザの真ん中に位置し、プロフィールページで隠せない背景は半透明な膜がかかっているかのようです。http://rsr.wess.co.jp/2013/artists/lineup/index. …
これらのサイトは、入門書に乗っているような地味なサイトとはかけ離れています。
アイデアで実現しているのでしょうか?それとも、JS,HTML,CSS以外の方法があるのでしょうか?
特定のブラウザだけで通用する技術ではなく、一般的な技術をご教授ください。
以上、宜しくお願いします。
No.1ベストアンサー
- 回答日時:
ウェブサイトは仰るとおりHTML、CSS、javascriptの3点でデザイン、動きを表現しています。
表現1
これは写真の切り替えに、javascriptとcssを利用しています。
「jquery スライドショー」で検索してみてください。
javascriptを使用した様々なスライドショーがたくさん見つかります。
表現2
これはHTML+CSSで作られています。
ヘッダーをブラウザの上から17p下の位置に常に固定し、最前面に表示するように
CSSで指定しています。
表現3
これは表現1と同じく、javascriptとcssを利用しています。
ソースを確認するとfancyboxというスクリプトを使っているみたいですね。
これと似たもので有名なものに、LightBox2というものがあります。
他にもCSSだけで作るアコーディオンメニューや、
CSSとjavascriptで作るアコーディオンメニューなど面白いものもありますし、
アイデア次第でいろいろなものを作れるので、気になったサイトのソースを覗いて
調べてみると良いと思います。
IEやChoromeだったら、F12を押せば開発者ツールが表示されて、
気になったところの要素を簡単に調べることができますよ。
ご回答ありがとうございます。
やはり、HTML、CSS、javascriptで作っているのですか。
アイデアで実現しているのはすごいですね。
自分は入門者ですが、この分野の奥の深さを感じました。
「jquery」というキーワードも初めて知りました。
色々と勉強になりました。ありがとうございました
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- au(KDDI) 「カメラへのアクセスを許可してください」のせいで年齢確認書類を撮影できない、アップロードできない 2 2022/11/01 00:04
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- その他(インターネット接続・インフラ) ★ 同じURLなのに、ブラウザを変えると表示が異なる〜// 先日、Chromeで入力した同じURLを 1 2023/07/03 13:29
- 英語 関連性のない2つの名詞を「a pair of~」で表現する理由について 4 2023/07/19 10:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
slideToggleの動きがおかしい
-
JavaScriptで ブラウザの閉じる...
-
VBS作動中のブラウザのmsgboxに...
-
javascriptで「オブジェクトを...
-
ASP(VBS) ←→ JavaScript の変数...
-
if(1){...}とはどういうことで...
-
JSPの処理の途中で、JavaScript...
-
ページを一回だけリロードさせ...
-
初心者です。gulpでコンパイル...
-
WebページまたはHTMLソースから...
-
csvファイルを読み込み、該当項...
-
エクセルVBA/ Formatで文字列が...
-
計算結果が毎回違う。
-
1つのVBAコードをすべてのコア...
-
ローカルフォルダにあるPHPファ...
-
jQuery ui Datepicker 明日以降...
-
「終了していない文字列型の定...
-
javascriptのis null or not an...
-
助けてください!スパムメール...
-
VBScript から JavaScript を呼...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで ブラウザの閉じる...
-
ASP(VBS) ←→ JavaScript の変数...
-
javascriptで「オブジェクトを...
-
slideToggleの動きがおかしい
-
JavaScriptでIEのウィンドウを...
-
ブラウザ自体の事じゃなくてJav...
-
JavaScriptのVersionは、ブラウ...
-
F5の更新を無効にしたい
-
ウインドウがアクティブか調べ...
-
iPhone用とPC用のホームページ ...
-
iframeで開かれた時だけredirect
-
あるurlが存在する(?)かどう...
-
初めて投稿させていただきます。
-
JSを使ったカレンダーの不具合...
-
カーソルの上に十字架
-
JavaScriptを使えない環境につ...
-
DVD Studio Proでのスクリプト
-
HP内での操作について
-
JAVAスクリプト(マウスストー...
-
javascript(JQuary)について質...
おすすめ情報