WebStationビジネス書の書評を中心に、Webデザインなどの情報を紹介しています。
  • toshi@Twitter
  • Facebookページ
  • RSSリーダーの登録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS(スタイルシート)の基本設定

html_06.png

今回はCSS(スタイルシート)で背景色やリンクの見た目を設定したいと思います。

CSSの文字コード指定

CSSにもHTMLと同様に文字コードを指定する必要があります。

CSS
@charset "utf-8";
/* CSSリセット(省略)*/

@charsetはCSSファイルの先頭に1つだけ記述します。文字コード指定の記述がない場合、自分が意図したデザインが反映されない、もしくは、スタイルシート自体がまったく適用されないといったことが起こりえます。

背景やフォント、文字色の指定

次に、画面全体のデザインを指定します。

CSS
@charset "utf-8";
/* CSSリセット(省略)*/

body {
  background: #FFFFFF url(***.png);
  font: 16px/26px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;
  color: #444;
}

body {} の間に記述している内容は、HTMLに記述している<body>~</body>にある全ての記述に反映されます。

●background
backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。#FFFFFFは背景色を、url(***.png)は背景画像のURLを指定します。実際には、***.pngは画像のURLを入力します。背景画像を使わない場合は、url(***.png)は不要です。(背景画像の作成方法は、『背景に使えるフリー素材配布サイト 10選』を参考にしてください。)

●font
fontプロパティは、フォントに関する指定をまとめて行う際に使用します。
16px/26pxは、最初の16pxが使用する文字サイズを、/26pxが行の高さ(改行した際の行と行の間隔)を指定しています。

"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;は、使用するフォントを指定しています。
左に記述したものほど優先されます。たとえば、閲覧者のPCに"ヒラギノ角ゴ Pro W3"というフォントがインストールされていない場合には"Hiragino Kaku Gothic Pro"に、このフォントもインストールされていなければ"MS Pゴシック"に・・・というように適応されます。

●color
colorプロパティは、文字色を指定する際に使用します。
背景色と同様に#444という形式で色を指定します。

リンクの色と下線有無の指定

リンクの色と下線の有無を指定します。

CSS
@charset "utf-8";
/* CSSリセット(省略)*/

body {
  background: #FFFFFF url(***.png);
  font: 16px/26px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;
  color: #444;
}
a {
  color: #0000FF;
  text-decoration: none;
}
a:hover {
  color: #0033FF;
  text-decoration: underline;
}

aはリンクのスタイル、a:hoverはリンクにカーソルが乗った際のスタイルになります。

●color
colorプロパティは、リンクの文字色を指定する際に使用します。背景色やフォントと同様です。

●text-decoration
text-decorationプロパティは、テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用します。
上記では、通常のリンクには線は付きませんが、リンクにカーソルが乗ると下線がつくように指定しています。

最後に

今回は、背景色の指定やリンクの装飾など、CSSの基本的な設定について説明しました。徐々に見た目にこだわっていきましょう。

ソーシャルリンク

トラックバック

トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。