CSSスキル ー 第3章 チャレンジ

font系CSSを利用して、お知らせページを作ってみよう

このスキルのデータをダウンロード: Windows Mac

チャレンジ内容

font系のCSSを活用して、見やすいお知らせページを作ってみましょう。



使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、style.cssに記述していきましょう。



進め方

01.ページ全体とヘッダーの文字スタイルを変更しよう

・まず、<body>タグにtext-alignプロパティを書いて、サイトの文字を真ん中に寄せましょう。
・サイトの見出し1にGoogle Web Font 「Pacifico」を適応させます。
・ヘッダーの中の<p>タグをイタリック体にし、行間や文字の太さの調整をします。



02.コンテンツ部分の文字スタイルを変更しよう

・見出し2のサイズや太さ、スタイルを変更し、下線の追加をします。
・<dt>タグに文字サイズ、色、太さの設定をします。スタイル
・<dd>タグの中の<a>タグに対しては文字の色と、下線をなくすという設定をしていきます。





この手順で進めていくと、このようなお知らせページが完成します。
みなさんも、ぜひチャレンジしてみてください。