【はじめてのHTMLとCSS】CSSで中央寄せにする方法｜最初に作るHTML 入門編④

menu

Home
ＷＥＢ制作
【はじめてのHTMLとCSS】CSSで中央寄せにする方法｜最初に作るHTML 入門編④

記事の詳細

こんにちは！
少し間が空きましたが、入門編①～③まではマスターしましたか？
今回は入門編④。要素を真ん中に寄せていきましょう！

incloop.com

【はじめてのHTMLとCSS】最初に作るHTML 入門編③～コピペできるテンプレート付

こんにちは！前回は2019年のトレンドデザインをご紹介しました。今回は入門編IIの続きで、表の作成をしていきます。例えば、お問い合わせフォームや料金プランの表など...

今回のブログの見出しはコチラです！

1 はじめに
2 中央寄せに使用するcss
3 最適な方法で寄せてみよう！
4 ステップアップ問題！
5 中央に寄せる方法は他にもたくさん

はじめに

要素と聞いてもすぐにピンとこないかもしれませんね。
前回入門編③の最後で例としてpタグのお話をしました。
<p>から</p>に囲まれたものをp要素と呼びます。

つづいて、要素は2種類あります。インライン要素とブロック要素と呼ばれます。
各要素で適用されるcssが異なりますが、順を追って見ていけば大丈夫。

下記を参考にするとわかりやすいですよ！
【各要素について】http://www.htmq.com/htmlkihon/005.shtml
【CSSプロパティ（目的別）】http://www.htmq.com/style/

一旦ここまでを頭に入れて、実際に動かしていきましょう！

中央寄せに使用するcss

◆margin: 0 auto;
◆text-align: center;
◆display: block;

最適な方法で寄せてみよう！

①まずはlesson_003をコピーしてフォルダ名、ファイル名をlesson_004へ変更し、必要なhtml、cssをコピー＆ペースト。また、imgフォルダにタテ、ヨコ400pxの画像を用意。サイズは自由です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>レッスン4｜htmlとcss</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
</head>

<body>

<img src="img/img_0711.jpg">
<p>カワセミ</p>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<head>

<title>レッスン4｜htmlとcss</title>

</head>

<body>

</body>

</html>

@charset "utf-8";

body{
	background-color: #fff;
}

1

2

3

4

5

@charset "utf-8";

body{

background-color: #fff;

}

②画像、テキストの動きから確認。
初期状態では左側にありますね。style.cssにtext-align: centerを追加すると、文字のみ中央に。

p{
	text-align: center;
}

1

2

3

p{

text-align: center;

}

③…画像が中央に寄らない！理由はインライン要素だから。
インラインをブロックに、ブロックをインラインに変えることができるため、ブロック要素にすればOK！display: block;でブロック要素に、margin: 0 auto;で中央に。

img{
	display: block;
	margin: 0 auto;
}

1

2

3

4

img{

display: block;

margin: 0 auto;

}

④別解ですが、文字と同じようにimg要素をpタグで囲んで適用すると同じく中央寄せに。
最適な方法は文字ならtext-align。画像は両方可能、おすすめはブロック要素と覚えましょう！

<p><img src="img/img_0711.jpg"></p>

1	<p><img src="img/img_0711.jpg"></p>

ステップアップ問題！

⑤別にボックスを用意。どのcssを使えば中央寄せになるでしょう？

div{
	width: 100px;
	height: 100px;
	background-color: #FFCC00;
}

1

2

3

4

5

div{

width: 100px;

height: 100px;

background-color: #FFCC00;

}

⑥うーん…文字でも画像でもないからtext-alignではないかも？ではmargin: 0 auto;に！

div{
	width: 100px;
	height: 100px;
	background-color: #FFCC00;
	margin: 0 auto;
}

1

2

3

4

5

6

div{

width: 100px;

height: 100px;

background-color: #FFCC00;

margin: 0 auto;

}

⑦完成！こちらの最適な方法はmargin: 0 auto;でしたね。
元が③のようにインライン要素ではないため、display: block;は不要です。

中央に寄せる方法は他にもたくさん

◆position:absolute;　【難易度：★★★】
◆display:flex;　【難易度：★★☆】
※この他に細かい設定が必要になります。

慣れてくると、それぞれよく使うスタイルです。
中央寄せの方法としてはもちろん、特にposition:absoluteは自由に配置できる魅力があります。
その分、基準を設けてその場所から〇%、〇pxなどの設定が必要になります。
はじめはトリッキー、慣れれば強い味方の便利なcssですから少しずつ使ってみてくださいね！

いかがでしたか？今回は要素の中央寄せについてご紹介しました。
これまでに作成したlessonのレイアウトを整えてみてくださいね！