CSS Lesson
フル CSS のレイアウトを実例をもとに解説しています。正しい文書構造、W3C 推奨に準拠していない場合もありますのでご了承ください。
※解説は WordPress インストール済みの環境を前提にしています。

CSS入門1 : CSS・PHPファイルと記事の準備

CATEGORY : CSS段組レイアウト入門 | UPDATE : 2008.10.23

Dreamweaver を使って、直感的にテーブル組でデザインしていた方には、CSS は扱いにくいかもしれません。しかし、使われる CSS プロパティの数はそれほど多くなく、単純な英語に数値を変えて繰り返し使っているだけなので、コツさえつかめば難しいことはありません。
※作成するのは、下のような2段組レイアウトのベースです。

1 ： 標準のテンプレートに手を加えたくない時の準備
標準のテンプレート、CSSファィルに手を加えたくない場合は、次の手順で新しいファィルを作成して、テーマフォルダの中に追加します。
▶CSSファイルの作成 : テキストエディタで、ファイルの最初にテーマネームを記述して、lesson.css のファイル名で保存します。
/*
Theme Name : LESSON
*/
▶PHPファイルの作成 : テキストエディタで、ファイルの最初にテンプレートネームを記述して、lesson.php のファイル名で保存します。
<?php
/*
Template Name : LESSON
*/
?>
  • CSS、PHPとも既存ファイルと重複しなければ、好きな名前を入れられます。ファイル名は半角英数字の小文字で、LESSON などのネームは大文字・小文字・日本語が使えます。
▶ふたつのファイルをwp-content／themes／使用中のテーマファルダ内にインストールし、管理画面／デザイン／テーマエディタでふたつのファイルがテーマファイルに登録されていることを確認してください。
2 ： それぞれのファイルに基本情報を記述
上で新しくファイルを追加した場合は、それぞれのファイルに下のタグを記述します。既存のファイルを使う場合はすでに記述済みのはずです。
■PHPファイルに記述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" href="<!-- lesson.cssまでのアドレスをフルパスで入力 -->" type="text/css" />
<meta name="keywords" content="<!-- 検索サイトに登録するキーワードを,区切りで入力 -->" />
<meta name="Description" content="<!-- 検索サイトに登録するサイト紹介文を入力 -->" />
<title><!-- サイトタイトルを入力 --></title>
<!-- WordPress の場合さらにRSS配信などのテンプレートが追加されます -->
<?php wp_head(); ?>
</head>

<body>
レッスンテンプレート <!-- 解説用に記入します -->
</body>

</html>
※<!-- 説明 --> は解説用の説明で、HTML として適応されません。その部分に必要なタグ又はテキストを入力したら <!--　--> も含めて削除します。PHP ファイル内でメモを残したいときにこの書式で使います。
  • <!DOC... と <html... : テキストを HTML として認識させる HTML 宣言で、必ず必要です。
  • <head>... </head> : CSSファィルの取得や、サイトの基本情報を書式に沿って書き込みます。レッスン用は CSS ファイルの取得と <?php wp_head(); ?> 以外省略して結構です。
  • <body>... </body> : HTML や PHP タグをこの中に書き込みます。
  • </html> : HTML 終了宣言。
▷標準のテーマファィルは <?php bloginfo('stylesheet_url'); ?> のテンプレートタグで WP の情報から CSS のアドレスを取得できます。
■CSSファイルに記述
/*++全称セレクタ++*/
* {
margin: 0;
padding: 0;
}

/*++ボデイ設定++*/
body {
font-size: 13px;
line-height: 22px;
color: #FF3333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
text-align: center;/*　テキスト中央揃え　*/
}

img {
border: 0;
}

※/*　説明　*/ は解説用の説明で、CSS ファイル内でメモを残したいときにこの書式で使います。
  • 全称セレクタ : ブラウザによって設定の異なる margin 値、padding 値をすべて 0 にします。
  • body : 文字の大きさ、行送り、文字色、フォントを指定します。フォントカラーは解説用として赤にしています。
    text-align はテキスト揃えを設定するプロパティです。ブラウザによって margin の auto 設定だけではボックスが中央に配置されないため center に指定します。
    設定を削除するとボックスは左上に配置されます。
    テキストを中央揃えに設定しましたので、page ボックスは text-align : left で文字を左揃えに戻します。
  • img : 画像のリンクボーターを 0 にします。
※解説では使用しない設定も含まれています。CSS ファイルに必要な基本設定として考えてください。
3 ： デザインを表示させるページ記事の作成
レイアウトを表示・確認するために、管理画面から作成／ページで新規のページ記事を作成します。
▶タイトルやコンテンツを好きな文章で入力します。公開ステータスは「公開済み」で「この投稿を非公開のままにする」をチェック。
下へ移動し「ページテンプレート」のドロップダウンメニューからレイアウトに使用するテンプレートを選択します。新たに追加した場合は LESSON を選択し、保存します。
▶「この投稿をプレビュー」で確認し、レッスンテンプレート と赤文字で表示されれば、正常にテンプレート、CSS ファイルが適応されています。
これですべてのファイルが準備できました。次はボックスを作成します。
▲ PAGE TOP

NEXT >>