XHTML記述でサイト作成、スタイルシートからのデザインの反映のさせ方を紹介。
スタイルシートの使い方2
では、先程記述したスタイルシートのデザインを「index.html」に 反映させてみましょう。
下のように「index.html」を書き換えます。
<?xml version="1.0" encoding="shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset-shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
ここにサイトのタイトルを記入
</title>
</head>
<body>
<td>
ここにサイトの紹介文を記入
<br />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<table>
<tr>
<td>
メインメニュー
</td>
</tr>
<td>
トップページ
</td>
</tr>
<td>
メニュー1<br />
</td>
</tr>
<td>
メニュー2<br />
</td>
</tr>
<td>
メニュー3<br />
</td>
</tr>
<td>
メニュー4<br />
</td>
</tr>
<td>
メニュー5<br />
</td>
</tr>
<td>
メニュー6<br />
</td>
</tr>
<td>
メニュー7<br />
</td>
</tr>
<td>
メニュー8<br />
</td>
</tr>
<td>
メニュー9<br />
</td>
</tr>
<td>
メニュー10<br />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<table>
<tr>
<td>
小見出し2<br />
</td>
</tr>
</table>
宣伝、リンク集など<br />
</td>
</tr>
</table>
</body>
</html>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset-shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
ここにサイトのタイトルを記入
</title>
</head>
<body>
<div class="toptitle">
<h1>
タイトル
</h1>
</div>
<br />
<table class="tabletop">
<tr><td>
ここにサイトの紹介文を記入
<br />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<table>
<tr>
<td>
メインメニュー
</td>
</tr>
<td>
トップページ
</td>
</tr>
<td>
メニュー1<br />
</td>
</tr>
<td>
メニュー2<br />
</td>
</tr>
<td>
メニュー3<br />
</td>
</tr>
<td>
メニュー4<br />
</td>
</tr>
<td>
メニュー5<br />
</td>
</tr>
<td>
メニュー6<br />
</td>
</tr>
<td>
メニュー7<br />
</td>
</tr>
<td>
メニュー8<br />
</td>
</tr>
<td>
メニュー9<br />
</td>
</tr>
<td>
メニュー10<br />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<table>
<tr>
<td>
小見出し2<br />
</td>
</tr>
</table>
宣伝、リンク集など<br />
</td>
</tr>
</table>
</body>
</html>
赤い文字のところが変更点です。記述し終わったら上書き保存して ブラウザで確認してみてください。
このようになっていたら成功です。
→このページの見本
だいぶ見栄えがよくなりましたね。
アフィリエイトを知ろう
アフィリエイトとは??
アフィリエイトの手順
ホームページ作成編
ホームページを作ろう
どんなサイトを作ろうか
作業用フォルダと構造
作業の進め方と設定
XHTMLを覚えよう
サイトの骨組みを作る
tableタグを使う
デザイン自由なCSS
CSSの使い方1
CSSの使い方2
CSSの使い方3
CSSの使い方4
CSSの使い方5
CSSの使い方6
リンクの貼り方
CSSの使い方7
CSSの使い方8
サイトを公開する
アフィリエイト編
ASPって何だろう??
おすすめASP一覧
広告選びのコツ
アクセスアップ編
アクセスアップの必要性
検索エンジンに登録
リンクの量と質を上げる
相互リンクとは??
SEO対策とは??
metaタグの使用
キーワードの最適化
hXタグの使用
サイトの更新