← クエスト一覧

クエスト17：フォントと文字スタイル

スライド 1 / 2
コーデ
💻 コード例
実行結果
← クエスト一覧
🌐 HTML & CSS / Quest 17 / 50

クエスト17：フォントと文字スタイル

応用 +10 XP
🏠
今回の課題
タイトルを大おおきく・中央ちゅうおうに・太字ふとじにしよう！
📖 解説を見る
🔤 文字もじのスタイルをカスタマイズしよう！

CSSで文字もじの見みた目めをいろいろ変かえられます。

✏️ よく使つかうプロパティ：
font-size: 24px;　文字もじの大おおきさ
font-weight: bold;　太字ふとじ
font-style: italic;　斜体しゃたい
line-height: 1.8;　行間ぎょうかん
letter-spacing: 2px;　文字間隔もじかんかく
text-align: center;　中央揃ちゅうおうそろえ
text-decoration: underline;　下線かせん
ヒントを見る
h1 に font-size: 48px; text-align: center; font-weight: bold; を書こう！
📄 見本
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
正解！見本と同じになりました。
次へ →
🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解 レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: letter-spacing で文字間隔もじかんかくを広ひろげてみよう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 2: text-shadow: 2px 2px 4px rgba(0,0,0,0.3) でテキストに影かげをつけよう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
未挑戦

問題 3: 太字ふとじ・斜体しゃたい・下線かせん・取とり消けし線せん（line-through）の4つのスタイルをそれぞれ別べつの <p> に適用てきようしよう！（自由じゆう回答かいとう）

🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
コピーしました！