汎用html。中身はお好きにどうぞ。タイトルはコンテンツ名やサイト名を。
右上のパンくずナビは位置と構成によって書き換えて下さい。
すべて共通のCSSファイル1つで管理することが出来ます。
以下各ブロック・インライン要素のサンプルです。

Text Sample

ここはpです。pはParagraph（段落）の略です。
<p>〜</p>で囲まれた部分がひとつの段落であるということを示します。

アイコン

class名にiconをつけた画像に左右マージンと縦位置合わせを行います。
お好みでお使い下さい。

◆普通に<img src="画像のURL">だけの場合
iconフォントと画像のサイズ次第ではバランスが少し悪いことも…

◆<img="画像のURL" class="icon">とclass名を与えた場合
iconちょっと見やすく見えるかもしれないおまじない。

強調

strongは<strong>〜</strong>で囲まれたテキストを強調します。
emは<em>〜</em>で囲まれたテキストを強調します。

削除と追記

delは<del>〜</del>で囲まれた部分が削除されたことを示します。
insは<ins>〜</ins>で囲まれた部分が後から挿入されたことを示します。

コードと整形テキスト

codeは<code>〜</code>で囲まれた部分がプログラムのソースコードであることを示します。
例→ alert("Hello World!"); 

preは整形済みテキストです。
<pre>〜</pre>で囲まれた範囲のソースに記述された
スペース・改行などをそのまま等幅フォントで表示します。

引用文と参照先

これはblockquoteです。
blockquoteは<blockquote>〜</blockquote>で囲まれた部分が他所からの引用文であることを表します。
セットで<cite>を使用して他の文書・著者・サイト等の参照先を明示します。

とほほのHTML入門

List Sample

順不同のリスト

順序のあるリスト

  1. これは<ol>を使った順序のあるリストです。
  2. これは順序のあるリストです。
  3. これは順序のあるリストです。

定義リスト

定義タイトル<dt>〜<dt>
ここは<dd>です。<dd>〜<dd>には、定義タイトルの定義の説明を記述します。
例えば以下のように使用することができます。
宮沢 賢治
1896年8月27日- 1933年9月21日
日本の詩人・童話作家・農業指導家・教育者・作詞家。

Table Sample

onstyleというclass名を与えたテーブルのみスタイルを適用します。

見出し 見出し 見出し
テーブル中身 テーブル中身 テーブル中身
テーブル中身 テーブル中身 テーブル中身

Form Sample