ブラウザで表現できる動きやデザイン

前へ 次へ
このQ&Aのポイント
  • ブラウザで表現できる動きやデザインについて知りたいです。HTML、CSS、JavaScript以外の言語や技術もあるのでしょうか？
  • ブラウザでの動きやデザインについて、一般的な技術を教えてください。
  • ブラウザでの動きやデザインにおいて、HTML、CSS、JavaScript以外の選択肢はありますか？
回答を見る
  • ベストアンサー

ブラウザで表現できる動きやデザイン

ブラウザで表現できる動きやデザインを、生かすためには どのような言語や技術が選択肢としてあげられますか？ (ブラウザの構造、仕組みを知りたいのではなく、ブラウザはどんな言語を解読してどんな表現ができるのかを知りたいです。） 世の中の、インターネットサイトには、目をひくような動きのある楽しいサイトがあります。 サイトの作り方の入門本を読むと、HTML、CSS、JavaScriptの言語を駆使して 作られていますが、世の中のサイトは、この3点だけで、作られているのでしょうか？ 以下に例を示してみます。 <表現１ 写真切り替え時のなめらかな動き> 以下は音響メーカーのサイト。中央に製品紹介の大きな写真があります。この写真のサイドに矢印があり、クリックすると、次の製品の絵が表示されます。この写真の切り替わり時に、少しずつ写真を変えるような動きがあります。 http://www3.jvckenwood.com/ <表現２ 常に前方に文字を表示> 以下は、ファッションブランドを扱う会社のサイト。ページをスクロールしても常に前方に「chanel news」と表示されています。 http://chanel-news.chanel.com/ja_JP/home.page.3.html#2013_10_making-of-the-press-kit-spring-summer-2014-ready-to-wear <表現３ 前のページを「背景」にして、新しいページを表示する> 以下は、音楽フェスのサイト。ミュージシャンを選択すると、小さなプロフィールページを表示します。 プロフィールページは、ブラウザの真ん中に位置し、プロフィールページで隠せない背景は半透明な膜がかかっているかのようです。http://rsr.wess.co.jp/2013/artists/lineup/index.html これらのサイトは、入門書に乗っているような地味なサイトとはかけ離れています。 アイデアで実現しているのでしょうか？それとも、JS,HTML,CSS以外の方法があるのでしょうか？ 特定のブラウザだけで通用する技術ではなく、一般的な技術をご教授ください。 以上、宜しくお願いします。

  • HTML
  • 回答数1
  • ありがとう数12

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

  • ベストアンサー
回答No.1

ウェブサイトは仰るとおりHTML、CSS、javascriptの3点でデザイン、動きを表現しています。 表現１ これは写真の切り替えに、javascriptとcssを利用しています。 「jquery　スライドショー」で検索してみてください。 javascriptを使用した様々なスライドショーがたくさん見つかります。 表現２ これはHTML＋CSSで作られています。 ヘッダーをブラウザの上から17p下の位置に常に固定し、最前面に表示するように CSSで指定しています。 表現３ これは表現１と同じく、javascriptとcssを利用しています。 ソースを確認するとfancyboxというスクリプトを使っているみたいですね。 これと似たもので有名なものに、LightBox2というものがあります。 他にもCSSだけで作るアコーディオンメニューや、 CSSとjavascriptで作るアコーディオンメニューなど面白いものもありますし、 アイデア次第でいろいろなものを作れるので、気になったサイトのソースを覗いて 調べてみると良いと思います。 IEやChoromeだったら、F12を押せば開発者ツールが表示されて、 気になったところの要素を簡単に調べることができますよ。

beam_mea
質問者

お礼

ご回答ありがとうございます。 やはり、HTML、CSS、javascriptで作っているのですか。 アイデアで実現しているのはすごいですね。 自分は入門者ですが、この分野の奥の深さを感じました。 「jquery」というキーワードも初めて知りました。 色々と勉強になりました。ありがとうございました

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ブラウザを閉じるについて

    現在、Webサイトを運営している者です。 サイトの中に仲間だけが見る事の出来るページを作っているのですが、画面をブラウザの×ボタンではなく、例えば「ログアウト」のようなものを作って欲しいと言われました。 この場合、どの言語を使えばそういったものを作れるのか教えて欲しいのです。 プログラミングの知識は浅いのですが、言語さえ教えて頂ければ私自身で調べられるだけ調べますので、よろしくお願いします。 現在、簡単なCGIとJavaScriptとPHPの書籍は所持しています。入門書ばかりなので凝った事は出来ませんが必要に応じて本の購入も考えています。 私としては、別にサイトに必要な機能ではないのではないかとは思っているのですが出来れば要望にお応えしたいので、どなたか教えて頂ければと思います。宜しくお願いします。

  • ブラウザによって見え方が異なるのはなぜ？

    WEBサイト作成を勉強中の初心者です。 あるウェブサイトのhtml、CSS、jsのソースをすべてそのままコピペしてローカルでプレビューすると Google Chrome では正しく表示されるのにIEでは表示されません。 CSSは効いていますが、jQueryがうまく反映されていないように見えます。 （本来動きの出る個所が静止したままになっている） コピー元のサイトはどのブラウザでも正しく表示されるので ブラウザ毎の対策をとっていない訳ではないと思うのですが なぜなのか原因がわかりません。 自分の予想では、コピー元のサイトを「すべてコピーした」と思っていても 何かの仕掛け（PHP？）でソースが見えなくなっていたりしていて 完全にコピー元と同じ状態でないのかな、と思うのですが・・・ コピー元のサイトと同じように、どのブラウザでも正しく表示されるようにするには どうすればいいのでしょうか？ コピー元のサイトをご覧いただかないと難しいでしょうか。 こうかもしれないよ、という憶測でも構いませんので なにかご存知の方、よろしければ教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ブラウザの戻るボタン

    jQueryで1つのHTMLをcss("display", "block");css("display", "none");を用いて複数ページのように形成したが、css("display", "none");を使用し1ページ目を非表示にし２ページ目を表示させ、1ページ目から2ページ目に偏移したかのように見せて、ブラウザの戻るボタンを押すとファイル上は1つのHTMLのため、このHTMLを表示する前の状態が表示されてしまいます。ブラウザの戻るボタンを押してHTML内の1ページ目を表示する方法ありませんか？

    • ベストアンサー
    • AJAX
  • CSS3で入力してブラウザに反映されない

    10日で覚えるCSS/CSS3入門教室　という本で勉強しているものなんですが、 CSS3を活用するページのタグをそっくりそのまま入力してもブラウザには参考書通り反映されません。 これを反映させるためにはどうしたらよいのでしょうか？

    • ベストアンサー
    • CSS
  • 画像の周りこみ　ブラウザでの表現の違い

    画像の回り込みをcssのfloatで設定して、IE(最新)で確認したところ思ったとおりにできていたので アップロードしました そしてなんとなくネスケ7.1で同じページを見てみると、なんと見事にぐちゃぐちゃでした。そこでalignも試してみましたが結局ネスケ7.1ではグチャグチャでした そこで、思ったのですが １、ネスケとIEで配置の表現を同じにするには相対位置　　か絶対位置を使うしかないのか？ ２、すべての有名ブラウザ(win.macどっちも)に対応して　　いるページを作成するのは不可能なのか？(見た目を　　あまり変えずに) ３、２が不可能だった場合、どのブラウザでの表現に重　　点を置くべきなのか？（みんなが良く使っているの　　はどのブラウザか？） この３点が質問です 私はHTML初心者ですのでもし上３つのような質問をする観念からおかしいとすれば、ご指摘おねがいします

    • ベストアンサー
    • HTML
  • ブラウザーの調子が変な動きをします。

    フリーソフトをインストールしているうちに「advertisement ウイルス」というのにかかったようで、ウイルスバスター2009の1ヶ月無料お試しでを駆除しましたが、その後、ブラウザーの調子が変な動きをします。 検索のクリックを押すごとにブラウザーの中で、右へ行ったり左へ行ったりします。フレームが、左右に分かれて表示されたりもします。 また、「ページを表示できません。」がやたら多く出るし、ブランクページになったりします。 無料でやることはほとんどやったのですが、どうすればよいでしょうか？有料ウイルスソフトで正常に戻るかどうかおわかりでしたら教えてください。ちなみにOSは「Windows XP SP3」ブラウザーは「IE６」検索エンジンは[yahoo][google]を使用しています。

  • ブラウザ依存のボタンのデザインを使いたい。

    cssで特にデザインを設定しない場合に表示されるボタンのデザインを使いたいと思っています。 しかし、ブラウザスタイルの初期化 *{ margin: 0; padding: 0; border: 0; font-style: normal; font-size: 100%; text-decoration: none; } をすると、ボタンがグレー背景ののっぺりしたものになってしまいます。 この状態ですでにページのデザインは完成していますので、ユニバーサルセレクタ内はさわらず、ボタンのデザインをブラウザのデフォルトのデザインで表示させる方法を教えてください。

    • ベストアンサー
    • HTML
  • ブラウザによる表示の違い

    今サイトを作成しています。 ＨＴＭＬ、ＣＳＳをはじめて１年の初心者です。 ブラウザは普段基本的にFirefoxを使用しています。 サイトの表示確認をFirefoxとIE7で行っているのですが２つのブラウザで微妙に表示がずれてしまいます。 色々調べてJavaScriptでブラウザを判別させてそれぞれに対応したページを用意するようなことが書かれていたんですがいまいちやり方がよくわかりません、、 やり方知ってる方助けてください。 もしくは他の対処法があるんでしたら教えていただけると助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 古いブラウザ・・どこまで対応すべき？

    HTML+CSSで、今風の作り方・・（テーブルとかで細工するのではなく、DIVにスタイルをつけたり）でサイトを作りました。IE6、Firefox、NN8など最近のブラウザでは、ほとんど違わず表示できて、うまくいったと思ったのですが・・ ふと思い立って、CSSに一応対応している古いブラウザ（IE5やNN4.7など）で試しに開いてみたら、画像と文字が重なったり、文字の回り込みや寄せが滅茶滅茶で、もはや読める状態ではなくなってしまっていました。 いったい、古いブラウザはどのくらいまで対応したらよいものなのでしょうか？ アクセス解析によると、NN4.7とかIE5とか、未だ使っている人いるようなのですが・・もう、こういう人たちは、ページが崩れて見えることには慣れてる、と割り切ってよいのでしょうか・・。

    • ベストアンサー
    • HTML
  • ブラウザごとのCSSの表示

    CSSはブラウザごとに表示のされかたが変わるとのことで、 それぞれのブラウザ(特にIE)での表示を 自分のブラウザの設定を変えないで(?) 確認できるフリーソフトかウェブページはありますか？ 知ってましたら、教えてください。 お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する