ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSSでレイアウト 書き方編

CSSでレイアウトをしよう!

では早速スタイルシート(以下、CSS)をHTMLに適用させましょう。

CSSをHTMLに適用させる方法は、HTMLファイルの<head>内に指定内容を書き加える

<style type="text/css">
<!--
.style1 {color: #FF00FF}
-->
</style>

というように直接書き加えるタイプと、同じく<head>内に

<link rel="stylesheet" href="ファイル名.css" type="text/css" />

とリンクしてCSSが書いてある外部ファイルを読み込むといった方法があります。
CSSを外部ファイルにまとめておく方が、ページ数の多いサイトのレイアウトの管理に便利です。

リンクの貼り方は<link rel="stylesheet" href="ファイル名.css" type="text/css" />

ファイル名.cssを指定のファイルにするだけです。

CSSの書き方のルール

まず、CSSの基本的な書き方を覚えましょう。

タグ名プロパティ

たとえば、p {font-sizesmall;}というような感じで、Pタグのフォントサイズを小さく表示する;}

といった感じで指定のタグにレイアウトをしていきます。

CSSの記述も基本的に小文字で書いていきましょう。

CSSの書き方のルールとしては、プロパティの後は半角コロン:、値の後ろはセミコロン;で閉めること。もちろんプロパティと値は{}で囲います。この半角コロンやセミコロン{}の何かの記述が抜けていると、CSSで指定した装飾やデザインがHTMLに反映されませんので気をつけましょう!

またCSSファイルはメモ帳などのテキストエディタで記入し保存の時は.cssという拡張子で保存しましょう。スタイルシートのファイル名はわかりやすい名前にしておけばOK!たとえば、style.csslayout.cssなど、.cssの拡張子が表示されなくてもわかるような名前にするといいでしょう。

セレクタの指定方法

CSSレイアウトを組む場合は、ページをいくつかの領域に分けることからはじめます。サイドバーを右につけたり左につけたり、タイトルの入ったバナーの画像をトップに配置したりするには、まず領域の指定が必要となります。その領域を指定し、レイアウト、デザインしていくのは<div>で囲います。

ホームページ作成講座でも書きましたが、<div id="○○">という指定で場所と領域をブロッキングしていくような感じです。そしてその装飾や大きさ、場所などが"○○"で指定したCSSの反映される場所です。<div>にはidとclassというしていがあり、<div id=""><div class="">というのでは、CSSの記述が変わってきます。レイアウトの大きな囲みは<div id="">で指定していき、小さな装飾などは<div class="">をつかって指定します。

IDセレクタ

<div id="">で指定するCSSはIDセレクタといいます。
IDセレクタは特定の1つの要素に適用させます。#から記述します。

#title{
width:750px;
background: #FF6600;
height:40px;
line-height:40px;}

とCSSに記載した場合、HTMLに反映させるには
<div id="title">反映させたい文字など</div>となります。

class(クラス)セレクタ

<div class="">で指定するCSSはclassセレクタといいます。
classセレクタは「.」(ドット)から記述します。複数の要素に適用することができるのが特徴。

.red {
color: red;
font-weight: normal;}

とCSSに記載した場合、<p class="red">赤い文字で表示させたい文章</p>となります。

子孫セレクタ

子孫セレクタとは、『サイドバーのアクティブリンクだけメインのアクティブリンクの色と変えたい』などという場合に使います。『○○タグのなかの☆☆タグへの指定』で、使われます。○○☆☆はタグだけではなく、IDやClassにも使えます。さらにタグをいくつもつなげることができます。

#foot p{
font-size:9px;
color:#cccccc;
}

とCSSに記載した場合<div id="footer"><p>フッター内のp要素に指定</p></div>となります。


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME