Lesson2:ギャラリーセクションを実装しよう

この記事ではサイトの上記画像部分を実装していきます。

実装手順
  1. サイトを開き検証ツールを利用してコードを確認する
  2. HTML,CSSファイルにコードを追記する

実践

 

まずはHTML,CSSを模写してみましょう。

今回はかなり難易度が高いですので、解答を見て進んで頂いて大丈夫です。


次にLightboxを使用するために必要となるCSSとjsファイルをダウンロードしてきて、headタグ内で読み込んでください。

Lightboxとは画像をクリックした時にポップアップとして表示させる機能です。「lightbox 使い方」などで検索して必要になるCSS、jsファイルをダウンロードしてきてheadタグ内で読み込んでください。

こちら分からなかった場合は、answer>Lesson2下にあるCSS,js,imagesフォルダを全てコピーし、practiceフォルダ下に配置して下さい。

けんぞう

お疲れ様でした!今回のレッスンは以上となります。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です