技術シェアサイト

制作目的

• 本webサイト制作では、スクールでの学習を通じて習得した各技術の理解度と、それらを用いて制作したアウトプットをまとめたものです。各言語の特性を理解し、目的に応じた技術選定と実装ができるようになることを目標に制作を行いました。

ページ構成

• トップページ
• CSSのみのハンバーガーメニュー実装紹介ページ
• swiper.jsを用いたスライダーの実装方法紹介ページ
• PHPを用いたchatアプリの実装紹介ページ

使用技術

• HTML
• CSS
• JavaScript
• PHP

制作期間

約4週間

工夫した点

• CSS｜JS不要のハンバーガーメニュー・・・チェックボックスの擬似クラス（:checked）を活用し、JavaScriptを一切使用せずに開閉動作を行うメニューを実装しました。 【工夫した点】 スクリプトに依存しないため、ブラウザ負荷が低く、動作が極めて軽量なのが特徴です。CSSの遷移（transition）を使い、アイコンが滑らかに「×」へ変化する視覚的な心地よさを追求しました
• JavaScript｜Swiper.jsによる高機能スライダー・・・世界的にシェアの高いライブラリ「Swiper.js」を導入し、レスポンシブ対応済みの画像スライダーを実装しました。 タッチ操作やページネーションなど、ユーザー体験（UX）を高める実用的な設定を行っています。
• PHP｜動的なチャットアプリケーション・・・PHPを用いたサーバーサイド処理により、ユーザーが投稿したメッセージをリアルタイムに表示するチャット機能を構築しました。 【工夫した点】 「入力→処理→表示」というWebシステムの根幹を実装。特にセキュリティ面を意識し、サニタイジング（無害化）処理を施すことで、安全にデータをやり取りできる仕組みを体系化しました。

対応デバイス

PC・スマートフォン