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やパソコンで色を表現したいとき、『#』と６つの数字と、A~Fまでのアルファベットでできるッピよ～

ユウキ

６つの数字とアルファベット～？

うさタブ

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

#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;消します
}