用語と説明のリストを作る

【ソース】
<dl><dt>用語</dt><dd>その説明</dd>・・・</dl>

【説明】
dlの範囲で用語とその説明の形式で表示します。
ddの範囲は、インデントされますが、ブラウザにより差異があるので注意が必要。

【サンプル】
▼以下のソースを表示します
<font size="2">
<dl>
<dt>AKB48</dt>
<dd>AKB48（エーケービーフォーティーエイト）は、秋元康の全面プロデュースにより、2005年に誕生した、日本の女性アイドルグループである。</dd>
</dl>
</font>

[表示]

AKB48: AKB48（エーケービーフォーティーエイト）は、秋元康の全面プロデュースにより、2005年に誕生した、日本の女性アイドルグループである。

投稿者：ひょっとこ弥太郎｜17:16 ｜ブログ・制作Tip！

▲UP

2012年11月15日

番号付リストを作る

【ソース】
<ol><li>項目1</li><li>項目2</li><li>項目3</li>・・・</ol>
<ol type="番号の形式">～</ol>
<li type="番号の形式">～</li>
<ol start="開始番号">～</ol>
<li value="開始番号">～</li>

【説明】
olの範囲で番号付きリストを作成します。
リスト番号は、typeを指定することで番号形式を替えることができます。
また開始番号を指定することもできます。

[番号の形式]
1（算用数字） 1、2、3・・・
a（英小文字） a、b、c・・・
A（英大文字） A、B、C・・・
i（ローマ数字小文字） i、ii、iii・・・
I（ローマ数字大文字） I、II、III・・・

【サンプル】
▼以下のソースを表示します
<font size="2">
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
---------------------------<br>
<ol>
<li><p>項目1</p></li>
<li><p>項目2</p></li>
<li><p>項目3</p></li>
</ol>
---------------------------<br>
<ol type="i">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
---------------------------<br>
<ol start="4">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li value="1">項目3</li>
<li>項目3</li>
<li>項目3</li>
</ol>
</font>

[表示]

項目1

項目2

項目3

項目1

項目2

項目3

項目1

項目2

項目3

項目1

項目2

項目3

項目3

項目3

項目3

投稿者：ひょっとこ弥太郎｜17:14 ｜ブログ・制作Tip！

▲UP

2012年11月15日

マーク付リストを作る

【ソース】
<ul><li>項目1</li><li>項目2</li><li>項目3</li>・・・</ul>
<ul type="disc | circle | square">～</ul>
<li type="disc | circle | square">～</li>

【説明】
ulの範囲で箇条書きリストを作成します。
リスト頭のマークは、指定することもできますが、ブラウザにより異なる場合があるので注意が必要です。

【サンプル】
▼以下のソースを表示します
<font size="2">
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
---------------------------<br>
<ul>
<li><p>項目1</p></li>
<li><p>項目2</p></li>
<li><p>項目3</p></li>
</ul>
---------------------------<br>
<ul>
<li type="disc">項目1</li>
<li type="circle">項目2</li>
<li type="square">項目3</li>
</ul>
</font>

[表示]

項目1

項目2

項目3

項目1

項目2

項目3

項目1

項目2

項目3

投稿者：ひょっとこ弥太郎｜17:13 ｜ブログ・制作Tip！

▲UP

2012年11月15日

横罫線を入れる

【ソース】
<ｈｒ>
<hr size="太さ" width="長さ" align="center | right | left" color="色指定" noshade>

【説明】
sizeは、ピクセルで指定、
widthは、ピクセルか％で指定、
noshadeは、影付の場合に記述し、そうでな場合には記述しません。
新しいHTMLの標準仕様では使えなくなっています。

【サンプル】
▼以下のソースを表示します
<hr>
<hr noshade>
<hr size="10">
<hr size="15" width="15" color="red">
<hr size="5" width="50%" align="right">
<hr size="5" width="50%" align="left" color="#0000FF" noshade>

[表示]

投稿者：ひょっとこ弥太郎｜17:12 ｜ブログ・制作Tip！

▲UP

2012年11月15日

空白や改行を表示させる

【ソース】
<pre>～</pre>

【説明】
入力した通りに、空白や改行が表示され等幅になります。
ソースコードを表示するときに便利です。
タブの使用は体裁が崩れますので使用しないほうがよいでしょう。

【サンプル】
▼以下のソースを表示します
<pre>
　function hoge( ){
　　document.write( 'ほげ' );
　}
</pre>

[表示]


　function hoge( ){
　　document.write( 'ほげ' );
　}

投稿者：ひょっとこ弥太郎｜17:10 ｜ブログ・制作Tip！

▲UP

2012年11月15日

メダルゲーム

最近、メダルゲームを始めました

ゲーセンに行くことって余りないことなのですがやってみると、無心に慣れるのでいいものですね

蛇の夢を見たおかげなのか、 Jack Poket に２回入り1700枚と5500枚をGet!
実質は、その半分以下のメダルのGetですねぇ～〓
宝くじは買ってみたけど当たりませんでした・・・・。
運を使うところが違うのだけれど・・・・

しかしゲームのメダルも購入すると高いものなのですね・・・・。
メダルの貯蓄ができるのでまた時間を持て余した時に挑戦してみたいと思います！

投稿者：ひょっとこ弥太郎｜01:26 ｜雑　談

▲UP

2012年11月15日

行揃えを指定する

【ソース】
<h1 align="center | left | right">～</h1>
<p align="center | left | right">～</p>
<div align="center | left | right">～</div>

【説明】
指定した要素で行揃えをします。
新しいHTMLの標準仕様では使うことができません。

【サンプル】
▼以下のソースを表示します
<h1 align="left"><font color="red">左揃え</font></h1>
<h2 align="center"><font color="red">中央揃え</font></h1>
<h3 align="right"><font color="red">右揃え</font></h1>

<p align="left"><font color="brown">左揃え</font></p>
<p align="center"><font color="brown">中央揃え</font></p>
<p align="right"><font color="brown">右揃え</font></p>

<div align="left"><font color="navy">左揃え</font></div>
<div align="center"><font color="navy">中央揃え</font></div>
<div align="right"><font color="navy">右揃え</font></div>

[表示]

左揃え

中央揃え

右揃え

左揃え

中央揃え

右揃え

左揃え

中央揃え

右揃え

投稿者：ひょっとこ弥太郎｜01:17 ｜ブログ・制作Tip！

▲UP

2012年11月15日

センタリング

【ソース】
<center>～</center>

【説明】
指定した要素をセンタリングします。
新しいHTMLの標準仕様では使うことができません。

【サンプル】
▼以下のソースを表示します
<center><font color="green" size="4">文章をセンタリングする</font></center>
<center><img src="./img/sample_1.jpg" alt="サンプル画像"></center>
<center>
<table border="1" cellspacing="0">
<tr bgcolor="#CCFFCC">
<td width="100"><font size="2">要素</font></td>
<td width="180"><font size="2">機能</font></td>
</tr>
<tr>
<td width="100"><font size="2">center</font></td>
<td width="180"><font size="2">センタリングをする</font></td>
</tr>
</table>
</center>

投稿者：ひょっとこ弥太郎｜01:16 ｜ブログ・制作Tip！

▲UP

2012年11月15日

改行させる

【ソース】
<br>

【説明】
ブラウザ上で改行をした場合に使用する。
利用するブラウザにより、この要素の前後に1行分のスペースが入ることがあります。

【サンプル】
▼以下のソースを表示します
<h3><font color="green">『ex-mode.net』のサービス紹介！</font></h3>
<font size="2">
□ホームページ素材提供サイト　<a href="http://sozai.ex-mode.net">素材EX</a><br>
□PHPプログラム配布サイト　<a href="http://tools.ex-mode.net">ツールEX</a><br>
□ラスタ君とはじめる「<a href="http://hrtml.ex-mode.net">ホームページをつくるぞぅ！</a>」<br>
□お得な情報を配信する「<a href="http://affi-mall.ex-mode.net">アフィモール</a>」 <br>
□<a href="http://tag-dic.ex-mode.net">ｈｔｍｌタグ辞典</a><br>
</font>

[表示]

『ex-mode.net』のサービス紹介！

□ホームページ素材提供サイト　素材EX

□PHPプログラム配布サイト　ツールEX

□ラスタ君とはじめる「ホームページをつくるぞぅ！」

□お得な情報を配信する「アフィモール」

□ ｈｔｍｌタグ辞典

投稿者：ひょっとこ弥太郎｜01:13 ｜ブログ・制作Tip！

▲UP

2012年11月15日

段落をつける

【ソース】
<p>～</p>

【説明】
<p>タグで挟まれたところは、一つの段落となります。
利用するブラウザにより、この要素の前後に1行分のスペースが入ることがあります。

【サンプル】
▼以下のソースを表示します

<h1>見やすいページ作りを考える</h1>

<p>ホームページを制作するときに自分本位で制作すると、見づらいホームページ出来上がっていることがよくあります。自己満足だけでよければ、それでも問題ないでしょうが、ネットを利用してホームページを公開している以上は誰かに見てもらうことを目的にしているかと思います。 </p>

<p>ホームページを制作するときには、見出しや段落、テーブル、文字サイズ、改行などのタグを利用して体裁を整えるとよいでしょう。</p>

投稿者：ひょっとこ弥太郎｜01:11 ｜ブログ・制作Tip！

▲UP

2012年11月15日

見出しをつける

【ソース】
<h1>～</h1>
<h2>～</h2>
<h3>～</h3>
<h4>～</h5>
<h6>～</h6>

【説明】
6段階で見出しレベルをつけることができます。
文字サイズはh1が大きく、順に小さくなっていきます。

【サンプル】
▼以下のソースを表示します
<h1>　見出し1　</h1>
<h2>　見出し2　</h2>
<h3>　見出し3　</h3>
<h4>　見出し4　</h4>
<h5>　見出し5　</h5>
<h6>　見出し6　</h6>

[表示]