コース: ウィークリー Web デザインシリーズ

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

CSS3で、マウスオーバー時に、画像の上にコンテンツをスライドアップさせてみよう！

CSS3で、マウスオーバー時に、画像の上にコンテンツをスライドアップさせてみよう！

コース: ウィークリー Web デザインシリーズ

1ヶ月の無料トライアルを開始 法人向けサービス

CSS3で、マウスオーバー時に、画像の上にコンテンツをスライドアップさせてみよう！

“

こんにちは、渡辺知規です。 今週は CSS3 の新機能を使って マウスオーバー時に 画像の上にコンテンツをスライドアップ させる方法について解説していきます。 まずはダウンロードしてきたこちらの css3-mouseover-slideup という フォルダーの中に入っている この index.html ファイルと この index.js ファイルを エディターで開いてください。 そしてこれがそれらのファイルを 開いた状態です。 これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います。 ではまず、今回のレッスンの完成した状態を ブラウザで確認してみたいと思います。 これらのファイルをサーバー上 ないしは PC 上に設置して そしてブラウザで この index.html にアクセスします。 これが、その index.html に アクセスした状態です。 このように今ここに画像が１枚あって その上に画像のタイトルのような ものが表示されていますね。 そしてこの画像の上に このマウスカーソルを移動させると このように下からコンテンツが ぐっと上にスライドされてきて そして中のコンテンツが表示されてきます。 そしてこのマウスカーソルを この画像から離すと このようにまた元の状態に戻る といった形になっています。 今回はこの作り方について 見ていきたいと思います。 ではエディターに戻ります。 ではまず、こちらの index.html の方を 見ていきましょう。 まずこちらのファイルでは この body タグの中 こちらの部分に先ほど確認した 画像と説明文の記述がなされています。 まず大きく div で囲って その中に画像を１枚設置します。 そしてその下に dl タグで囲って dd タグの中には先ほど確認した このテキストが入っていて そしてこの dd タグの方は スライドアップして表示された コンテンツの方が このように記述されています。 そしてこちらの部分では jQuery を読み込んでいますね。 今回はこのマウスを載せたときや マウスを離した時の判定を行うために jQuery を使っています。 ですので、このように jQuery を読み込んでいます。 そして次にこちらの部分では その画像の上にマウスが載ったときの処理…

目次