HTMLとCSSでフレームを作る
ひながたを作る
何も無い状態からWordPressで作業するのは無謀に感じたので、まずは、htmlとcssで軽くレイアウト確認のコードを書いてみる。htmlは次のような形になる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <!-- html ヘッダ --> </head> <body> <div id="wrap"> <div id="header"> <!-- header --> </div> <div id="navi"> <!-- navigation menu --> </div> <div id="side"> <!-- side bar --> </div> <div id="main"> <!-- main content --> </div> <div id="footer"> <!-- footer --> </div> </div> </body> </html>
head部まで
<!DOCTYPE>で文書型を宣言して<html>で始め、<head></head>内に情報を書く。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="style.css"> <title>WordPress template test</title> </head>
header部
header部にはタイトル画像だけを配置する。
<div id="header"> <img src="images/title.png" width="1000" height="160"> </div>
navi,side部
navi,side部のメニューはリストを使って階層化する。
<div id="navi"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu1</a> <ul> <li><a href="#">Menu1-Sub1</a></li> <li><a href="#">Menu1-Sub2</a></li> <li><a href="#">Menu1-Sub3</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">Menu2-Sub1</a></li> <li><a href="#">Menu2-Sub2</a></li> <li><a href="#">Menu2-Sub3</a></li> </ul> </li> </ul> </div>
side部もnavi部と同じ内容にしておき、cssで項目の表示方法を変えることにする