photos  写真

写真紹介(それぞれの写真をクリック!)

当社業務の様子の紹介に代え、近隣や出張先で撮影した写真を掲載いたします。それぞれの画像をクリックすると大きな画像をご覧いただけます。


冬の木

秋の高原

朝焼け

秋の紅葉

冬の月

アーケード

鳥海山

冬枯れの木

国会議事堂

神社

ギャラリー風にサムネイルを配置

各々のimg・題名textをdivで囲み、さらに全てをcontainer id="photos"囲んだ。最初、各#photos divにfloat leftを記述したが、#photos divにdisplay: inline-block;を記述しただけでもほとんど同じ効果になるようだったので、そうした。

写真全体のブロックをレスポンシブルに中央寄せしたかったが、なかなかうまく行かない。モニターの幅に合わせてdivのwidthを33%→50%→100%に変更すればいいかと思う。

拡大画像のポップアップについて

<別窓を開かずに その場で拡大画像を表示する4つの方法>を参考にさせていただき、CDN経由で利用可能なLightbox2を使用。

そのためhtml内に3行記述。head内に3行でもいいが、読み込む速さの向上のため1行目をhead内に、2~3行目をbodyの最下部に記述。

正方形のサムネイルを用意し、そこから本画像にリンク。a href="images/007ph.jpg" data-lightbox="ktm_sp"の記述で画像が全部ktm_spグループになり、「<」「>」をクリックすることで次々に見ることができるようになった。