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

#03: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の会員登録が必要です

無料会員登録して始める

★ 実技1
★ 実技2
★ 実技3

実技課題「テキストを太字にする」

右側のコードエリアの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」にしてください。

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

期待する出力値

ここでは、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のフォント指定を理解しよう

実行する

採点する

入力
出力
コンパイルエラー
実行時エラー

出力タイプ：

コード判定結果

実技課題 「テキストを太字にする」

期待する出力値

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

期待する出力値

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

期待する出力値

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

参考になるWebサイト

実技課題「テキストを太字にする」

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

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