ホームページ作成 XHTML

• HOME
• ホームページ テンプレート一覧
• HTML5 HPテンプレートの使用法
• HTML5 HPテンプレートをカスタマイズ
• ホームページ作成 -HTML5-
• XHTML HPテンプレート使用法
• XHTML HPテンプレートカスタマイズ
• ホームページ作成 -XHTML-
• 掲示板の設置法
• スマホ HPテンプレート

ホームページ作成 XHTML

ホームページテンプレート用の、XHTMLです。
ほかにも設定方法はありますが、一番簡単だと思われる方法で書いています。

文字の色を設定する

文字の色を設定するには、タグにクラスをつけることで文字色を設定できます。
以下の色がスタイルシートに設定されています。
■darkblue ■blue ■cyan ■skyblue ■lime ■greenyellow ■green ■darkolivegreen ■olive ■darkkhaki
■red ■tomato ■brown ■maroon ■saddlebrown ■yellow ■gold ■orange ■darkgoldenrod ■magenta
■purple ■blueviolet ■violet ■thistle ■pink ■mistyrose ■tan ■wheat ■silver ■gray ■black ■white
class="ここに使用する色"
<p></p>タグに指定する
使用例
<p class="lime">
文字に色をつけます。
</p>
文字に色をつけます。

<span></span>タグで指定する。
文章中の一部の色を変えたい時は、<span></span>タグで指定することで、改行が入らずに文字色を変えることができます。
使用例
<p>
文字に<span class="yellow">色</span>をつけます。
</p>
文字に色をつけます。

これ以外の色を使いたい場合は、スタイルシートに使いたい色を設定します。
ホームページテンプレートのスタイルシートをカスタマイズに設定法があります。

文字を太字にする

文字を太字にするには、太字にしたいところを<b></b>タグで囲みます。
使用例
文字を<b>太字</b>にする。
文字を太字にする。
文字を強調するには、強調したいところを<strong></strong>タグで囲みます。
文字を<strong>強調</strong>する。
文字を強調する。

文字の大きさを変える

文字を大きくしたい時は<big></big>タグで囲みます。
使用例
文字を<big>大きく</big>する。
文字を大きくする。
文字を<big><big>もっと大きく</big></big>する。
文字をもっと大きくする。

文字を小さくしたい時は<small></small>タグで囲みます。
使用例
文字を<small>小さく</small>する。
文字を小さくする。
文字を<small><small>もっと小さく</small></small>する。
文字をもっと小さくする。

改行する

改行したいところに<br />タグをいれます。
使用例
改行<br />したいところに<br /><br />タグをいれます。
改行
したいところに

タグをいれます。

画像をページに貼り付ける

画像をページに貼りつけるには、<img src="" width="" height="" alt="" />タグを使います。
<img src="画像ファイル名" width="画像横サイズ" height="画像縦サイズ" alt="画像の説明" />
画像がimageフォルダの中にあるimage.jpgを貼り付ける場合
使用例
<img src="image/image.jpg" width="250" height="150" alt="画像の説明" />

画像にリンクするときには、<a href=""></a>タグを使います。
使用例
<a href="image/image.jpg"><img src="image/image.jpg" width="250" height="150" alt="画像の説明" /></a>

ホームページテンプレートで、画像を中央に表示させたいときは、<p></p>タグの外に画像を貼り付けます。

画像の周りに字を回りこませるには、<img>タグにクラスをつけます。
使用例
画像を左に寄せる場合
<p>
<img src="image/image.jpg" width="250" height="150" alt="画像の説明" class="f_left" />
画像の右側に回りこむテキスト
</p>

画像を右に寄せる場合
<p>
<img src="image/image.jpg" width="250" height="150" alt="画像の説明" class="f_right" />
画像の左側に回りこむテキスト
</p>

回り込みを解除するには、解除したいところに<br class="clear" />を使用します。

画像を並べて表示する

画像を並べて表示するにはテーブルを使います。
テーブルを使うときは<p></p>タグの外で使います。
<table border="" cellpadding="" cellspacing="" width="" height="" bordercolor="" bgcolor="">
<tr>
<td>
ここに画像
</td>
<td>
ここに画像
</td>
</tr>
</table>

使用例
<table border="1" cellpadding="10" cellspacing="1" width="" height="" bordercolor="#555555" bgcolor="#000000">
<tr>
<td>
<img src="image/image.jpg" width="250" alt="Sample画像1" />
</td>
<td>
<img src="image/image.jpg" width="250" alt="Sample画像2" />
</td>
</tr>
</table>

枠のないテーブル
使用例
<table border="0" cellpadding="10">
<tr>
<td>
<img src="image/image.jpg" width="250" alt="Sample画像1" />
</td>
<td>
<img src="image/image.jpg" width="250" alt="Sample画像2" />
</td>
</tr>
</table>

センタリングする

ホームページテンプレートでセンタリングするには、<p></p>タグの外に文字や画像を入れるとセンタリングすることができます。

<p></p>タグにクラスをつけることでも、文字をセンタリングできます。
使用例
<p class="center">
センタリングするテキスト
</p>

センタリングするテキスト

文字を右寄せにする
<p class="right">
右寄せにするテキスト
</p>

右寄せにするテキスト

リンクする

リンクするには、<a href=""></a>タグを使います。
<a href="アドレス"></a>
使用例
<a href="http://aaa.jp/">ジャンプ</a>

同フォルダの別ファイルにリンクする。
<a href="page2.html">ページ２</a>

ページ内リンク
ページ内のジャンプしたい所に　name="" と　id=""　をつけます。
使用例
<a name="a01" id="a01"></a>
<a href="#a01">ジャンプ</a>タグでページ内リンクします。
<a>タグ以外のタグにも指定できます。
※a01は好きな英数字

別ページのページ内リンク
ジャンプ先に　name="" と　id=""　をつけます。
使用例
<h3 name="a01" id="a01">・・・</h3>
<a href="page2.html#a01">ジャンプ</a>タグでリンクします。

メールを送信
メールソフトを起動してメールを送信します。
<a href="mailto:メールアドレス">メールを送信</a>

テーブルを作る

テーブルを作るには<table><tr><td></td></tr></table>タグを使います。
テーブルを使うときは、<p></p>タグの外で使います。
<table>タグは、テーブル枠
<tr>タグは、テーブルの行
<td>タグは、テーブルのセル
使用例
<table border="1">
<tr>
<td>１段目コンテンツ１</td>
<td>１段目コンテンツ２</td>
</tr>
<tr>
<td>２段目コンテンツ１</td>
<td>２段目コンテンツ２</td>
</tr>
</table>

使用例
<table border="1" cellpadding="5" cellspacing="1" bordercolor="#555555" bgcolor="#000000">
<tr>
<td>１段目コンテンツ　　　１<br />・<br />・<br />・<br /></td>
<td>１段目コンテンツ２</td>
</tr>
<tr>
<td>２段目コンテンツ１</td>
<td>２段目　　　　　　コンテンツ２<br />・<br />・<br />・<br /></td>
</tr>
</table>

上揃え右寄せで表を作る
使用例
<table border="1" cellpadding="5" cellspacing="1" bordercolor="#555555" bgcolor="#000000">
<tr align="right" valign="top">
<td>１段目コンテンツ　　　１<br />・<br />・<br />・<br /></td>
<td>１段目コンテンツ２</td>
</tr>
<tr align="right" valign="top">
<td>２段目コンテンツ１</td>
<td>２段目　　　　　　コンテンツ２<br />・<br />・<br />・<br /></td>
</tr>
</table>

セルの大きさを指定する
使用例
<table border="1" cellpadding="5" cellspacing="1" bordercolor="#555555" bgcolor="#000000">
<tr align="right" valign="top">
<td width="200">１段目コンテンツ　　　１<br />・<br />・<br />・<br /></td>
<td width="300">１段目コンテンツ２</td>
</tr>
<tr align="right" valign="top">
<td>２段目コンテンツ１</td>
<td>２段目　　　　　　コンテンツ２<br />・<br />・<br />・<br /></td>
</tr>
</table>

枠なし左寄せの表
使用例
<table width="560">
<tr align="left">
<td width="100">１段目コンテンツ１</td>
<td>１段目コンテンツ２</td>
</tr>
<tr align="left">
<td>２段目コンテンツ１</td>
<td>２段目コンテンツ２</td>
</tr>
<tr align="left">
<td>３段目コンテンツ１</td>
<td>３段目コンテンツ２</td>
</tr>
</table>

セルを連結する
使用例
<table border="1" width="400">
<tr>
<td colspan="2">セルを横に連結</td>
</tr>
<tr>
<td>２段目</td>
<td rowspan="2">セルを縦に連結</td>
</tr>
<tr>
<td>３段目</td>
</tr>
</table>

リストを作る

リストを作るには、<p></p>タグの外で使います。
<ul><li></li></ul>
属性
type=""　リストのタイプを指定します。指定しないときは、discになります。disc-点,circle-円,square-四角
<ol><li></li></ol>タグは順序リストを作ります。
属性
start=""　リストの初期値を指定します。指定しないときは、1が初期値になります。
使用例
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
順序リスト
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>

サイドバーでリストを使うときは、サイドボックス内で使うことで左寄せでリストを表示することができます。

水平の線を作る

水平線を作るには<hr />タグを使います。
<hr />タグを使うときは<p></p>タグの外で使います。

使用例
<hr />

<hr width="200" color="#00ff00" align="left" />

<hr width="200" align="center" />

<hr width="200" size="10" align="right" color="#0000ff" />

フラッシュをページに貼り付ける

フラッシュをページに貼り付けには、<object classid="" width="" height=""></object>タグを使います。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="フラッシュの横幅" height="フラッシュの高さ">
<param name="movie" value="フラッシュのアドレス" />
<param name="quality" value="high" />
<embed src="フラッシュのアドレス" quality="high" type="application/x-shockwave-flash" width="フラッシュの横幅" height="フラッシュの高さ">
</embed>
</object>
使用例
imageフォルダの中にある　横幅300、高さ150のflash.swfをページに貼り付ける時は、
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="150">
<param name="movie" value="image/flash.swf" />
<param name="quality" value="high" />
<embed src="image/flash.swf" quality="high" type="application/x-shockwave-flash" width="300" height="150">
</embed>
</object>
とします。