『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

CSS02 CSSファイルの作り方と文字サイズ、文字色の指定(7分41秒)

CSSファイルの作り方と文字サイズ、文字色の指定

CSSファイルの作り方と文字サイズと文字色の指定について解説しています。

特に、文字色の指定では、16進数を使ったカラーコードについて詳しく解説していますので、参考にしてみてください。

概要

  • CSSファイルの作り方
  • HTMLファイルとCSSファイルのリンク方法
  • 文字サイズの指定
  • 文字色の指定(カラーネーム)
  • 文字色の指定(カラーコード)

補足・ポイント

CSSファイルの作り方

  1. テキストエディタで新規にファイルを作成し、拡張子を.cssにして保存します。
  2. HTMLファイルのhead要素内にCSSファイルへのリンクを記述します。

CSSファイルの1行目 文字コードを指定

@charset "utf-8";

HTMLファイルのhead要素内 CSSファイルへのリンクの記述

<link rel="stylesheet" href="styles.css">

文字のサイズを指定

スタイルシートでフォントサイズを指定するにはfont-sizeプロパティを使います。

値には、px、ptといった単位を使った数値や%やキーワードを使った相対的に指定できる値が入ります。

h1 {
font-size:50px;/*文字サイズの指定*/
}

単位を指定

px(ピクセル。ディスプレイの1画素を1pxとした単位)

em(エム。ブラウザで設定しているフォントサイズの高さを1とする単位)・・・など。

割合%で指定

各ブラウザは、標準(デフォルト)フォントサイズを持っています。

デフォルトのサイズを100%として、相対的にサイズを指定します。

実際にはブラウザによって計算されたpx値になります。

例:デフォルトが16pxの場合で75%を指定すると・・・16×0.75=12px・・・となります。

h1 {
font-size:75%;
}

キーワードによる絶対指定

mediumを基準として、1.2倍づつ大きさが異なる。
xx-small , x-small , small , medium ,large , x-large , xx-large

h1 {
font-size:small;
}

キーワードによる相対指定

largerを指定すると、親要素のフォントサイズに対して1.2倍大きくなります。

smallerはその逆。

h1 {
font-size:larger;
}

文字色の指定

スタイルシートで文字の色を指定するにはcolorプロパティを使います。

カラーネームや16進数を使うカラーコードなどがあります。

カラーネーム

色の名前で指定する方法です。

代表的な色については「red」「yellow」「white」というように色の名前を使って色の指定ができます。

body {
color:red;
}

カラーコード

パソコンの画面上での色は、「赤(R:Red)」「緑(G:Green)」「青(B:Blue)」の組み合わせで表されます。

色の3原色である赤、緑、青を、色が最も弱い00~色が最も強いffまでの16進数を使って指定するのがカラーコードです。

0~9、a~fの6桁の英数字で指定します。

00~ffをRGBの順に並べ、頭に半角のシャープをつけて「#RRGGBB」というように表現します。

h1 {
color:#00ff00;
}

例えば、

青の純色は、#0000ff

赤の純色であれば、#ff0000

緑の純色であれば、#00ff00

独学 css 色の指定方法

6つの数値は#RRGGBBを意味していて、Rの赤 Gの緑 Bの青という対応になっています。

これらRGBの組みあわせで様々な色を指定することが可能です。

Photoshopのカラーピッカーでは、任意に選んだ色の16進数を表示してくれるので、とても便利です。

いろんな色を試してみてください。

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!