~ 放課後 ~
![ユウキ](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/ユウキくん_驚.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/アイカちゃん_謎.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/アイカちゃん_驚き3.png)
すごいっ! そんなことがあったの!?
わたしもその【うさタブ】と一緒に勉強したいな~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
もちろんだよ! 今日から一緒に頑張ろう!
・
・
・
~帰宅後~
![](https://janken.asotetu.work/wp-content/uploads/2021/05/room.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ユウキくん、おかえりッピ!
・・・ん? そちらの女の子は誰ッピか??
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.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)
そのとおりッピ!
おぬし・・・うさタブが見えるということは、『プログラミングの勉強』につまづいているッピね?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
!?
どうしてわかるの!?
![うさタブ](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)
プログラミングが上手になりたいッピか??
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
もちろん!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ならば、その願い叶えてしんぜようッピ!
人間の願いを叶えないと精霊界に戻れないッピからな~
ホームページの見た目をキレイにする【CSS】を勉強しよう
- CSSってなに?
- HTMLファイルでのCSS設定
- タグ全体の見た目を変更する
- クラス名を設定して、タグの一部分を設定する
CSSってなに?
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_汗.png)
ところでいきなりなんだけど・・・
ウサタブさん、【CSS】ってなにかしら?
わたしもう基本からわからなくって・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
CSSはズバリ、
カスケード・スタイル・シートといって
ホームページやウェブページを作るHTMLファイルの見た目を整えるプログラムのことッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このホームページもHTMLファイルとCSSで作られているッピよ~
![ユウキ](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)
ウェブサイトとウェブページの違いはそうッピね・・・
サイトは家、ウェブページは部屋・・・みたいな感じッピヨ~
![ユウキ](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)
・・・アイカちゃんはCSSのことが学びたいッピか?
ならユウキくんもこれから勉強する分野ッピ! よければ一緒に勉強していくがッピ!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔4.png)
わっ!? 本当?
嬉しい~!!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
よろしくな、アイカちゃん
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ではさっそく勉強していくッピよ~
元になるコード
<!-- 見えない部分の設定 -->
<!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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-24_1.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上のコードを元に学習していくッピ!
【メモ帳】にコピーして用意するッピネ!
CSSをはじめてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
以前、HTMLファイルには<head>と<body>があって、
<head>は見えない部分
<body>は見える部分
のプログラムを書くといったのを覚えているッピか?
<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 見える部分の内容 -->
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
CSSは、ホームページの見えない部分・・・
<head></head>の中に<style></style>というタグを書いて、
そのなかに【見た目の設定する】命令文を書いていくッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
いつもの<body></body>じゃなくて?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうッピ!
まずは試しに自分でやってみるのが一番ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-24_4.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
おお! なんか線がついた!!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/08/アイカちゃん_笑顔3.png)
すごいわっ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は
見出しの<h1>タグの見た目と変化させてみたッピ!
まずはこのコードを解説していくッピよ~
タグの見た目を変化させてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
CSSで見た目を変化させるには、
タグをそのまま変化させる方法と、
タグの中にクラスという要素を加えて変化させる方法2種類があるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はタグをそのまま変化させる方法を使ったッピ!
解説すると・・・
h1 {
border-bottom:solid 5px red;
}
という意味ッピ!
![アイカ](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)
<h1>以外にも、
<h2><h3>…<p>や<ul>といったリスト・・・様々なタグの見た目を変えることができるッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
詳しくは関連サイトを見るッピ!
特に下のHTMLクイックリファレンスというサイトはおすすめッピよ~
オススメのHTML/CSS講座サイト
クラスを設定して見た目を変化させてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はタグにクラスを設定して見た目を変更するッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
クラス?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
クラスというのは、グループやカタマリのことッピ!
<style>
.クラス名 { 見た目を変えたいもの : 数字や設定値 ; }
</style>
<タグ class=”クラス名”>
と入力することで、そのタグに設定した見た目の情報を組み込むことができるッピヨ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.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>の間に
.nav{
display: flex;
background: green;
color: white;
}
.nav li{
width: 25%;
text-align: center;
list-style-type: none;
}
と入力するッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そして、<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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-24_5.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
すっげえええ! なんかスゲー変わってる!!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_笑顔.png)
CSSを使うとこんなに見た目が変わるのね・・・!
クラスによるCSS適用の解説
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はタグにクラスを設定することで、見た目を変更したッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
解説すると
.nav{
display: flex;
background: green;
color: white;
}
という意味ッピね~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それに対応する<ul>は、
<ul class=”nav”>
<li>リンゴ</li>
</ul>
という意味になるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
.navはわかったけど、
.nav li ってどうゆうこと?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
.nav li は、
.クラス名 タグ名 ・・・つまり、
クラス【nav】の中の『li』の設定はこうしてくださいね~
という意味ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
解説すると、
.nav li{
width: 25%;
text-align: center;
list-style-type: none;
}
という意味になるッピね~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほど~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちなみに、クラスを設定してないものと並べるとこうなるッピ!
<ul class="nav">
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>キウイ</li>
<li>イチゴ</li>
</ul>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-24_6.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
まったく別物だわ・・・!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
またひとつ勉強になったな!
IDを設定してみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後はidでCSSを設定する方法を学ぶッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<style></style>の間に
#nav {
background: blue;
}
#nav li{
color: white;
padding-left: 10px;
border-left: solid 5px black;
list-style-type: none;
}
と入力するッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そして、<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>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-24_7.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_驚き3.png)
さっきと別物になったわ!
IDとclassの違い
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_謎.png)
ウサタブさん、
この【id】と【class】の違いってなんなのかしら?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
【 . 】とか【 ♯ 】とかな~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それはッピね~
IDの方が、classよりも適応されるパワーが強いってことッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
例えば、↓のようなコードの場合
<h1 id="A" class="B">
背景はこの色にして~と、idとclass、両方で指定した場合
idの方が優先されるッピよ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
なるほど~!
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/アイカちゃん_.png)
勉強になったわ
今回使用したCSSの解説
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回2番めのリストに使用したCSSの意味はこんな感じッピな~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
#nav {
background: blue;
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
#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>
- CSSはHTMLの見た目を変えるもの
- <head></head>の中に、<style></style>と記述することで、CSSを設定できる
- CSSはタグ全体を変更できるものと、クラスを設定して変更できるもの2種類がある
- セレクタ { プロパティ : 値; } でその タグ 全体の見た目を変更できる
- .クラス名{ プロパティ : 値; } で、<タグ名 class=”クラス名“>と設定したタグの見た目を変更することができる。
- #ID名{ プロパティ : 値; } で、<タグ名 class=”クラス名“>と設定したタグの見た目を変更することができる。
- ID と クラス では、IDが優先される。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなホームページの基礎解説をしていくッピ!
次回も楽しみにしているッピよ~~!