Googlefontsを活用して、ヘッダーのフォントを変更する
今回やったことはただひとつ。ヘッダーのフォントを変更しただけです。
ヘッダーのフォントを変更する
以下、今回の記述です。
最上部
@import url('https://fonts.googleapis.com/css?family=Chango');
body {
font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif;
background-color: #edede3;
margin: 0;
}
h1 {
font-size: 38px;
margin-top: 0;
margin-bottom: 0;
}
～省略～
/*ヘッダー*/
header {
background-color: #ffffff;
border-bottom: solid 1px #aaaaaa;
margin-bottom: 30px;
box-shadow: 0 1px 7px #aaaaaa;
padding: 5px;}
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
赤字の部分が今回追加した記述です。
まず最上部に
@import url('https://fonts.googleapis.com/css?family=Chango');
と記述します。
これはGoogle fontsを使う場合に必要な記述です。Google fontsについて詳しく記載されてあるサイトがあったので、以下から参考にしてください。
なぜ上記のサイトを参考したかというと、HTML&CSS3レッスンブックを参考テキストにしているんですが、このテキストで紹介されている方法は古いらしく、全然参考にならなかったからです。同じテキストを参考にしている方なら、いずれぶつかる壁だと思うので、上記のようなサイトを参考にすることをおすすめします。
では本題に戻ります。
@import url('https://fonts.googleapis.com/css?family=Chango');
と記述し、Google fontsを読み込めるようにしておきます。次に、ヘッダー内に
header h1 {
font-family: 'Chango', cursive;
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
上記の新しいセレクタを記述します。h１で記述しなかったのは、このページにはh１がふたつ存在するからです。h１で一緒くたに指定してしまうと、body下部にあるh１にも適用されてしまうので、それを避けるためにheader h1とセレクタを指定する必要があります。
もし、このページにh１がひとつしかなかった場合は、h１だけで指定しておけば問題ありません。
font-family: 'Chango', cursive;
これはchangoというGoogle fontsを使うという指定です。これはページ最上部にある指定がなければ有効になりません。cursiveという記述については、Google fontsからコピペしているだけなので、詳しい解説はありませんでしたが、必要な記述なので、しっかりコピペして使用しましょう。
文字サイズ 余白と横幅の指定
font-size: 24px;
width: 900px;
margin-left: auto;
margin-right: auto;
上記の記述により、文字サイズは24pxになり、横幅が900pxに指定されました。さらに左右の余白を均等にするようにしているため、バランスが取れたヘッダーをデザインできました。
ただし、以前フッターについて話したときと同じように、ヘッダー全体が左に寄っているため、左寄りに見えるデザインになっています。しかし、ヘッダーという枠全体で見たときは、左右均等の余白に指定されています。
まとめ
今回行ったことは非常にシンプルで、Google fontsの使い方さえ理解していれば、何も難しいことはありませんでした。ただ、テキストで紹介している方法が通用しなかったので、新たにGoogle fontsの設定の仕方を探す手間が必要になっただけです。
今回のBefore Afterです。
Before
After
ヘッダー部分のフォントが変更したのがわかると思います。今回のように簡単な設定で、大きくデザインが変わるのは、やっていて楽しいなって感じますね。
引き続き勉強していきます。
