HTML と CSS を使用してシンプルな中央寄せレイアウトを実装する方法

HTML と CSS を使用して単純な中央寄せレイアウトを実装する方法

Web デザインでは、中央寄せレイアウトは非常に一般的なレイアウト方法です。 HTMLとCSSを使えば、シンプルで美しい中央揃えのレイアウトを簡単に実現できます。

始める前に、基本的な HTML 構造を確立する必要があります。まず、コンテンツを含む <div> 要素を作成し、それを一意の ID を持つ <code><div> コンテナーに配置します。次に、外部 CSS ファイルを HTML ファイルの タグに導入して、スタイルの記述と管理を容易にします。 <p>ここでは、例として基本的な HTML 構造を示します: </p><pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt; &lt;title&gt;居中布局&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;container&quot;&gt; &lt;div id=&quot;content&quot;&gt; &lt;h1&gt;我的居中布局&lt;/h1&gt; &lt;p&gt;这是一个示例文本。&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>次に、CSS を使用してレイアウトを中央に配置します。私たちは一連のスタイルを通じてこれを達成します。 </p> <p>まず、コンテナのスタイルを設定する必要があります。フレックス レイアウトを使用して中央揃えのレイアウトを実現します。スタイル シート (styles.css) に次のコードを追加します。 </p><pre class='brush:css;toolbar:false;'>#container { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f3f3f3; }</pre><p>上記のコードでは、<code>display: flex;Use flex Layout, align-items: center; 水平方向の中央揃えの場合、justify-content: center;垂直方向の中央揃えの場合、height: 100vh;コンテナの高さをビューポートの高さに設定します、background-color: # f3f3f3 ;背景色を設定します。必要に応じて変更できます。

次に、コンテンツのスタイルを設定する必要があります。コンテンツを中央に配置するには、コンテンツをインラインのブロックレベル要素として設定し、スペースを維持するためにマージンを追加します。スタイル シート (styles.css) に次のコードを追加します。

#content {
    display: inline-block;
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

p {
    color: #666;
}

上記のコードでは、display: inline-block; を使用してコンテンツをインライン ブロックに設定します。 level 要素,text-align: center;中央に揃えます, padding: 20px;スペースを維持するためにパディングを追加します, background-color: #fff;Set背景色は白です、border-radius: 5px;角丸を追加します、box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);影効果を追加します,color: #333; および color: #666; は、タイトルと段落の色を設定するために使用され、必要に応じて変更することもできます。

上記の手順により、シンプルで美しい中央配置のレイアウトを実装することができました。これで、この HTML ファイルをブラウザで実行して効果を確認できます。

概要:
シンプルな中央揃えのレイアウトは、HTML と CSS を使用して簡単に実装できます。コンテナー スタイルをフレックス レイアウトに設定し、コンテンツ スタイルを設定することで、水平方向と垂直方向のセンタリング効果を実現できます。上記のコードは基本的なテンプレートとして使用でき、実際の開発時に必要に応じて適切な調整や改善を行うことができます。この記事がお役に立てば幸いです!