CSSのFlexbox：ウェブサイトの構造化への最初のステップ

このチュートリアルでは、CSSとHTMLのFlexboxレイアウトを使用して、あなたのWebプロジェクトのためのサンプル構造を構築する方法を学びます。Visual Studio Codeの統合デバッグツールとMicrosoft Edgeを併用して、Flexboxレイアウトを有効にする最初のステップを踏んでいきます。Flexboxは、要素の柔軟な配置と低い労力で複雑なレイアウトを作成するのに役立つ強力なレイアウトシステムです。

重要なポイント

• Flexboxを使用すると、要素を水平および垂直に配置できます。
• Microsoft EdgeのデベロッパーツールはVisual Studio Codeに直接統合できます。
• Flex-DirectionはFlex要素の配置に影響を与えます。

ステップバイステップガイド

最初に、Visual Studio CodeでMicrosoft Edge Toolsをインストールします。Extensionsで「Microsoft Edge Tools for VS Code」と検索してインストールしてください。

拡張がインストールされたら、デバッグオプションに移動してください。"Run and Debug"をクリックし、"create a launch.json file"をクリックしてください。これにより、設定を調整できます。

今作成された構成ファイルに、"Microsoft Edge Tools"の新しい構成を追加してください。ローカルアドレスにlocalhost:3000を指定してください。ターミナルでサーバーをこのポートで実行しているためです。

プロジェクトを開始する準備が整いました。適切なサブディレクトリに移動して、npm run devコマンドを実行してください。その後、ブラウザでlocalhost:3000を開いてください。

ページを読み込んだら、Visual Studio Codeで対応するボタンをクリックしてMicrosoft Edge Developer Toolsを有効にしてください。これにより、エディタの隣に直接Developer Toolが表示されます。

これでアプリケーションの構造を確認できます。"Flex Container"クラスが付いたコンテナ（div）があります。このコンテナ内には、"Flex Child"クラスを持つ4つのDIV要素があり、それぞれが「1」「2」「3」「4」のテキストコンテンツを表しています。

現時点では、Flex Containerは幅400ピクセル、高さ200ピクセルで定義されています。Flex Childは幅100ピクセル、高さ50ピクセルで定義されています。現時点ではどの子要素もFlexboxで配置されていませんが、垂直リストで表示されます。

Flexboxを有効にするには、Flex Containerに対してdisplay: flex; CSSプロパティを追加してください。これを行うと、子要素の配置が自動的に変更され、横並びになります。

Flex Childを再び垂直に配置する場合は、flex-directionプロパティを使用してください。Flex Containerに対してflex-direction: column;を設定して、Flex Childの配置を再度垂直方向に変更します。

Flex Childが再び垂直に配置されていることに気付くでしょう。高さと幅を調整すると、Flexではなくブロックに統合されているように見えます。

これでFlexboxレイアウトの基本について概観しました。重要な属性について説明し、その影響を確認しました。次回のチュートリアルでは、Flexboxのさらなる機能を探求し、この強力なレイアウトシステムで何ができるかを見ていきます。

まとめ

このチュートリアルでは、CSSのFlexboxを使用して簡単な構造を構築する方法を学びました。Microsoft Edge Developer ToolsをVisual Studio Codeに統合し、Flexレイアウトを有効化する最初のステップを踏んでいます。また、これからさらなる可能性がありますので、後続のビデオで詳細に検討します。