ウェブデザインはCSSでカスタマイズしよう

ブログの見た目のデザインをカスタマイズする際は、CSS(スタイルシート)で変更することになります。
テキストのフォントサイズや背景の色彩、あるいは行間の大・小など、自分好みのデザインにカスタマイズすることができます。

~ カスタマイズする際の手順 ~

①カスタマイズする箇所をhtmlで確認
②スタイルシートでの対応する箇所を変更
③再構築し、ブラウザのキャッシュを更新

①例えば、「ヘッダーのフォントサイズを変更したい」としますと、まず、htmlソースでヘッダーに対応する箇所をチェックします。
htmlソースを確認する場合、ブラウザのソースの表示で閲覧することができます。

この際、html上でのヘッダーの要素が<div class="header">となっていた場合、スタイルシートでもこのheaderに該当する箇所が存在しますのでそれを確認します。

例えば、スタイルシートでの該当箇所が

.header {
font-size:14px;
background-color:#777777;
}

などとなっていた場合、ヘッダー部分の文字の大きさが14px、背景の色彩が#777777で指定されていることを意味しています。

②ですので、文字の大きさを小さくしたい場合はfont-size:13px;に、大きくしたい場合はfont-size:16px;にしたりして、自由にカスタマイズすることが可能なわけです。

実際のスタイルシートは、他にも余白のpaddingやmargin、あるいは行間のline-height、あるいは幅や高さを指定するheightやwidthなどがありますので、初心者の方は必要な箇所だけ変更していくのがよいでしょう。

③このスタイルシートのカスタマイズをする際、自分のブラウザではきちんと表示されていたとしても、他社のブラウザでは崩れているケースも存在します。IEのほか、Firefoxやchromeなど、それぞれのブラウザで閲覧してみて、きちんと表示されているかを確認されることをおすすめします。

重要度の高い順からいいますと、ユーザーのシェアの多いIE(インターネットエクスプローラー)、次に多いFirefoxで確認しておけば、ほぼ問題ないかと思われます。



アーカイブ