CSS入門講座|配置ついて学ぼう

CSS
CSS講座
この記事で学べること
  • テキストの配置(左・中央・右)
  • ブロック要素の配置について(左・右 / margin を使った中央揃え)
  • ブロックを横並びに配置する(display: flex;)
  • display: flex; で横並びしたブロックを中央揃えする

アイカ
アイカ

う~ん・・・

ユウキ
ユウキ

どうしたのアイカちゃん?

アイカ
アイカ

あ、ユウキくん! 実は・・・

ホームページを作ってて、配置を変えるにはどうしたらいいかわからなくて・・・

うさタブ
うさタブ

うさタブに任せるッピ! 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>
うさタブ
うさタブ

上のコードを元に学習していくッピ!

メモ帳】にコピーして用意するッピネ!

文章の配置を動かしてみる

うさタブ
うさタブ

試しに文字の場所を動かしてみるッピヨ~!

うさタブ
うさタブ

<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>

※わかりやすく色をつけています
アイカ
アイカ

すごい! 文章が3つの場所にわかれてるわっ!

うさタブ
うさタブ

ふふふふ、これがCSSの魔法ッピ!

文字を左に寄せる text-align: left;

うさタブ
うさタブ

text-align は文章の配置を変えるプロパティッピ!

text-align: left; は文章を左に配置する命令文ッピヨ!

文字を中央に配置する text-align: center;

うさタブ
うさタブ

text-align: center;

これは文章を中央揃えする命令文ッピ!

文字を右に寄せる text-align: right;

うさタブ
うさタブ

最後は text-align: right;

これは文章を右に配置する文章ッピネ!

回り込み設定でブロックの場所を変えてみよう

アイカ
アイカ

あのね、ウサタブさん・・・

実はさっきのやり方、わたしが考えてるのとちょっと違って・・・

元になるコード

<!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>
アイカ
アイカ

これを、こんな風にできないかしら?

アイカ
アイカ

さっきの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>
うさタブ
うさタブ

なるほど~

アイカちゃんは、文章や画像のようなインライン要素ではなく、

<div>や<p>のようなブロック要素の配置を変えたいッピな~

うさタブ
うさタブ

それなら、ちょっと設定を変えて

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;
         }
ユウキ
ユウキ

すげえええ!!

さっき動かなかったものが動いてる!!

うさタブ
うさタブ

ふふふ、これがプログラミングの魔法ッピヨ!

グループのブロック要素と中身のインライン要素

うさタブ
うさタブ

HTMLの中身は

段落グループであるブロック要素

中身になるインライン要素に分かれるッピネ!

ユウキ
ユウキ

インラインとブロックで何が違うんだ?

うさタブ
うさタブ

ざっくりいうと、最初にやった

text-align: インライン要素 に働きかけるプロパティ

float: ブロック要素に働きかけるプロパティッピ!

ブロック要素を動かす float

うさタブ
うさタブ

float は<div><p><main>など、

ブロック要素を動かすプロパティッピ!

text-align でブロック要素は動かせないから気をつけるッピヨ~

ブロックを左に動かす float: left;

うさタブ
うさタブ

float: left; はブロック要素をに動かすプロパティッピ!

ブロックを左に動かす float: right;

うさタブ
うさタブ

float: right; はブロック要素をに動かすプロパティッピ!

回り込みを解除しよう

アイカ
アイカ

むううううっ

ユウキ
ユウキ

どうしたのアイカちゃん?

アイカ
アイカ

あ、ユウキくん・・・

実はさっきのホームページの続きなんだけど・・・

元になるコード

<!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>
アイカ
アイカ

こんな風になぜか真ん中に文字がきちゃうの・・・

これ、下に移動するってできないかなぁ~

ユウキ
ユウキ

これはオレも勉強してないな・・・ランプは知ってるか?

うさタブ
うさタブ

任せるッピ!

これは回り込みを解除することで解決できるッピヨ!

うさタブ
うさタブ

<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>
アイカ
アイカ

わっ! ちゃんと下に文章がきてる

ユウキ
ユウキ

やったなアイカちゃん!

ブロックを中央に配置する

ユウキ
ユウキ

思ったんだけどさ、

これって中央にブロックを置くってできないのか?

うさタブ
うさタブ

もちろんできるッピヨ!

そういうときは margin タグを利用するッピネ!

うさタブ
うさタブ

<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>

ユウキ
ユウキ

おおおお! できてる!

アイカ
アイカ

中央にブロックを置くには、marginを使うのね!

ブロックを中央に揃える margin: auto;

うさタブ
うさタブ

中央にブロック要素を配置するには

margin: auto;

を使うッピネ!

float では左右にしか配置できないから注意するッピヨ~!

うさタブ
うさタブ

次のページでは float を使わずに横並びする方法が書いているッピヨ!

margin が効かずに困っている人にも必見のCSSを紹介するッピネ!

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク
CSSプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました