Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ チャレンジ:ブログ記事デザインの改善 | 可読性のためのテキストスタイリング
CSSの基礎

bookチャレンジ:ブログ記事デザインの改善

メニューを表示するにはスワイプしてください

ウェブページには記事が表示されていますが、タイポグラフィの改善が必要です。 次の変更を適用してください:

  1. ページ全体のフォントファミリーを 'DM Sans', sans-serif に設定。
  2. すべての段落の行間(line height)を 1.6 に増やす。
  3. タイトルを太字にする。
  4. タイトルにわずかな文字間隔(2px)を追加。
  5. タイトルに控えめなテキストシャドウを追加:
    • 水平方向のオフセット: 1px
    • 垂直方向のオフセット: 1px
    • ぼかし半径: 3px
    • 色: gray

HTMLは変更しないこと。

index.html

index.html

index.css

index.css

copy
  • body セレクタで font-family プロパティを使用し、'DM Sans', sans-serif に設定。
  • .content セレクタで line-height を指定。
  • .title セレクタでは:
    • font-weight でテキストを太字に設定。
    • letter-spacing で文字間隔を 2px に設定。
    • text-shadow を使用し、4つの値(順番は水平方向オフセット、垂直方向オフセット、ぼかし半径、色)が必要であることに注意。
index.html

index.html

index.css

index.css

copy
すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 2.  4

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 2.  4
some-alt