上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2テンプレートを実際に作ってみる企画です。
 はじめから読むには、以下からどうぞ。
FC2テンプレートを1から作ってみる

 次の手順はブロック内にアイテムを放り込んでいくわけですが、その前に「スタイルシートファイル(スタイルシートの編集)」も同時に編集していくと、後で収拾が付かなくなるのを防ぎます。




クラス・IDを書き留めておく


 前回で「裸のHTMLファイル」+「骨格」が出来ました。
 これをCSS(スタイルシート)で制御するためには、「スタイルシートファイル」のほうにも、クラス・IDを書き込んでおくことが必要になります。
 詳しいCSSのレッスンはこちらから。
次のステップの前に(スタイルシートってなに?)


 つまり、以下のように、スタイルシートの「旗印」だけでも最初のウチに建てておきます。あとから
「ここのブロックはどういうクラスネームをつけたっけ?」
「ここのブロックはどういうIDネームをつけたっけ?」
 と、訳が分からなくなるのを防ぎます。

 HTMLで、クラスネーム、IDネームをつけたら、随時スタイルシートファイルの方にも「旗印」を建てておくことをお勧めします。



書き方の見本


【HTMLファイルの編集】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%template_language>" lang="<%template_language>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="Top" />
<link rel="index" href="<%url>?all" title="<%template_index>" />
</head>
<body>
<!--コンテナ-->
<div id="conteinar">

<!--ヘッダー-->
<div id="header">
</div>
<!--ヘッダーここまで-->

<!--メインカラム-->
<div id="main">
</div>
<!--メインカラムここまで-->

<!--サイドバー-->
<div id="side">
</div>
<!--サイドバーここまで-->

<!--フッター-->
<div id="footer">
</div>
<!--フッターここまで-->
</div>
<!--コンテナここまで-->
</body>
</html>


【スタイルシートファイルの編集】
/* 全体の設定 */
body{}

/* レイアウト */
#conteinar{}
#header{}
#main{}
#side{}
#footer{}


 このような感じで書き留めておきます。
 CSSに書き順などはないので、自由に書くことが出来ますが、これも訳が分からなくならないように、一定のブロックごとに纏めるとか、一定の役割ごとに纏めておくことをお勧めします。

●CSSのコメント(注釈)は「/* ○○○○ */」と言う書き方をします。HTMLの時と書き方が違うので注意。


■次こそいよいよコンテンツを作り上げていきます。
ヘッダー、フッターを作成する
このエントリーをはてなブックマークに追加
Mon.01.03.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。