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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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