CSS入門講座|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が優先される。

うさタブ
うさタブ

上手くできたッピか?

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

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

タイトルとURLをコピーしました