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

CSS

~ 放課後 ~

ユウキ
ユウキ

今日もプログラミングの授業、順調に終わったな~

ユウキ
ユウキ

特訓のおかげで、授業に楽々ついていけるし、

小テストでも高得点とれたし!

アイカ
アイカ

ユウキくん!

ユウキ
ユウキ

アイカちゃん!

ユウキ
ユウキ

アイカちゃんは同じクラスの女の子で、

めちゃくちゃダンスが上手くてかわいい、売れっ子ミューチューバーなんだよな~

話しかけてくれるなんてラッキー♪

アイカ
アイカ

最近プログラミングの授業、すごく捗ってるね!

小テストも高得点だったし・・・

アイカ
アイカ

何か特別な特訓でもしたの?

恥ずかしいけど・・・

わたしもあんまりプログラミング得意じゃないから、ユウキくんがどうしてそんなに成績が伸びたのか気になってて・・・

ユウキ
ユウキ

アイカちゃんになら言ってもいいかな~

ユウキ
ユウキ

実は・・・

かくかくしかじか・・・

アイカ
アイカ

すごいっ! そんなことがあったの!?

わたしもその【うさタブ】と一緒に勉強したいな~!

ユウキ
ユウキ

もちろんだよ! 今日から一緒に頑張ろう!

~帰宅後~

うさタブ
うさタブ

ユウキくん、おかえりッピ!

・・・ん? そちらの女の子は誰ッピか??

アイカ
アイカ

すごいっ!!! 何かよくわからない生き物がしゃべってる!

アイカ
アイカ

これ、ヴァーチャルペット!?

それとも新種の遺伝子操作動物!?

あ、これがウワサの【うさタブ】ねっ!?

ユウキ
ユウキ

パっと見て分かっちゃうのがすごいな・・・

うさタブ
うさタブ

そのとおりッピ!

おぬし・・・うさタブが見えるということは、『プログラミングの勉強』につまづいているッピね?

アイカ
アイカ

!?

どうしてわかるの!?

うさタブ
うさタブ

うさタブは『強い願いを持つもの』に呼ばれてこの世界にきたッピ!

そして、その願いを持つものにだけ、自分の姿を見えるようにしてるッピね~

うさタブ
うさタブ

ユウキくんの願いは、

『プログラミングが上手になること』

だから、同じ願いを持っているおぬしもうさタブの姿が見えるッピ!

うさタブ
うさタブ

プログラミングが上手になりたいッピか??

アイカ
アイカ

もちろん!!

うさタブ
うさタブ

ならば、その願い叶えてしんぜようッピ!

人間の願いを叶えないと精霊界に戻れないッピからな~

ホームページの見た目をキレイにする【CSS】を勉強しよう

この記事で学べること
  • CSSってなに?
  • HTMLファイルでのCSS設定
  • タグ全体の見た目を変更する
  • クラス名を設定して、タグの一部分を設定する

CSSってなに?

アイカ
アイカ

ところでいきなりなんだけど・・・

ウサタブさん、【CSS】ってなにかしら?

わたしもう基本からわからなくって・・・

うさタブ
うさタブ

CSSはズバリ、

カスケード・スタイル・シートといって

ホームページやウェブページを作るHTMLファイルの見た目を整えるプログラムのことッピ!

うさタブ
うさタブ

このホームページもHTMLファイルとCSSで作られているッピよ~

ユウキ
ユウキ

前々から気になってたんだけど、

ホームページウェブページの違いってなに?

あとサイトとかさ・・・

うさタブ
うさタブ

ぶっちゃけ全部まとめて一緒ッピ!

ただ、自分のウェブページを【ホームページと言っているだけの、和製英語ならぬ『わせいプログラミング言語』ッピネ

うさタブ
うさタブ

ウェブサイトウェブページの違いはそうッピね・・・

サイトウェブページ部屋・・・みたいな感じッピヨ~

ユウキ
ユウキ

へ~! 知らなかった

アイカ
アイカ

わたしもはじめて知ったわ!

うさタブ
うさタブ

・・・アイカちゃんはCSSのことが学びたいッピか?

ならユウキくんもこれから勉強する分野ッピ! よければ一緒に勉強していくがッピ!

アイカ
アイカ

わっ!? 本当?

嬉しい~!!

ユウキ
ユウキ

よろしくな、アイカちゃん

うさタブ
うさタブ

ではさっそく勉強していくッピよ~

元になるコード

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>

</style>
</head>

<!-- 見える部分の内容 -->
<body>

<h1>フルーツ</h1>

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

</body>
</html>
うさタブ
うさタブ

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

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

CSSをはじめてみよう

うさタブ
うさタブ

以前、HTMLファイルには<head><body>があって、

<head>見えない部分

<body>見える部分

のプログラムを書くといったのを覚えているッピか?

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

</head>

<body>
<!-- 見える部分の内容 -->
</body>
</html>
うさタブ
うさタブ

CSSは、ホームページの見えない部分・・・

<head></head>の中に<style></style>というタグを書いて、

そのなかに【見た目の設定する】命令文を書いていくッピよ~

ユウキ
ユウキ

いつもの<body></body>じゃなくて?

うさタブ
うさタブ

そうッピ!

まずは試しに自分でやってみるのが一番ッピ!

うさタブ
うさタブ

<style></style>の間に

<style>
h1 {
 border-bottom:
 solid 5px red;
}
</style>

と入力するッピよ~

サンプルコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
h1 {
 border-bottom:
 solid 5px red;
}
</style>
</head>

<!-- 見える部分の内容 -->
<body>

<h1>フルーツ</h1>

<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
</ul>

</body>
</html>

ユウキ
ユウキ

おお! なんか線がついた!!

アイカ
アイカ

すごいわっ

うさタブ
うさタブ

今回は

見出し<h1>タグの見た目と変化させてみたッピ!

まずはこのコードを解説していくッピよ~

タグの見た目を変化させてみよう

うさタブ
うさタブ

CSSで見た目を変化させるには、

タグそのまま変化させる方法と、

タグの中にクラスという要素を加えて変化させる方法2種類があるッピ!

うさタブ
うさタブ

今回はタグそのまま変化させる方法を使ったッピ!

解説すると・・・

h1<h1>タグの見た目を変化させます { 中身は

border-bottom<h1>の周りの『下の部分』:solid 線を引いて下さい 5px 太さは5pxです red 色はこの色にしてください;

}変更を終わります

という意味ッピ!

アイカ
アイカ

これしかできないの?

うさタブ
うさタブ

もちろんそんなことはないッピ!

文字を小さくしたり、文字色を変えることだってできるッピよ~

うさタブ
うさタブ

<h1>以外にも

<h2><h3>…<p><ul>といったリスト・・・様々なタグの見た目を変えることができるッピネ!

うさタブ
うさタブ

詳しくは関連サイトを見るッピ!

特に下のHTMLクイックリファレンスというサイトはおすすめッピよ~

オススメのHTML/CSS講座サイト

クラスを設定して見た目を変化させてみよう

うさタブ
うさタブ

次はタグクラスを設定して見た目を変更するッピよ~

ユウキ
ユウキ

クラス?

うさタブ
うさタブ

クラスというのは、グループカタマリのことッピ!

<style>

.ドットクラス名 { 見た目を変えたいもの : 数字や設定値 ; }

</style>

<タグ class=”クラス名”>

と入力することで、そのタグに設定した見た目の情報組み込むことができるッピヨ~!

うさタブ
うさタブ

もっと詳しい用語を使うと、これらを

セレクタ { プロパティ : ;}

というッピ!

アイカ
アイカ

うう・・・ 想像つかないなぁ~

うさタブ
うさタブ

まずは実際やってみるがッピ!

うさタブ
うさタブ

<style></style>の間に

.nav{
  display: flex;
  background: green;
  color: white;
}
.nav li{
  width: 25%;
  text-align: center;
  list-style-type: none;
}

と入力するッピよ~

うさタブ
うさタブ

そして、<body></body>の中にある

リスト・・・<ul>タグに、クラスを組み込むッピ!

<ul class="nav">

と入力するッピネ~!

サンプルコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
h1 {
 border-bottom:
 solid 5px red;
}

.nav{
  display: flex;
  background: green;
  color: white;
}
.nav li{
  width: 25%;
  text-align: center;
  list-style-type: none;
}
</style>
</head>

<!-- 見える部分の内容 -->
<body>

<h1>フルーツ</h1>

<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
</ul>

</body>
</html>

ユウキ
ユウキ

すっげえええ! なんかスゲー変わってる!!

アイカ
アイカ

CSSを使うとこんなに見た目が変わるのね・・・!

クラスによるCSS適用の解説

うさタブ
うさタブ

今回はタグクラスを設定することで、見た目を変更したッピ!

うさタブ
うさタブ

解説すると

.nav navクラスをつくります{
display配置方法を : flex; 横並びにします
background背景設定は : green後ろの色を緑にします;
color文字の色は : white 白です;
}

という意味ッピね~!

うさタブ
うさタブ

それに対応する<ul>は、

<ulリストをつくります  class クラスは=”nav”>です

<li>リストの中身はリンゴ</li>です

</ul>リストを終わります

という意味になるッピ!

ユウキ
ユウキ

.navはわかったけど、

.nav li ってどうゆうこと?

うさタブ
うさタブ

.nav li は、

.クラスタグ名 ・・・つまり、

クラスnav】の中の『liリストの中身』の設定はこうしてくださいね~

という意味ッピ!

うさタブ
うさタブ

解説すると、

.nav linavクラスの<li>タグを{
width: 25%;横の大きさを 25% にします
text-align文章の配置を: center 中央に寄せます;
list-style-typeリストの●ぽちを : none消します;
}設定を終わります

という意味になるッピね~

ユウキ
ユウキ

なるほど~!

うさタブ
うさタブ

ちなみに、クラスを設定してないものと並べるとこうなるッピ!

<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>
アイカ
アイカ

まったく別物だわ・・・!

ユウキ
ユウキ

またひとつ勉強になったな!

IDを設定してみよう

うさタブ
うさタブ

最後はidでCSSを設定する方法を学ぶッピよ~

うさタブ
うさタブ

<style></style>の間に

#nav {
  background: blue;
}

#nav li{
 color: white;
 padding-left: 10px;
 border-left: solid  5px black;
 list-style-type: none;
}

と入力するッピよ~

うさタブ
うさタブ

そして、<body></body>の中にある

2番めのリスト・・・<ul>タグに、IDを組み込むッピ!

<ul id="nav">

と入力するッピネ~!

サンプルコード
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
h1 {
 border-bottom: solid 5px red;
}
.nav{
  display: flex;
  background: green;
  color: white;
}

.nav li{
  width: 25%;
  text-align: center;
  list-style-type: none;
}

#nav {
  background: blue;
}

#nav li{
 color: white;
 padding-left: 10px;
 border-left: inset 5px black;
 list-style-type: none;
}

</style>
</head>

<!-- 見える部分の内容 -->
<body>

<h1>フルーツ</h1>

<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

<ul id="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

</body>
</html>

アイカ
アイカ

さっきと別物になったわ!

IDとclassの違い

アイカ
アイカ

ウサタブさん、

この【id】と【class】の違いってなんなのかしら?

ユウキ
ユウキ

.ドット 】とか【 シャープ 】とかな~

うさタブ
うさタブ

それはッピね~

IDの方がclassよりも適応されるパワーが強いってことッピ!

うさタブ
うさタブ

例えば、↓のようなコードの場合

<h1 id="A" class="B">

背景はこの色にして~と、idとclass、両方で指定した場合

idの方が優先されるッピよ~!

ユウキ
ユウキ

なるほど~!

アイカ
アイカ

勉強になったわ

今回使用したCSSの解説

うさタブ
うさタブ

今回2番めのリストに使用したCSSの意味はこんな感じッピな~

うさタブ
うさタブ

#navID navをつくります {

background背景の色は: blue;青色です

}

うさタブ
うさタブ

#nav liid=”nav” の中の <li>タグに作用します {

color文字色は: white;
padding-left内部の余白は : 10px;
border-left左側にある枠線は: inset 太め 5px black色は黒です;
list-style-typeリストの●は: none消してください;

}

という意味ッピ!

全体のコードの確認

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
h1 {
 border-bottom: solid 5px red;
}
.nav{
  display: flex;
  background: green;
  color: white;
}

.nav li{
  width: 25%;
  text-align: center;
  list-style-type: none;
}

#nav {
  background: blue;
}

#nav li{
 color: white;
 padding-left: 10px;
 border-left: inset 5px black;
 list-style-type: none;
}

</style>
</head>

<!-- 見える部分の内容 -->
<body>

<h1>フルーツ</h1>

<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

<ul id="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>

</body>
</html>
学習のまとめ
  • CSSHTMLの見た目を変えるもの
  • <head></head>の中に、<style></style>と記述することで、CSSを設定できる
  • CSSタグ全体を変更できるものと、クラスを設定して変更できるもの2種類がある
  • セレクタタグ { プロパティ変更するもの : 数字や設定; } でその タグ 全体の見た目を変更できる
  • .ドットクラス{ プロパティ変更したい設定 : 数字や設定; } で、<タグ名 class=”クラス名“>と設定したタグの見た目を変更することができる。
  • ID名{ プロパティ変更したい設定 : 数字や設定; } で、<タグ名 class=”クラス名“>と設定したタグの見た目を変更することができる。
  • IDクラス では、IDが優先される。

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました