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で見た目を変化させるには、

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

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

うさタブ

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

解説すると・・・

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

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

}変更を終わります

という意味ッピ！

アイカ

これしかできないの？

うさタブ

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

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

うさタブ

<h1>以外にも、

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

うさタブ

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

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

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

HTMLクイックリファレンス

HTMLタグ・スタイルシート・特殊文字等の早見表

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

うさタブ

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

ユウキ

クラス？

うさタブ

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

<style>

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

</style>

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

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

うさタブ

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

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

というッピ！

アイカ

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

うさタブ

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

うさタブ

.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を設定する方法を学ぶッピよ～

うさタブ

#nav {
  background: blue;
}

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

と入力するッピよ～

うさタブ

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

２番めのリスト・・・<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の解説

うさタブ

今回２番めのリストに使用した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>

学習のまとめ

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