サイドバーのない１カラムタイプ。右上にパンくずナビ。
トップページや各コンテンツの目次はメニューつきの2カラム、 目次以下の1つ1つの作品や内容は、閲覧スペースが広くて見やすい1カラムなど使い分けて下さい。 すべて共通のCSSファイル1つで管理することが出来ます。

Text Sample

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

アイコン

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

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

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

強調

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