HPでの画像の表示方法について

前へ 次へ
このQ&Aのポイント
  • HPの画像表示についてご教授ください。最近、画像をクリックすると背景が薄く暗くなり、画像が前面に開くような表示をするサイトが増えています。
  • このような画像の表示の方法はCSSやJavaScriptを使用して実現することができます。
  • 具体的な方法については、参考URLのサイトをご覧ください。
回答を見る
  • ベストアンサー

HPでの画像の表示方法について

HPの画像表示についてご教授ください。 最近、下記に記載させていただいた、参考サイトのように 画像をクリックすると背景が薄く暗くなり、画像が前面に開くような 表示をするサイトが増えてきています。 最初はFlashで作成しているのかな？と思っていたのですが、どうやら違うようです。 このような画像の表示のさせかたをするにはどのように実現するればよろしいのでしょうか？（CSS？、JavaScript？） ご存じの方がいらっしゃいましたら、ご教授お願いいたします。 --「参考URL」------- http://www.tbs.co.jp/rookies08/gallery/ http://www.dreamofficial.com/news/detail.php?id=1210862632 --------------------

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

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

参考URLのソースを見ると分かると思いますが、 使われているのはLightbox（JavaScript）ですね。 <script src="../js/lightbox.js" type="text/javascript"> Lightbox http://journal.mycom.co.jp/articles/2007/06/14/lightbox/ （このほかにも、Lightboxで検索してみるといろいろ情報が見つかります。）

piguemon
質問者

お礼

panto-maim様 ご教授ありがとうございます。 なるほど、Lightboxというものがあるんですね！ 知らなかったので、さっそく色々調べさせていただきました。 導入もさほど難しそうではなく、私でも導入してみる気になりました♪ 早急なご回答本当にありがとうございました。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • 【HP制作】画像を画面いっぱいに表示したい

    こんにちは。 質問させていただきます。 現在、サイト制作の勉強をしています。 ブログ記事の中にある画像をクリックすると、灰色に透過されたレイヤーと画像が画面いっぱいに最前面に現れる機能を実現したいのですが、やり方がわからなく困っています。 javascriptを使う？方法だと勝手に推測しているのですが、それ以外は...です。 下記のサイトを参考にしています。（記事中の画像をクリックすると確認できます。） http://blog.honeyee.com/mmizoguchi/ とても基礎的なこととは思いますが、ご教授頂けたら幸いです。 宜しくお願い致します！

  • 画像の一部分をスクロールして表示する方法

    画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト：http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。

  • 背景画像を前面に表示させる方法

    cssで画像を設置する場合、背景としてhtmlで書かれた部分の後ろに 画像が表示されますが、 逆に、htmlで書かれた部分を視覚的に消して、 cssで背景画像を前面に表示させる方法はありますか？ htmlでやれば早い話なのですが、理由があってcsｓで表示させたいのです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ロールオーバーで隣の画像の表示を変えるには。

    まずは以下のサイトのナビゲーションバーの下のメインイメージ部分をご覧ください。 http://panasonic.co.jp/excelstaff/ 「事務系派遣・紹介予定派遣」や「エンジニア派遣・紹介予定派遣」にカーソルを合わせると、 左横の画像が変わります。 更にオンマウス時にバーにアニメーションが発生します。 [アニメーション内容] 半分半分だった色が一色に統一されます。 これはFlashによるものだと思いますが、 参考になるサイトや書籍等ございましたら、是非ご教授ください。 なお、Flashは使用せず、つまりアニメーションは使用せず、 CSSやJavascript等を使用して、 左横の画像を変えるやり方も調べています。 併せて、参考になるサイトや書籍等、ご紹介願います。

    • ベストアンサー
    • Flash
  • divの背景画像を、徐々に表示させるには？

    トップページに、２つのdivボックスを設置し、 それそれの背景画像をcssで、リピートさせるようにします。 さらに、それぞれのdivの背景画像が、 徐々に表示されるようにしたいのですが、 cssや、javascriptで可能でしょうか？ （最初は真っ白→だんだん背景画像） 可能でしたら、その方法を御教えいただけますでしょうか！ Flash使用は、考えておりません。 よろしくおねがいいたします。

  • 特定の画像を非表示にする方法

    CSSかJavascriptを使って、自動的にページに組み込まれてしまう画像を非表示にしたいです。 ソースに特定の画像を非表示にする内容を書き込むと思うのですが・・（非表示にする画像のURLを指定？） よろしくお願いいたします。

  • Flashの画像表示方法？

    どこで見たかは忘れてしまいましたが ブログ上の画像やウェブ上の画像ギャラリーで 画像を左クリックで選択すると ブラウザの画面が透けた状態で薄暗くなり 中央に動画読み込み前によく出る 円形のマークが一瞬出て、そのあとに選択画像が 拡大表示されるのがあったんですが その動きがやけにスムーズだったのが記憶にあります。 最近、ホームページやブログ、ウェブフォトギャラリー作成に 興味があって、記憶を頼りに探しているのですが 見つかりません。 そのＦｌａｓｈ？、機能を使っているサイトや ブログに心当たりのあるかたがいたら教えて いただけませんでしょうか。

  • アイキャッチ画像の実現方法

    下記のサイトにあるようなアイキャッチ画像をFlashで作りたいのですが、 どのように実装したら実現できるでしょうか。。 ほぼ同じものを作りたいです。 参考サイト： http://www.palmore.or.jp/ 参考書などを見ながら、あれこれ考えてはみたものの…かなり苦戦しています。 ざっくりと、以下のような流れのイメージはあるのですが。。 ・MovieClipを3つ用意 ・ActionScriptで画像ファイルを読み込んで表示 画像を一枚、普通に表示させるところまでしか進んでいません。 画像をゆっくりなめらかに、左から順に表示させる部分の実装方法が 調べたのですがなかなかわからないです。 少しでもヒントを得られれば…と思っています。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • JavaScriptでの画像切替について。

    以下のようなことをしたいのですが、方法が分からず困っています。 http://www.astellas.com/jp/ メニューの上にマウスがくると、下の画像が切り替わる。 http://www.mos.co.jp/index.html メニューの上にマウスがくると、プルダウンのメニューが表示される。 上の２つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。 JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。 上の２つを実現するのは、今は諦めたほうが良いでしょうか？ JavaScript以外でも実現可能だったら教えていただけないでしょうか？ (※FLASHは除く。例えばCSSなど) よろしくお願いします。

  • 画像の表示について

    現在個人でHPを持っているのですが 近々デザインを変えようと思っています。 今はギャラリーの表示方法を ギャラリーのメニューと画像を表示させるページを フレームで区切って展示しているのですが、 少し違った表示方法というかもっと見やすいようにと思い いろいろとサイトをまわっていいなと思ったものがあったので 調べてみようと思ったのですが、 まだまだ講座サイト頼りな初心者なので まずどういうもので表示されているのかが分からず。 検索も思うようにできないでいます。 もし、知っておられる方がいましたら 是非教えていただきたいと思い質問させていただきました。 アイコン（サムネイル？）をクリックすると同窓で拡大（原寸）画像が表示される というもので添付画像のような感じの表示方法？なのですが （わかりにくくてすいません；） どういったもの（HTML・javaなど）で表示されているのかご存知な方是非教えていただきたいです。 また、HP作成について今後勉強したいと思っているので 参考にできるようなお勧めのサイトや本などありましたら一緒に教えていただけると嬉しいです。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する