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

CSS
この記事で学べること
  • 文字色を変更する
  • 文字を太字にする
  • 文字の大きさを変更する

アイカ
アイカ

う~ん・・・

ユウキ
ユウキ

どうしたのアイカちゃん?

アイカ
アイカ

あ、ユウキくん!

実は・・・

アイカ
アイカ

フッターのサイトマップを作ってたんだけどね、

なんだかみんな同じ感じになっちゃって・・・ゴチャゴチャして、わかりにくくなっちゃったの・・・

アイカ
アイカ

もう少し、きれいに整えることできないかなぁ~?

うさタブ
うさタブ

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

うさタブ
うさタブ

うさタブに任せるッピ! 3分で片付けるッピよ~!

CSSによる文字色の変更例
CSSによる文字色の変更例

最後はこんな風になります!

どうやって変えるのか、一緒に勉強していきましょう!

CSSの文字設定について学ぼう

元になるコード

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
nav{
  display: flex;
  color: #FFF;
  background: #666;
}

nav li{
  list-style-type: none;
}
</style>
</head>

<!-- 見える部分の内容 -->
<body>
<nav>
	<ul>
	<li>初めてのお客様へ</li>
	<li>お問い合わせ</li>
	<li>よくある質問</li>
	<li>プライバシーポリシー</li>
</ul>

<ul>
	<li>コンテンツ紹介</li>
	<li>利用規約</li>
	<li>お知らせ</li>
	<li>会社概要</li>
</ul>

<ul>
	<li>サポート</li>
	<li>マニュッピガイド</li>
	<li>アクセス/交通機関</li>
	<li>モバイルサイト</li>
</ul>
</body>
</html>
うさタブ
うさタブ

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

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

文字の太さを変更する

アイカ
アイカ

あのね、ウサタブさん!

お願いがあるんだけど、ホームページのこの部分だけ

文字を太く】したり、【文字色を変えて】もっとハッキリさせたり、もう少し【文字を大きくする】ことってできないかなぁ?

うさタブ
うさタブ

お安いご用ッピよ!

うさタブ
うさタブ

まずはこの部分の【文字を太字】にするッピネ!

<li>タグの最初の部分だけなので、この部分に【クラス】を設定するッピよ~

うさタブ
うさタブ

<style></style>の間に

.menu{
  font-weight: bold;
}

と入力するッピよ~

うさタブ
うさタブ

<body></body>にある、CSSを適用させたい<li>タグ

<li class="menu">

と入力するッピネ~

サンプルコード
<style>
nav{
  display: flex;
  color: #FFF;
  background: #666;
}
nav li{
  list-style-type: none;
}
.menu{
  font-weight: bold;
}
</style>
<!-- 見える部分の内容 -->
<body>
<nav>
	<ul>
	<li class="menu">初めてのお客様へ</li>
	<li>お問い合わせ</li>
	<li>よくある質問</li>
	<li>プライバシーポリシー</li>
</ul>

<ul>
	<li class="menu">コンテンツ紹介</li>
	<li>利用規約</li>
	<li>お知らせ</li>
	<li>会社概要</li>
</ul>

<ul>
	<li class="menu">サポート</li>
	<li>マニュッピガイド</li>
	<li>アクセス/交通機関</li>
	<li>モバイルサイト</li>
</ul>
</body>

ユウキ
ユウキ

お、なんか太くなった気がする!

アイカ
アイカ

良い感じだね♪

文字を太くするfont-weight: bold;

うさタブ
うさタブ

今回使ったプロパティ(命令文)の説明をするッピネ~

うさタブ
うさタブ

.menuクラスmenuをつくります{
font-weight文字の太さを変更します: bold;太字にします
}

という意味ッピ!

文字の大きさを変更する

うさタブ
うさタブ

まだまだ終わらないッピネ!

ここからさらに【文字の大きさ】を変更するッピヨ~!

うさタブ
うさタブ

<style></style>.menu 間に

  font-size: 120%;

と入力するッピよ~

サンプルコード
<style>
nav{
  display: flex;
  color: #FFF;
  background: #666;
}
nav li{
  list-style-type: none;
}
.menu{
  font-weight: bold;
  font-size: 120%;
}
</style>

ユウキ
ユウキ

おおお! ちょっと大きくなってる!

文字の大きさを変える font-size プロパティ

うさタブ
うさタブ

今回使った font-size プロパティについて解説するッピ!

うさタブ
うさタブ

font-size文字の大きさを変更します: 120%基準値から120%の大きさに設定します;

という意味になるッピ!

うさタブ
うさタブ

この他にも、

font-size: 12px;

font-size: 10em;

と、『 % 』以外にも変更できるッピネ~!

font-size: 80%;

このように基準値より小さくすることもできるッピヨ~

文字の色を変更する

アイカ
アイカ

あのね、ウサタブさん。

この大きくしてもらった部分、もっと目立たせることってできるかしら?

アイカ
アイカ

どうしてもフッターをみたとき、最初にここに目を通してほしくって・・・

うさタブ
うさタブ

それなら、色を変えてみると良いかもしれないッピネ!

うさタブ
うさタブ

<style></style>の間にある .menu

  color: #ffd700;

と入力するッピよ~

全体のコードの確認

<!-- 見えない部分の設定 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
nav{
  display: flex;
  color: #FFF;
  background: #666;
}
nav li{
  list-style-type: none;
}
.menu{
  font-weight: bold;
  font-size: 120%;
  color: #ffd700;
}
</style>
</head>

<!-- 見える部分の内容 -->
<body>
<nav>
	<ul>
	<li class="menu">初めてのお客様へ</li>
	<li>お問い合わせ</li>
	<li>よくある質問</li>
	<li>プライバシーポリシー</li>
</ul>

<ul>
	<li class="menu">コンテンツ紹介</li>
	<li>利用規約</li>
	<li>お知らせ</li>
	<li>会社概要</li>
</ul>

<ul>
	<li class="menu">サポート</li>
	<li>マニュッピガイド</li>
	<li>アクセス/交通機関</li>
	<li>モバイルサイト</li>
</ul>
</body>
</html>
アイカ
アイカ

できたわ!

ユウキ
ユウキ

バッチリだな!

文字色を変更する color プロパティ

うさタブ
うさタブ

先程使ったプロパティを解説するッピ!

color文字色を変更します: #ffd700色はオレンジです;

という意味ッピ!

アイカ
アイカ

この#ffd700 という数字は何かしら?

他のページのコーディングでもよくみるけど・・・

うさタブ
うさタブ

それは【カラーコード】ッピネ!

WEBやパソコンで色を表現したいとき、『#』6つの数字と、A~Fまでのアルファベットでできるッピよ~

ユウキ
ユウキ

6つの数字とアルファベット~?

うさタブ
うさタブ

そうッピネ・・・例えば、

#000000 は

#FFFFFF は白

#FF0000 は

#0000FF は

#00FF00 は(ライム)

という意味ッピ!

うさタブ
うさタブ

パソコンでは光の三原色というものをつかって

モニターについてる『』の小さな明かりをつけたり消したりして色を表現しているッピ!

うさタブ
うさタブ

この数字とアルファベットを駆使することで、

モニターについてる『』の明るさを調節して色をつくってるッピよ~

ユウキ
ユウキ

まったくわからない・・・

アイカ
アイカ

ちょっと今のわたしには難しいなあ・・・

うさタブ
うさタブ

使ってるうちに嫌でも覚えていくッピ!

カラーコードの見本サイトを紹介するッピゆえ、こちらで勉強するがッピヨ!

WEBカラーの見本サイト
WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

初期のcssプロパティ(命令文)解説

うさタブ
うさタブ

初期のCSSプロパティの解説をするッピネ!

うさタブ
うさタブ

nav<nav>の見た目を設定します {
display各コンテンツの配置/見せ方は: flex;横並びです
color文字色は: #FFF;白です
background:背景設定は #666;灰色です
}
nav li <nav>の中の<li>は{
list-style-typeリストの●は: none;消します
}

という意味ッピ!

アイカ
アイカ

とてもわかりやすかったわ、ありがとうウサタブさん!

ユウキ
ユウキ

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

学習のまとめ
  • color: 文字色; で文字の色を変更することができる
  • font-size: 大きさpx; で文字の大きさを設定する
  • font-weight: bold; で文字を太字にする
うさタブ
うさタブ

上手くできたッピか?

これからも色んなCSSの基礎解説をしていくッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

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