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を紹介するッピネ!

スポンサーリンク
スポンサーリンク
スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました