第13回勉強会

日　時：
2014年11月26日　13:30～16:30
場　所：
アワーズ 研修室
出席者：
福田、小野、河野、古屋、土生、山縣（敬称略）

小さい画像をクリックで大きい画像を表示

JavaScriptを用いて、サムネイルを複数並べて各サムネイルをクリック すると、その下に額に入った大きいサイズの画像を表示する方法をお勉強しました。

手順

  • ファイル名をxxx_08_1.jpgからxxx_08_5.jpgと連番にした５枚の写真を各自の「img」フォルダに保存する。
  • サイトから新規ページを開き、「http://www.d3.dion.ne.jp/~tiyoko01/java/gazou/sample8.html」に従い、必要ソースをコピペし、名前を付けて保存する。
  • 「小さな画像ファイル名1」を「../img/xxx_08_1.jpg」に書き換え、サムネイルにするサイズのwidthと heightを指定する。
  • 「大きな画像ファイル名1」を「../img/xxx_08_1.jpg」に書き換える。
  • ５枚の写真について同様に処理する(コピペし番号を書き換える)。
  • p要素の枠線を指定した部分を削除し、pにIDを設定する。
  • 「"最初に表示されている画像"」を「"../img/xxx_08_1.jpg"」に書き換え、widthと heightを保存した写真の大きさにする。
  • CSSを設定して体裁を整える。
    全体をdivで囲みIDをcontainerとする。
    直下にdiv IDをheaderを挿入する。
    本体部分をdivで囲みIDをcontentsと末尾に各自のＴＯＰに戻るリンクを設定する。
    div IDをfooterを挿入する。
    CSSの一例
body font-family メイリオ, sans-serif
padding 0px
margin 0px
font-size medium
div#container margin auto
width 720px
div#header background-color silver
width 100%
height 50px
margin-bottom 20px
div#contents margin-bottom 20px
width 100%
#footer color white
background-color black
width 100%
height 20px
font-size 80%
text-align center
h1 font-size 24px
line-height 50px
text-align center
p#large img border 10px ridge #cccc66
p#modoru text-align center
margin-top 10px