お知らせ★橋カード一覧ページ
2021-11-26
1250
![](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/0FF6D4F0-657C-46E8-9CE3-2C7E69E2EFC8.jpeg)
![](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/0FF6D4F0-657C-46E8-9CE3-2C7E69E2EFC8.jpeg)
![](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/0FF6D4F0-657C-46E8-9CE3-2C7E69E2EFC8.jpeg)
先日のマンホールカード一覧ページに続き、HTMLとCSSのお勉強をしながら新たなページを作成しました。
同じく出会いのきっかけは道の駅巡り、橋カードです。
http://manhole.natsume-ichigo.xyz/manhole.html
トップのメニューカテゴリ>コレクションからも行けます。
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1ED40DDF-3AB4-445E-B7FE-54656B8484A1-655x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1ED40DDF-3AB4-445E-B7FE-54656B8484A1-655x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1ED40DDF-3AB4-445E-B7FE-54656B8484A1-655x630.jpeg)
今回はさらに自己満足のページ。
画面トップでゲットした橋カードの画像がひたすら流れます。
(CSSアニメーションに挑戦したかったので…😆)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/B7AC1DFB-F610-4F56-9F34-AC6DCA780430-625x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/B7AC1DFB-F610-4F56-9F34-AC6DCA780430-625x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/B7AC1DFB-F610-4F56-9F34-AC6DCA780430-625x630.jpeg)
橋の名前とカード配布場所のみ記載ですが、クリックするとカードをもらった時のブログへ飛びます。
延々と画像が流れ続けますが、これまでゲットしたカードは意外に少なく8枚でした😅
偶然出会えたらラッキー🤞🏻😁位の温度感なので、新しいカードをゲット次第のんびり更新していきます。
ページ下には県ごとのカード画像をまとめていて、クリックするとカード裏面の画像が拡大表示されます。
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1B2A82B2-0AF2-4962-A8FB-B24A93BF0FFF-378x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1B2A82B2-0AF2-4962-A8FB-B24A93BF0FFF-378x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/1B2A82B2-0AF2-4962-A8FB-B24A93BF0FFF-378x630.jpeg)
こちらはjQueryで作成📝
JavaScriptの勉強が中途半端なところで止まって(サボって)いましたが…jQueryが楽すぎて驚きました!
でもやっぱり基本からちゃんと覚えないとな〜と思う今日この頃。
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/767D2219-3B33-4B5D-B108-C1F109D0349B-545x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/767D2219-3B33-4B5D-B108-C1F109D0349B-545x630.jpeg)
![橋カード一覧](https://www.natsume-ichigo.xyz/wp-content/uploads/2021/11/767D2219-3B33-4B5D-B108-C1F109D0349B-545x630.jpeg)
趣味兼仕事の為の勉強として引き続きhtmlで、ダムカードや道の駅記念きっぷのコレクションページもこの先いつか作成したいと思います。😚