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の基礎解説をしていくッピ!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

CSSCSS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました