井上大河/通信ネットワーク演習

井上　大河

通信ネットワーク演習

演習

＊下記リンクはダミーです。自身のGitHubPageのURLに変更してください

• Blank File : javascript_blank
• Color Change A : javascript_change_a
• Color Change B : javascript_change_b
• Fortune Slip : javascript_fortune
• Gallery : javascript_gallery
• TabUI : javascript_tab
• Object : javascript_object
• Text Animation : javascript_text_animation
• Scroll : javascript_scroll
• Map : javascript_map
• Weather : javascript_weather
  
  
  
  

最終成果物

フォトギャラリー

https://inoue010o.github.io/gyarari/

サイトの趣旨

鳥栖市の魅力を写真で紹介するフォトギャラリーサイト。公園・施設・グルメ・歴史など、鳥栖市の観光名所や地域の魅力をカテゴリー別に閲覧できるビジュアル中心のウェブサイトです。

技法・技術情報

• HTML5（セマンティックマークアップ）
• CSS3（カスタムプロパティ、Flexbox、グリッドレイアウト）
• JavaScript（DOM操作、動的コンテンツ生成）
• 配列とオブジェクトを使ったデータ管理（galleryData）
• イベント処理（画像のクリックイベント、スクロールイベント）
• 条件分岐（カテゴリー別の画像表示制御）
• 固定ヘッダー（position: fixed）
• レスポンシブデザイン（viewport設定）
• Googleフォント（Noto Sans JP）の活用
• Swiper.jsライブラリの使用 -CSS変数を使った一貫したデザイン管理 -背景画像の固定表示（background-attachment: fixed）
• トランジション効果による滑らかなアニメーション ~
  
  

先行事例・参考情報

• Swiper.js公式サイト: https://swiperjs.com/
• Google Fonts: https://fonts.google.com/ -観光地のフォトギャラリーサイトの構成を参考 -モダンWebデザインのトレンド（ミニマルデザイン、カード型レイアウト）を採用
  
  
  
  
  

リンク

公開リポジトリ

• GitHub：https://github.com/Inoue010o/gyarari
  ※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。