フレックスボックスをCSSとHTMLで使用する：初期プロジェクトの設定

このTutorialでは、CSS Flexboxを使用するためにプロジェクトを準備する方法を学びます。Flexboxのレイアウトテクニックに深入りする前に、しっかりとした基礎を築くことが重要です。開発にはVisual Studio Codeを使用しますが、簡単なテキストエディタとブラウザを選択することもできます。次のステップでは、Flexboxの理解と適用をサポートするシンプルなプロジェクトを立ち上げます。

重要なポイント

• 開発サーバーを使用すると、プロジェクトの作業が容易になります。
• JavaScriptとCSSの基礎を学ぶには、フレームワークを使わずに作業することができます。
• Index-HTMLファイルはプロジェクトの中心となる場所で、作業を行う出発点となります。

ステップバイステップの手順

まず、Visual Studio Codeまたは選択した別のプログラムでターミナルを開きます。続行する前にNode.jsがインストールされていることを確認してください。これは、NPMコマンドを実行するために不可欠です。

次に、プロジェクト構造を作成するためにNPMパッケージを使用できます。ターミナルでnpx create-vというコマンドを入力して、プロジェクトの作成プロセスを開始します。パッケージのダウンロードを確認されますので、承認してください。

プロジェクトの名前を入力してください。テーマがFlexboxであるため、「flexbox」と単純に名前を付けることをお勧めします。名前を入力した後、UIフレームワークを尋ねられます。この場合は、「Vanilla JavaScript」を選択してください。特別なフレームワークは使用しません。

次に、TypeScriptを使用するかどうかを尋ねられます。ここでも、核心技術に焦点を当て、単純にするために「いいえ」を選択することをお勧めします。

これでほぼ完了です。あとは新しいプロジェクトのディレクトリに移動するだけです。これはcd flexboxというコマンドで行います。これにより新しく作成されたフォルダに移動します。

次に、ターミナルでnpm installコマンドを実行してください。これによりプロジェクトに必要なすべてのパッケージがインストールされます。

インストールが完了したら、npm run devでローカル開発サーバーを起動してください。これによりプロジェクトが開かれ、ローカルサーバーで提供されます。

生成されたIndex-HTMLファイルを確認し、プロジェクトディレクトリにあることを確認します。このファイルは、すべてのコンテンツと構造を作成するメインパーツであり、プロジェクトにおいて重要な部分です。

次に行うことは、プロジェクトで自動生成された標準スクリプトを削除することです。プロジェクト初期段階ではmain.jsスクリプトをすぐに使用する必要はないため、単純に削除してください。また、最初はすべてをIndex-HTMLで管理したいので、stylesheet style.cssも削除してください。

Index-HTMLでは、Flexboxコンテナ構造を構築します。上位のコンテナには、いくつかの子コンテナが含まれる構造が必要です。これはFlexboxに必要な基本的な構造です。

変更をブラウザで表示するには、Chromeを開き、http://localhost:3000に移動してください。開発サーバーを起動すると、Index-HTMLファイルにアクセスできるURLが表示されます。

リンクをブラウザで開く際には、コントロールキー（Macの場合はCommandキー）を使用してデフォルトブラウザで直接開くことをお勧めします。これにより変更をリアルタイムで確認できます。

ページが開いたら、例えばIndex-HTMLのタイトルを「Weed App」から「Flexbox」に変更し、ページを保存します。ライブ更新により、変更が直ちにブラウザに反映されます。

ページに他のテキストを追加することもできます。例："Flexboxコース"などを追加して、テキストが自動的に更新される様子を見ることができ、ページを手動で再読み込みする必要はありません。このリアルタイムプレビューは作業を大幅に容易にします。

次のステップでは、インデックスHTMLファイル内でFlexboxの例をさらに編集します。ここではCSSでレイアウトを設計し、Flexboxコンテナを作成します。Flexboxテクニックをより深く学ぶ次のビデオをお楽しみに。

概要

このチュートリアルでは、CSS Flexboxを使用したプロジェクトを設定する方法を学びました。プロジェクト構造の基本を把握し、インデックスHTMLファイルを準備し、ローカル開発サーバーを使用しました。これは、Flexboxを実践する最初のステップです。