企業や他の組織向けのWebサイトデザインには、よく定義されたブランド設定やマーケティングの要素が組み込まれています。 Webサイトに中央揃えにしたいWebページがある場合は、HTMLとCSS（Cascading Style Sheet）コードを組み合わせて自分で作成できます。 多くの開発者は、Webページ要素のスクロールプロパティを使用してセンタリングプロパティを決定していますが、これは必ずしも信頼できるとは限りません。 中央に配置されたWebサイトのレイアウトとスクロールバーなしで表示されるページを定義するには、いくつかのCSS宣言が必要です。

1。

HTMLページを作成してください。 すでに作業しているページがある場合は、それを開きます。 それ以外の場合は、テキストエディタで新しいファイルを作成し、「。html」という拡張子を付けて保存します。 次の概要を使用してください。

ページのheadにCSSコードのセクション、bodyに要素があります。 ページのコンテンツはこの要素の内側に配置する必要があります。 既存のページを使用している場合は、そのページのCSSコードを探します。これは、ページの先頭からリンクされている別のCSSファイルに格納されている場合があります。

2。

CSSでページコンテナを識別します。 包含要素をスタイルするには、まずCSSコードでそれを識別する必要があります。 ページヘッドのスタイルセクション、または作業中のファイルが別のファイルの場合は、次のセレクタとアウトラインを追加します。

コンテナ{

}

これはID属性として "container"を持つ要素を識別します。 要素のスタイル宣言は左大括弧と右大括弧の間に表示されます。 あるいは、次のようにクラス属性値を使用して要素を識別できます。

.container {

}

これにより、次の要素が識別されます。

3。

内容を中央に配置するには、要素に固定幅を適用します。 ページ内の要素を中央に配置するには、それを含む要素の幅を固定する必要があります。 次のように、 "container"要素のCSS括弧の間に1つを追加します。

幅：800ピクセル。

デザインに合わせて高さの値を変更してください。 これで、要素をページ内で中央に配置する余白プロパティを適用できます。

マージン：自動。

4。

要素がスクロールしないようにします。 ページをスクロールしたくない場合は、次のように高さプロパティをコンテナ要素に適用する必要があります。

身長：90％。

設計に合わせて値を変更してください。 コンテナ内の要素がこれより多くのスペースを占有し、スクロールを防ぎたい場合は、次のように要素のオーバーフローを隠す必要があります。

オーバーフロー：隠れています。

これにより、ページコンテンツがユーザーのブラウザ内で割り当てられた高さを超えてもスクロールバーが表示されなくなります。

5。

ページを保存して表示します。 結果を表示するには、ブラウザで開くか、サイトにアップロードしてください。 あなたが望むデザインに到達するために調整を行う必要があるかもしれません。 完成したコンテンツが完成したら、外観を大きく変えることができるので、必ずページをテストしてください。

先端

• WebブラウザによってCSSルールはさまざまな方法で実装されているため、必ず複数のページでテストしてください。

警告

• Webページ要素のオーバーフローを隠すと、一部のユーザーがすべてのページコンテンツを見ることができなくなる可能性があります。