おやじ

おやじ

2015年12月14日

スタイルシート(CSS)ひな形の説明

HTMLひな形の説明」した通り、HTMLで文章を書き、そのスタイル(文字の大きさ、色、配置、余白など)を書くのがスタイルシート(CSSファイル)です。

ダウンロードした「style.css」をTeraPadで開いてください。

文字コード

一行目の「@charset “utf-8”;」は文字コード「utf-8」を指定しています。

 

デフォルトスタイルクリア

使用しているPCのブラウザ(IE、Firefox、Safariなど)の種類、バージョンによって行間や余白など基本スタイルが違う場合があります。

どのようなブラウザでも同じように表示するために「デフォルトスタイルクリア」を行っています。

 

基本設定

基本設定ではフォント(書体)、フォントサイズ(文字の大きさ)を指定しています。

基本文字<p>の大きさ ・・・・・・・・・16px(123.1%)
見出し-1<h1>   ・・・・・・・・・22px(167%)
見出し-2<h2>   ・・・・・・・・・20px(153.9%)
見出し-3<h3>   ・・・・・・・・・18px(138.5%)
見出し-4<h4>   ・・・・・・・・・16px(123.1%)
リスト文字<li>     ・・・・・・・・・16px(123.1%)

 

クリアフィックス

floatを使ってスタイルを構成すると表示レイアウトが崩れる場合があります。それを修正するのが「クリアフィックス」です。

作成している間に使い方が理解できると思いますので、ここではレイアウト崩れを直す便利なおまじないとでも覚えていれば大丈夫です。

 

“スタイルシート(CSS)ひな形の説明” への1件のコメント

  1. 新井 俊一 より:

    このページ拝見しました。参考にしてみます

コメントを残す