XHTML記述でサイト作成、cssとスタイルシートの記述方法の説明。
スタイルシートの使い方8
では、先程記述したスタイルシートのデザインを「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>
<div class="toptitle">
<h1> タイトル </h1>
</div>
<br />
<table class="tabletop">
<tr>
<td valign="top">
ここにサイトの紹介文を記入
<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu" valign="top">
<tr>
<td class="tablemenyu">
<tr>
<td>
メインメニュー
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</table>
<td class="tablekiji" valign="top">
<table class="komidasi">
<tr>
<td>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu">
<tr>
<td valign="top">
<table class="komidasi">
<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 valign="top">
ここにサイトの紹介文を記入
<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu" valign="top">
<tr>
<td class="tablemenyu">
<div class="menyu">
<table class="menyulist"><tr>
<td>
メインメニュー
</td>
</tr>
<td class="kugiri">
<a href="index.html">トップページ</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu1.html">メニュー1</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu2.html">メニュー2</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu3.html">メニュー3</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu4.html">メニュー4</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu5.html">メニュー5</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu6.html">メニュー6</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu7.html">メニュー7</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu8.html">メニュー8</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu9.html">メニュー9</a><br /></td>
</tr>
<td class="kugiri">
<a href="menu10.html">メニュー10</a><br /></td>
</tr>
</table>
</div>
</td><td class="tablekiji" valign="top">
<table class="komidasi">
<tr>
<td>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu">
<tr>
<td valign="top">
<table class="komidasi">
<tr>
<td>
小見出し2<br />
</td>
</tr>
</table>
宣伝、リンク集など<br />
</td>
</tr>
</table>
</body>
</html>
赤い文字のところが変更点です。記述し終わったら上書き保存して ブラウザで確認してみてください。
今の記述でこのようになっていたら成功です。
→このページの見本
これでこのサンプルページは完成しました。後はあなたの 作りやすいように変更してください。
今後小ネタ集なども作っていく予定ですが、
もっと詳しく「XHTML」を学びたい方は書籍を買って勉強ことをおすすめします。
このサイトより解りやすく記述してあるので、1冊はあって間違いないと思います。
サイトが完成したら、今度は作ったサイトをみんなに見てもらえるように インターネット上に公開しましょう。
アフィリエイトを知ろう
アフィリエイトとは??
アフィリエイトの手順
ホームページ作成編
ホームページを作ろう
どんなサイトを作ろうか
作業用フォルダと構造
作業の進め方と設定
XHTMLを覚えよう
サイトの骨組みを作る
tableタグを使う
デザイン自由なCSS
CSSの使い方1
CSSの使い方2
CSSの使い方3
CSSの使い方4
CSSの使い方5
CSSの使い方6
リンクの貼り方
CSSの使い方7
CSSの使い方8
サイトを公開する
アフィリエイト編
ASPって何だろう??
おすすめASP一覧
広告選びのコツ
アクセスアップ編
アクセスアップの必要性
検索エンジンに登録
リンクの量と質を上げる
相互リンクとは??
SEO対策とは??
metaタグの使用
キーワードの最適化
hXタグの使用
サイトの更新