[Web初心者でも簡単] HTMLとCSSで文字を加工してみよう（CSS実用編１）

フリーランス

2019.10.15

本記事はこんな方にオススメ

「CSSの初心者の方」

「CSSでフォントの指定をしたい方」

「HTMLとCSSを使ったwebページの作り方を学んでみたい方」

本記事の内容

ブログやサイト等で文字のフォントが特別に加工されている部分があります。

見出しの色や文字のサイズが大きかったり、フォントの種類が違ったり…。

HTMLだけでは、文字に特別な加工をかけるのは難しいですが、CSSを使って手順を踏めば、簡単にフォントを変えることだって可能です。

今回はWeb初心者の方向けに、簡単なHTMLとCSSを使って、そのフォントの加工の流れをご紹介していきます。

[Web初心者でも簡単] HTMLとCSSでフォントを加工してみよう（CSS実用編１）

本記事はこんな方にオススメ
本記事の内容

今回の記事のゴール
1. 今回のCSSを使ったフォントの指定はこんなもの
2. 今回の目次作りで身につく知識
HTMLを準備しよう
CSSを準備しよう
今回のHTMLとCSSの骨組み
1. 今回のHTMLの骨組み
2. 今回のCSSの骨組み
他のHTMLとCSSの書き方
1. HTMLの中にCSSも書く方法
2. @importを使って書く方法

今回の記事のゴール

今回のCSSを使ったフォントの指定はこんなもの

今回作るのはこの様なものです。

この記事を読み進めると、Web初心者の方でも上の様に文字のサイズや、色、フォントの種類を変えることが出来ます。

今回の目次作りで身につく知識

文字のフォント種類の変え方
文字の色の変え方
HTMLファイルにCSSの加工を適用させる方法

HTMLを準備しよう

今回使用するHTMLはこちら

今回使う<div>の公式

CSSを適用する範囲を定めているのが、<div>内です。

div要素はそれ自体のみでは意味を持ちません。

しかしdiv要素に何かしらの属性を付けることで、初めて意味を持ちます。

今回の場合はdivの後にid属性を置くことで、<div>〜</div>に名前を名付けています。

具体的には、

「<div id=”family name”>」の部分で、「<div id=”family name”>〜</div>」までの範囲の名前をfamily nameと名付けています。

「<div id=”generic-family”>」の部分で、「<div id=”generic-family”>〜</div>」までの範囲の名前をgeneric-familyと名付けています。

CSSで文字に加工をかける際には、このid=”family name”と、id=”generic-family”の名前を使って、その範囲にだけ直接加工をかけることが可能になります。

今回使う<link>の公式

CSSをHTMLに適用しようとしているときは、○○にはstylesheetと書きます。

そして△△には、適用しようとしているCSSのURLを書きます。

今回の場合は、

「<link rel=”stylesheet” type=”text/css” href=”jazziblog.1.css”>」の部分で、

「jazziblog.1.css」という名前のCSSをHTMLに適用することが指示されています。

CSSを準備しよう

次はHTMLに適用するCSSを作っていきましょう。

今回使用するCSSはこちら

h1に掛けるCSS

h1 {
color: #990000;
font-family: Impact, sans-serif;
}

このCSSでは「<h1>〜</h1>」の部分に、色は#990000で、フォントの種類はImpactで表現するように指示しています。

#family-nameに掛けるCSS

#family-name {
font-family: “Hiragino Mincho Pro”, serif;
}

このCSSでは「<div id=”family name”>〜</div>」の部分のフォントの種類をHiragino Mincho Proで表現するように指示しています。

今回のHTMLとCSSの骨組み

今回のHTMLの骨組み

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>HTML</title>
<link rel=”stylesheet” type=”text/css” href=”jazziblog.1.css”>
</head>
<body>
<h1>font-family</h1>
<div id=”family name”>
<h2>フォント名を指定しよう</h2>
<p>フォントを具体的な名前で指定していきます。</p>
</div>
<div id=”generic-family”>
<h2>キーワードを指定しよう</h2>
<p>フォントを総称ファミリーで指定していきます。</p>
</div>
</body>
</html>

今回のCSSの骨組み

h1 {
color: #990000;
font-family: Impact, sans-serif;
}
h2 {
color: #cc6699;
}
#family-name {
font-family: “Hiragino Mincho Pro”, serif;
}
#generic-family {
font-family: sans-serif;
}