ホームページ作成 HTML5
ホームページテンプレート用の、HTML5です。
ほかにも設定方法はありますが、一番簡単だと思われる方法で書いています。
HTML5ホームページテンプレートは、<aside>タグや<article>タグなどを
使用していますが、これらのタグを使用しなくでも使うことができます。
<aside>タグや<article>タグは、コンテンツの内容によって使い分けてください。
sectionタグ
一般的なセクションを表します。
h1, h2, h3, h4, h5, h6 を使用して文書構造を表すことができます。
articleタグ
内容が単体で独立可能な部分(新聞の記事など)を表します。
asideタグ
ページの主題とあまり関係のない内容(補足情報など)を表します。
hgroupタグ
セクションのヘッダを表します。
headerタグ
文章の導入部やナビゲーションのグループ化を行います。
footerタグ
ページのフッタを表します。著作権情報などを含むことができます。
navタグ
ナビゲーションとなるセクションを表します。
figureタグ
単独で参照されることの多い、自己完結した内容(写真・イラストなど)を表します。
文字の色を設定するには、タグにクラスをつけることで文字色を設定できます。
以下の色がスタイルシートに設定されています。
■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>
文字に色をつけます。
これ以外の色を使いたい場合は、スタイルシートに使いたい色を設定します。
HTML5 ホームページテンプレート スタイルシートカスタマイズに設定法があります。
文字を太字にするには、太字にしたいところを<b></b>タグで囲みます。
使用例
文字を<b>太字</b>にする。
文字を太字にする。
文字を強調するには、強調したいところを<strong></strong>タグで囲みます。
文字を<strong>強調</strong>する。
文字を強調する。
文字を大きくする時は、タグにクラスを指定します。
使用例
文字を<span class="large1">大きく</span>する。
文字を大きくする。
文字を<span class="large2">もっと大きく</span>る。
文字をもっと大きくする。
文字を小さくする時は、タグにクラスを指定します。
使用例
文字を<span class="small1">小さく</span>する。
文字を小さくする。
文字を<span class="small2">もっと小さく</span>る。
文字をもっと小さくする。
これ以外のサイズを使いたい場合は、スタイルシートに使いたいサイズを設定します。
HTML5 ホームページテンプレート スタイルシートカスタマイズに設定法があります。
改行したいところに<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>
<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 class="table">
<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>
画像の周りに余白を入れたいときは、スタイルシートに以下のようなクラスを作ります。
HTML5 ホームページテンプレート スタイルシートカスタマイズに設定法があります。
使用例
画像周りの余白は、ここを指定
.table2 td{
padding:10px;
}
テーブルの枠線を表示させるときは、ここを追加指定
border:線の種類 線の太さ 線の色;
.table2,.table2 td{
border:solid 1px #555555;
}
テーブルタグにクラス(table2)をつける。
※(table2)は好きな英数字
<table class="table2">
<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">ページ2</a>
ひとつ上の階層にリンクする。
<a href="../page.html">ページ2</a>
ページ内リンク
ページ内のジャンプしたい所に id="" をつけます。
id属性は、同じページに重複して同じ名前をつけることができません。
使用例
<a id="a01"></a>
<a href="#a01">ジャンプ</a>ページ内リンクします。
<a>タグ以外のタグにも指定できます。
※a01は好きな英数字
別ページのページ内リンク
使用例
<h3 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>
<tr>
<td>1段目コンテンツ1</td>
<td>1段目コンテンツ2</td>
</tr>
<tr>
<td>2段目コンテンツ1</td>
<td>2段目コンテンツ2</td>
</tr>
</table>
1段目コンテンツ1 |
1段目コンテンツ2 |
2段目コンテンツ1 |
2段目コンテンツ2 |
テーブルの枠を表示させるには、ホームページテンプレートでは<table>タグにクラスを指定します。
使用例
<table class="table">
<tr>
<td>1段目コンテンツ1</td>
<td>1段目コンテンツ2</td>
</tr>
<tr>
<td>2段目コンテンツ1</td>
<td>2段目コンテンツ2</td>
</tr>
</table>
1段目コンテンツ1 |
1段目コンテンツ2 |
2段目コンテンツ1 |
2段目コンテンツ2 |
HTML5でのテーブルの属性
HTML5では、<table><tr><td>タグの、
border属性・cellpadding属性・cellspacing属性・width属性・height属性・bgcolor属性・align属性・valign属性
などが廃止されたため、これらを指定するには、スタイルシート(CSS)で設定します。
※廃止されても使うことはできます。
テーブルの属性とスタイルシート
属性 |
CSS |
説明 |
border="" |
border-width:; |
テーブルの枠線の太さを指定します。 |
bordercolor="" |
border-color:; |
テーブル枠の色を指定します。 |
cellpadding="" |
padding:; |
テーブルセル内の間隔を指定します。 |
cellspacing="" |
padding:; |
テーブルの内枠と外枠の間隔を指定します。 |
width="" |
width:; |
テーブルの横幅を指定します。 |
height="" |
height:; |
テーブルの縦幅を指定します。 |
bgcolor="" |
background-color:; |
テーブルの背景色を指定します。 |
align="" |
text-align:; |
セル内の横方向の配置位置を指定します。left-左寄せ,center-中央表示,right-右寄せ |
valign="" |
vertical-align:; |
セル内の縦方向の配置位置を指定します。top-上揃え,middle-中央揃え,bottom-下揃え |
colspan="" |
|
セルを横に連結します。 |
rowspan="" |
|
セルを縦に連結します。 |
テーブルの枠の色、太さ、線種、余白を指定するには、スタイルシート(css)に以下のようなクラスを作ります。
HTML5 ホームページテンプレート スタイルシートカスタマイズに設定法があります。
使用例
テーブルの枠の線種、太さ、色は、ここを追加指定
※(table2)は好きな英数字
.table2,.table2 td{
border:dotted 2px #0000ff;
}
border: 線種 太さ 色;
線種 (none 線無し・solid 実線・double 二重線・dotted 点線・dashed 粗い点線・groove 窪んだ線・ridge 隆起した線・inset 内線・outset 外線)
テーブルの内枠と外枠の間隔を変更するときは、これを追加指定(cellspacing)
.table2{
padding:5px;
}
padding:サイズ;
テーブルセル内の間隔を変更するときは、これを追加指定(cellpadding)
.table2 td{
padding:10px;
}
テーブルタグにクラス(table2)をつける。
<table class="table2">
<tr>
<td>1段目コンテンツ1</td>
<td>1段目コンテンツ2</td>
</tr>
<tr>
<td>2段目コンテンツ1</td>
<td>2段目コンテンツ2</td>
</tr>
</table>
1段目コンテンツ1 |
1段目コンテンツ2 |
2段目コンテンツ1 |
2段目コンテンツ2 |
style属性での設定法
テーブルにstyle属性を使って、width、height、bgcolor、align、valignを指定
<table>タグに指定すると全体に効果
<tr>タグに指定すると行に効果
<td>タグに指定するとセルに効果
使用例
<table class="table" style="width:400px;text-align:left;background-color:#333333;">
<tr>
<td>1段目コンテンツ1<br>・<br>・<br>・</td>
<td>1段目コンテンツ2</td>
</tr>
<tr style="vertical-align:top;">
<td>2段目コンテンツ1<br>・<br>・<br>・</td>
<td>2段目コンテンツ2</td>
</tr>
</table>
1段目コンテンツ1 ・ ・ ・ |
1段目コンテンツ2 |
2段目コンテンツ1 ・ ・ ・ |
2段目コンテンツ2 |
<table class="table" style="width:80%;">
<tr>
<td style="width:150px;height:150px;">1段目コンテンツ1</td>
<td style="text-align:right;vertical-align:bottom;">1段目コンテンツ2</td>
</tr>
<tr style="background-color:#333333;">
<td>2段目コンテンツ1</td>
<td>2段目コンテンツ2</td>
</tr>
</table>
1段目コンテンツ1 |
1段目コンテンツ2 |
2段目コンテンツ1 |
2段目コンテンツ2 |
セルを連結する
使用例
<table class="table" style="width:400px;">
<tr>
<td colspan="2">セルを横に連結</td>
</tr>
<tr>
<td>2段目</td>
<td rowspan="2">セルを縦に連結</td>
</tr>
<tr>
<td>3段目</td>
</tr>
</table>
リスト
<ul><li></li></ul>
順序リスト
<ol><li></li></ol>
リストを作るには、<p></p>タグの外で使います。
サイドバーでリストを使うときは、サイドボックス内で使います。
HTML5でのリストの属性
HTML5では、リストの(type="")属性が廃止されたため、(style="";)属性を使って指定します。
※廃止されても使うことはできます。
list-style-position:;表示位置を指定 (outside外側 inside内側)
list-style-image: url();マーカー画像を指定
start="開始位置番号"開始番号を指定
list-style-type:;リストタイプを指定
タイプ
none(なし)・disc(点:規定値:)・circle(丸)・square(四角)・decimal(1 2 3)・decimal-leading-zero(01 02 03)
・lower-roman(ⅰ ⅱ ⅲ)・upper-roman(Ⅰ Ⅱ Ⅲ)・lower-alpha(a b c)・upper-alpha(A B C)・lower-latin(a b c)
・upper-latin(A B C)・lower-greek(α β γ)・hebrew(ヘブライ)・armenian(アルメニア)・georgian(グルジア)
・cjk-ideographic(一 二 三)・hiragana(あ い う)・katakana(ア イ ウ)・hiragana-iroha(い ろ は)・katakana-iroha(イ ロ ハ)
使用例
リスト
<ul>
<li>リスト<br>リスト</li>
<li>リスト<br>リスト</li>
<li>リスト<br>リスト</li>
</ul>
|
順序リスト
<ol>
<li>リスト<br>リスト</li>
<li>リスト<br>リスト</li>
<li>リスト<br>リスト</li>
</ol>
|
|
- リスト
リスト
- リスト
リスト
- リスト
リスト
|
タイプに squareを指定
<ul style="list-style-type:square;">を指定
|
開始位置 start="3"を指定
<ol start="3">を指定
|
|
- リスト
リスト
- リスト
リスト
- リスト
リスト
|
マーカーに画像を指定
<ul style="list-style-image: url(image/01.gif);">を指定
|
表示位置 insideを指定
<ol style="list-style-position:inside;">を指定
|
|
- リスト
リスト
- リスト
リスト
- リスト
リスト
|
水平線を作るには<hr>タグを使います。
<hr>タグを使うときは<p></p>タグの外で使います。
HTML5での<hr>タグ属性
HTML5では、<hr>タグの、align属性・noshade属性・size属性・width属性が廃止されたためstyle属性を使って指定します。
※廃止されても使うことはできます。
指定法
水平線の色 border-color:;(IE6は、color:;)
水平線の太さ border-top-width:;(IE6は、height:;)
水平線の線種 border-style:;
none 線無し・solid 実線・double 二重線・dotted 点線・dashed 粗い点線・groove 窪んだ線
・ridge 隆起した線・inset 内線・outset 外線
水平線の線種・太さ・色をまとめて指定 border:線種 太さ 色;
水平線の横幅 width:;
水平線の位置 float:;
使用例
指定無し<hr>
線種 dotted指定 <hr style="border-style:dotted;">
横幅 width:200px;指定 <hr style="width:200px;">
水平線の色や太さをかえる場合は、ホームページテンプレートでは、<div></div>タグにclass="hr"をつけて、style属性を使って指定します。
(IE6とそれ意外のフラウザで、<hr>タグの色や太さの設定法(CSS)が違うため)
使用例
<div></div>タグにクラスclass="hr"を指定 <div class="hr"></div>
色を指定 <div class="hr" style="border-color:#ff0000;"></div>
太さ10pxを指定 <div class="hr" style="border-top-width:10px;width:200px;border-color:#00ff00;"></div>
位置 float:left;指定 <div class="hr" style="border-top-width:10px;width:200px;border-color:#0000ff;float:left;"></div>
回り込みの解除<br class="clear">
フラッシュをページに貼り付けには、<embed src="" width="" height="">タグを使います。
<embed src="ファイルパス" width="横幅" height="高さ">
<embed src="" width="" height="">タグは、フラッシュ以外にも動画や、音声ファイルも読み込めます。
使用例
imageフォルダの中にある 横幅300、高さ150のflash.swfをページに貼り付ける場合
<embed src="image/flash.swf" width="300" height="150">