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

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

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

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

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

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


チャレンジ内容

・フォント系のプロパティを使うことができるかどうか
・Google Web Font を使うことができるかどうか



フォント系のプロパティを使って文字のスタイルを変更しよう


まず、文字をすべて真ん中寄せにしたいので、<body>タグにtext-alignを設定しましょう。


body {
text-align: center;
}



サイトの見出し1にGoogle Web Font を使っていきます。
HTMLですでにPacificoフォントを読み込むコードが書かれていますので、CSSにfont-familyプロパティを使って書いていきましょう。



header h1 {
font-family: 'Pacifico', cursive;
}



次に、ヘッダーの中の<p>タグをイタリック体にし、行間や文字の太さの調整をします。



header p {
font: italic bold 14px "MS Pゴシック", sans-serif;
line-height: 30px;
}



ここからはコンテンツ部分のスタイルをかけていきましょう。
見出し2のサイズや太さ、スタイルを変更し、下線の追加をしてください。



h2 {
font-size: 18px;
font-weight: bold;
text-decoration: underline;
font-style: italic;
}



次に、<dt>タグに文字サイズ、色、太さの設定をしましょう。
また、<dd>タグの中の<a>タグに対しては文字の色と、下線をなくすという設定をしていきたいと思います。



dt {
font-size: 12px;
color: #999;
font-weight: bold;
}

dd a {
color: #EE2022;
text-decoration: none;
}



これで、このようなお知らせページが完成しました。