HTML/CSS入門編2:CSSのフォント指定を理解しよう

<!-- CSSのフォント指定 -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
    body {
            padding: 30px;
            color: #008080;
        }
    </style>
</head>

<body>
    <h1>吾輩は猫である。</h1>
    <p class="lead">名前はまだない。</p>
	<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    <a class="btn btn-primary" href="#">OK</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!-- CSSのフォント指定 -->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
    body {
            padding: 30px;
            color: #008080;
        }
    </style>
</head>

<body>
    <h1>吾輩は猫である。</h1>
    <p class="lead">名前はまだない。</p>
	<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    <a class="btn btn-primary" href="#">OK</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
    <p>世界の皆さん、こんにちは</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
    <p>世界の皆さん、こんにちは</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

この動画を見るには

paiza会員登録が必要です

問題ログインすると模範解答や入力を見ることができます

演習課題「テキストを太字にする」

右側のコードエリアのhtmlは、見出しとテキストを表示します。
headタグ上のstyleタグにスタイルを追加して、pタグのウェイト(font-weight)をboldにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

問題ログインすると模範解答や入力を見ることができます

演習課題「見出しのサイズを2倍にする」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのサイズ(font-size)を400%にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

問題ログインすると模範解答や入力を見ることができます

演習課題「見出しのフォントをserifにする」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのフォントの種類(font-family)を「serif」にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※paizaに会員登録すると無料で動画学習コンテンツをご利用いただけます

会員登録する

＃03:CSSのフォント指定を理解しよう

ここでは、Webページのテキストのサイズや種類をCSSで設定する方法について学習します。

フォントに関連したプロパティ

・文字色

color: white;

・文字の太さ

font-weight: bold;

・文字のサイズ

font-size: 120%;

・文字の種類

font-family: serif;

参考になるWebサイト

CSS入門　＞フォント関係の指定方法
http://www.ink.or.jp/~bigblock/css/font.html

Font−familyのベストな書き方 2015年版 | それからデザインスタッフブログ
http://sole-color-blog.com/blog/design/246/

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法まで
やさしく解説 | コリス
http://coliss.com/articles/build-websites/operation/css/css-font-sizing-by-ire.html

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > CSSのフォント指定を理解しよう

1
2
<!-- CSSのフォント指定 -->
<!DOCTYPE html>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：