準備:スタイルシート変更を行う作業ページ

SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「デザイン一覧」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。
下の画像のようなページが表れます。このページでスタイルシートを変更していきます。

 
スタイルシート設定画面

スタイルシートの簡単な説明

 スタイルシートとは、ホームページ作成の際にHTMLだけでは定義しきれない文字の大きさ、行間、背景、枠線などの設定を定義するもので、HTMLファイルとリンクして、(あるいはHTMLファイルの冒頭に書き込んで)使用するものです。

テンプレート「若草」で説明

テンプレート「若草(右サイドナビ)」のスタイルシートの一番上に書かれているセレクタ名「body」の部分で説明します。

body {  ←セレクタ名「body(ページ全体)」
font-family: Arial, Helvetica, sans-serif;  ←フォントの種類:Arial, ・・・
margin:0px;  ←枠外の余白(4方向):0px(余白なし)
padding:0px;  ←枠内の余白(4方向):0px(余白なし)
text-align:center;  ←文字列の配置(横方向):中央揃え
background-color:#CFCFCF;  ←背景色:#CFCFCF (明るい灰色)
}

スタイルシートは セレクタ名{ } という形で構成されています。
セレクター名のところには、スタイルを適用させる範囲を指定し、
{}の中には、スタイルの内容をルールに則って箇条書きしていきます。

上の場合は、HTMLファイルの<body>〜</body>の範囲内に適用させるスタイルを{}の中に書き込んでいます。


セレクタの種類

セレクタにはあらかじめ定義されているものと、自分で定義するものがあります。
テンプレート「若草(右サイドナビ)」のスタイルシートの場合、あらかじめ定義されているセレクタはほとんど上のほうに書かれています。 body、a、h1、h2、h3 などのHTMLタグで特定されるいくつかの部分です。

自分で定義する場合はセレクタ名の頭の部分に「.」(クラス)や「#」(ID)の記号をつけます。
自分で定義したセレクタを使用する場合は、HTMLファイルの方にもその場所を指定する記述が必要になります。

<div id="content"
<div class="main-content"
・・・・・
<div class="blog"
・・・・
</div>
</div>
</div>


また、「.」(クラス)で定義されたセレクタは1つのページに何回でも使用できますが、「#」(ID)で定義されたセレクタは1つのページに1回しか使えないというルールがあります。

ちなみにタグの<div>は特に意味のない汎用性の高いブロック要素です。


スタイルシートをもっと詳しく学びたい方は、詳しい解説を載せたサイトを閲覧するか書籍を購入するなどしてください。

個人的には手元に書籍が1冊あったほうが便利だと思いますが、ネット検索でも充分勉強できると思います。

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。