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が優先される。

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
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をコピーしました