XHTML記述でサイト作成、スタイルシートとcssの記述方法の紹介。
スタイルシートの使い方6
では、先程記述したスタイルシートのデザインを「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>
<br />
</td>
</tr>
</table>
<br />
<td class="tablemenyu">
<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>
小見出し1<br />
</td>
</tr>
</table>
記事、説明、宣伝など自由に記入<br />
</td>
</tr>
</table>
<br />
<table class="mainmenyu">
<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">
<table class="menyulist">
<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 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>
赤い文字のところが変更点です。記述し終わったら上書き保存して ブラウザで確認してみてください。
変更点の何ヶ所かに「valign="top"」という記述があります。
それは「セル内の文字を上揃えに」という意味です。
スタイルシートとは関係ないのですが、体裁を整えるために使用しました。
「valign」の要素には「top＝上揃え」「middle＝中央揃え」
「bottom＝下揃え」があります。
今の記述でこのようになっていたら成功です。
→このページの見本
次のページではスタイルシートの使用を一旦お休みして、 リンクの張り方を説明します。
アフィリエイトを知ろう
アフィリエイトとは??
アフィリエイトの手順
ホームページ作成編
ホームページを作ろう
どんなサイトを作ろうか
作業用フォルダと構造
作業の進め方と設定
XHTMLを覚えよう
サイトの骨組みを作る
tableタグを使う
デザイン自由なCSS
CSSの使い方1
CSSの使い方2
CSSの使い方3
CSSの使い方4
CSSの使い方5
CSSの使い方6
リンクの貼り方
CSSの使い方7
CSSの使い方8
サイトを公開する
アフィリエイト編
ASPって何だろう??
おすすめASP一覧
広告選びのコツ
アクセスアップ編
アクセスアップの必要性
検索エンジンに登録
リンクの量と質を上げる
相互リンクとは??
SEO対策とは??
metaタグの使用
キーワードの最適化
hXタグの使用
サイトの更新