CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使ってdiv要素を中央に配置する方法をわかりやすく解説

Webページのレイアウトを作成していると、div要素を画面の中央に配置したい場面によく出会います。この記事では、CSSを使わずに中央配置する方法と、CSSを使って中央配置する方法の2つのアプローチを、実際のコード例とともにわかりやすく解説します。

例1：CSSを使わずに中央配置する（align属性）

HTMLのdivタグにalign属性「center」を指定すると、CSSなしでも要素を中央に配置できます。ただし、align属性はHTML5では非推奨とされているため、実務では次に紹介するCSSを使う方法がおすすめです。

<html>
<head>
    <title>div in center without css</title>
</head>
<body>
    <div>
        THIS IS ONE PARAGRAPH. HERE WE ARE NOT USE ANY ALIGNMENT.
    </div>
    <div align="center" style="border: 2px solid blue">
        THIS PARAGRAPH IS IN CENTER
    </div>
</body>
</html>

例2：CSSを使って中央配置する（推奨の方法）

現在の標準的な手法は、CSSで中央配置を制御する方法です。外部スタイルシートを読み込み、専用のクラスをdiv要素に適用します。

<html>
<head>
<title>div in center with css</title>
    <link href="../../Content/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        THIS IS ONE PARAGRAPH. HERE WE ARE NOT USE ANY ALIGNMENT.
    </div>
    <div class="mydiv">
        THIS PARAGRAPH IS IN CENTER
    </div>
</body>
</html>

style.cssのコード

中央配置を実現するポイントは、「width（幅の指定）」と「margin: auto」の組み合わせです。要素に具体的な幅を設定した上で左右のマージンをautoにすると、ブラウザが余白を自動的に均等配分し、要素が画面中央に配置されます。

body {
    background-color:Gray;
}

.mydiv {
    padding:10px;
    margin:auto;
    width:30%;
    border:4px solid black;
}

ボックス内のテキストも中央揃えにするには？

枠線で囲まれたボックスの中のテキストも中央揃えにしたい場合は、CSSファイル内の.mydivクラスに「text-align: center;」を追加します。これにより、ボックス自体は中央配置されたまま、内部のテキストも中央に揃えることができます。

  1. CSSのclip-pathプロパティで三角形を作成する方法

    三角形は、CSSのclip-pathプロパティを使うことで簡単に作成できます。画像ファイルやSVGに頼らず、純粋なCSSだけで図形を描画できるため、軽量で柔軟なデザイン表現が可能になります。 clip-pathプロパティとは clip-pathプロパティは、要素の表示範囲を切り抜く（クリッピングする）ためのプロパティです。特にpolygon()関数を使用すると、複数の座標点を指定することで任意の多角形を自由に描くことができます。 構文 CSS clip-pathプロパティの基本構文は以下のとおりです。 Selector {     clip-path:

  2. CSSでウィンドウの高さ100%のDIVを作成する方法

    CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。heightプロパティの構文CSSのheightプロパティは、次のように記述します。Selector {    height: /*値*/ }値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設