キャリアブレイク / フルスタック・ウェブ開発者
レスポンシブなマルチページウェブアプリ
📚 コードとクリエイト このプロジェクトは、HTML、CSS、そしてバニラJavaScriptを使用して作成された、完全レスポンシブのマルチページウェブアプリです。モダンなデザインと動的なコンテンツ、さらに高度なCSSテクニックを駆使して、サイトの見た目と機能性を向上させています。 🚀 機能 ナビゲーションバー - 固定ナビバー: ページのトップに固定されたナビゲーションバーで、主要セクションへのアクセスを容易にします。 - レスポンシブドロップダウンメニュー: 各メインメニュー項目にはドロップダウンメニューが含まれています。 🍔 レスポンシブハンバーガーメニュー - モバイルナビゲーション用にカスタムデザインされたハンバーガーメニューは、画面サイズに応じて動的に調整されます。 🌍 スムーズスクロール - セクション間のナビゲーションを向上させるため、スムーズスクロールを追加し、シームレスなユーザー体験を提供します。 🌐 クロスブラウザ互換性 - 複数のブラウザでテストし、一貫したパフォーマンスとスタイリングを確認。特に`select`入力要素に注力しています。 📱 完全レスポンシブ対応 - メディアクエリを使用し、すべての画面サイズで最適な表示を確保。対応サイズは以下の通りです： - **1920x1080** (デスクトップ) - **1600x900** (デスクトップ) - **1440x900** (デスクトップ) - **1366x768** (ラップトップ) - **1280x780** (ラップトップ) - **1024x768** (タブレット) - **820x1180** (タブレット) - **768x1024** (タブレット) - **430x932** (モバイル) - **393x932** (モバイル) - **375x667** (モバイル) 🎨 高度なCSSテクニック - **Flexbox**と**絶対配置**を使用して、構造的なレイアウトを作成し、効果的に要素をスタイリングしました。 - 独自のカラースキームを持つ**カスタムスクロールバー**を実装し、デザインに個性を加えました。 📂 動的プロジェクトセクション - JavaScriptを使って、カテゴリごとにプロジェクトをフィルタリングできるギャラリーを提供しています。 🎥 ビデオプレーヤー統合 - 再生、停止、音量調整、再生速度のオプションを含む、完全なコントロール機能を備えたカスタムビデオプレーヤーを作成しました。 🛠️ 使用技術 - HTML - CSS - JavaScript - Netlify 📖 コード構造 HTML: - アクセシビリティとSEO最適化のために、よく構造化されたセマンティックなHTMLタグを使用。 CSS: - Flexbox、Grid、メディアクエリなどの高度なCSS技術を用いて、レスポンシブデザインを実現。 - スクロールバーやフォーム入力要素に対するカスタムスタイリング。 JavaScript: - ナビゲーションバー、プロジェクトフィルター、ビデオコントロールのDOM操作を担当。 - スクロール、クリック、メディアプレーヤーのコントロールに対するイベントリスナーを実装。 GITHUB REPOSITORY: https://github.com/yutaasakura96/vanilla-js-project-1