- テキストの配置(左・中央・右)
- ブロック要素の配置について(左・右 / margin を使った中央揃え)
- ブロックを横並びに配置する(display: flex;)
- display: flex; で横並びしたブロックを中央揃えする
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困1.png)
う~ん・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
どうしたのアイカちゃん?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
あ、ユウキくん! 実は・・・
ホームページを作ってて、配置を変えるにはどうしたらいいかわからなくて・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
うさタブに任せるッピ! 3分で片付けるッピよ~!
要素の配置について勉強しよう
元になるコード
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
</style>
<meta charset="UTF-8">
</head>
<body>
<p class="A">文章を左揃えにします</p>
<p class="B">文章を中央揃えにします</p>
<p class="C">文章を右揃えにします</p>
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上のコードを元に学習していくッピ!
【メモ帳】にコピーして用意するッピネ!
文章の配置を動かしてみる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
試しに文字の場所を動かしてみるッピヨ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<style></style>の間に
.A {text-align: left; }
.B {text-align: center;}
.C {text-align: right;}
と入力するッピよ~
<style>
.A {text-align: left;}
.B {text-align: center;}
.C {text-align: right;}
</style>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_テキストの位置.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
すごい! 文章が3つの場所にわかれてるわっ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふふ、これがCSSの魔法ッピ!
文字を左に寄せる text-align: left;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
text-align は文章の配置を変えるプロパティッピ!
text-align: left; は文章を左に配置する命令文ッピヨ!
文字を中央に配置する text-align: center;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
text-align: center;
これは文章を中央揃えする命令文ッピ!
文字を右に寄せる text-align: right;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後は text-align: right;
これは文章を右に配置する文章ッピネ!
回り込み設定でブロックの場所を変えてみよう
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
あのね、ウサタブさん・・・
実はさっきのやり方、わたしが考えてるのとちょっと違って・・・
元になるコード
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.A {
background-color: red;
height: 150px;
width: 150px;
}
.B {
height: 150px;
width: 150px;
background-color: blue;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p class="A">ブロックを左に固定して、次の要素を回り込みします</p>
<p class="B">ブロックを右に固定して、次の要素を回り込みします</p>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-10_floatの位置_0.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-10_floatの位置_2.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
これを、こんな風にできないかしら?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困2.png)
さっきのtext-alignでやっても、文章の位置が変わるだけで効果がなくって・・・
<style>
.A {
height: 150px;
width: 150px;
background-color: red;
text-align: left;
}
.B {
height: 150px;
width: 150px;
background-color: blue;
text-align: left;
}
</style>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
なるほど~
アイカちゃんは、文章や画像のようなインライン要素ではなく、
<div>や<p>のようなブロック要素の配置を変えたいッピな~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それなら、ちょっと設定を変えて
text-alignの代わりに
.A {float: left;
.B {float: right;
と追加するッピよ~
.A {
float: left;
background-color: red;
height: 150px;
width: 150px;
}
.B {
float: right;
height: 150px;
width: 150px;
background-color: blue;
}
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_floatの位置.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
すげえええ!!
さっき動かなかったものが動いてる!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふ、これがプログラミングの魔法ッピヨ!
グループのブロック要素と中身のインライン要素
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-10_インライン要素.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
HTMLの中身は
段落のグループであるブロック要素と
中身になるインライン要素に分かれるッピネ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
インラインとブロックで何が違うんだ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ざっくりいうと、最初にやった
text-align: は インライン要素 に働きかけるプロパティ
float: はブロック要素に働きかけるプロパティッピ!
ブロック要素を動かす float
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
float は<div><p><main>など、
ブロック要素を動かすプロパティッピ!
text-align でブロック要素は動かせないから気をつけるッピヨ~
ブロックを左に動かす float: left;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
float: left; はブロック要素を左に動かすプロパティッピ!
ブロックを左に動かす float: right;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
float: right; はブロック要素を右に動かすプロパティッピ!
回り込みを解除しよう
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_困2.png)
むううううっ
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
どうしたのアイカちゃん?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
あ、ユウキくん・・・
実はさっきのホームページの続きなんだけど・・・
元になるコード
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.A {
float: left;
background-color: red;
height: 150px;
width: 150px;
}
.B {
float: right;
height: 150px;
width: 150px;
background-color: blue;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p class="A">ブロックを左に固定して、次の要素を回り込みします</p>
<p class="B">ブロックを右に固定して、次の要素を回り込みします</p>
<p class="C">テスト</p>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_clear0.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_clear1.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
こんな風になぜか真ん中に文字がきちゃうの・・・
これ、下に移動するってできないかなぁ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
これはオレも勉強してないな・・・ランプは知ってるか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
任せるッピ!
これは回り込みを解除することで解決できるッピヨ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<style></style>の中に、
.C {
clear: both;
}
と追加するッピネ!
<style>
.A {
float: left;
background-color: red;
height: 150px;
width: 150px;
}
.B {
float: right;
height: 150px;
width: 150px;
background-color: blue;
}
.C {
clear: both;
}
</style>
<p class="A">ブロックを左に固定して、次の要素を回り込みします</p>
<p class="B">ブロックを右に固定して、次の要素を回り込みします</p>
<p class="C">テスト</p>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_clear2.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
わっ! ちゃんと下に文章がきてる!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
やったなアイカちゃん!
ブロックを中央に配置する
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
思ったんだけどさ、
これって中央にブロックを置くってできないのか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もちろんできるッピヨ!
そういうときは margin タグを利用するッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<style></style>の間に
.D {
margin: auto;
background-color: yellow;
height: 150px;
width: 150px;
}
<p class="D">ブロックを中央に配置します</p>
と入力するッピよ~
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.D {
margin: auto;
background-color: yellow;
height: 150px;
width: 150px;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p class="D">ブロックを中央に配置します</p>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-08-09_margin.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
おおおお! できてる!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
中央にブロックを置くには、marginを使うのね!
ブロックを中央に揃える margin: auto;
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
中央にブロック要素を配置するには
margin: auto;
を使うッピネ!
float では左右にしか配置できないから注意するッピヨ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次のページでは float を使わずに横並びする方法が書いているッピヨ!
margin が効かずに困っている人にも必見のCSSを紹介するッピネ!