記事<article>内にある本文中に画像を追加します。画像は<img>を使って表示し、<p>で囲むことで段落とします。この<p>の効果により上下の余白が生まれ、見出しや文章との間隔を確保できます。
ここでは「img」フォルダ内に用意してある街の風景画像（city.jpg）を使用します。
しかし、画像の横幅が大きく、ボックスからはみ出してしまいます。
<article>
<h1>新型タブレット端末ついに発売</h1>
<p><img src="./img/city.jpg"></p>
<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！ 早速レビューしていきたいと思います。</p>
・・省略・・
</article>
<h1>新型タブレット端末ついに発売</h1>
<p><img src="./img/city.jpg"></p>
<p>今週、Mapple社の新型タブレット端末iBoard Pro(第4世代)がついに発売となりました。秋葉原の各店舗にも並んでいる模様です。管理人も早速、朝から行列に並んできました。入荷数は限られているようでしたが苦労の甲斐あって無事入手に成功！ 早速レビューしていきたいと思います。</p>
・・省略・・
</article>
画像がボックスからはみ出しています。
画像が横にはみ出さないように設定します。
ボックスの横幅に合わせて表示されるように、widthで画像の横幅の最大値を「100%」に設定します。さらに、heightで画像の高さを「auto」に設定します（これにより画像が縦方向に歪むのを防ぎます）。
/* 記事 */
article h1 { margin-top: 0;
margin-bottom: 20px;
font-size: 34px; }
article p { margin-top: 0;
margin-bottom: 20px; }
article img { width: 100%;
height: auto; }
画像が<article>ボックスの横幅に合わせて表示されます。
この課題で使用する写真は、フリー写真素材ぱくたそ のものを使用しています。