どこまでも、まよいみち

<div class="main-area">直下に

まず、ページのタイトルを入れます<h1></h1>

※その下からサイドバー手前までの全体をセクションで囲います。その中に記事を書きます<section></section>

必要なら説明文<p></p>

※記事を記事タグで囲います<article></article>

大セクションのタイトル<h2></h2>

本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります<p></p>

中セクションのタイトル<h3></h3>

本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります<p></p>

中セクションのタイトル<h3></h3>

本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります<p></p>

小セクションのタイトル<h4></h4>

本文本文本文本文本文本文本文本文本文本文<p></p>

さらに小さいセクションのタイトル <h5></h5>

本文<p></p>

さらに小さいセクションのタイトル <h5></h5>

本文<p></p>

小セクションのタイトル<h4></h4>

本文本文本文本文本文本文本文本文本文本文<p></p>

以下は文字の装飾見本です

強勢する(アクセントを付ける)箇所<em></em>

強調するところ <strong></strong>

キーワードなど、他と区別したいテキスト <b></b>

追加された部分であることを示す <ins></ins>

削除された部分であることを示す <del></del> (検索エンジンに「タグ内の情報が削除された情報であること」を伝えるもの。検索エンジンからの評価を下げたくない時は、spanタグかCSSで「text-decoration: line-through;」と記述する)

↑参照 強調のために使う打ち消し線 <span class="utikesi"></span>

リンクテキスト(本文中) <a href="#"></a>

マーカーで色をつける感じ <mark></mark>

私はこう思うよーっていうメモ <i></i>

文字を小さく表示します。(0.85emに設定)<span class="small"></span>

文字を大きく表示します。(1.2emに設定)<span class="large"></span>

免責、警告、著作権などの、注釈や細目 <small></small>

連絡を取るために必要な情報 <address></address>

引用元(作品のタイトル) <cite></cite>

引用(作品の内容:短い文章)背景色が付きます <q></q>

引用(作品の内容) <blockquote></blockquote>
引用はこのように大きな " の文字がついてインデントされます。引用元、短い文章の場合の引用とともに同じ文字色で表現します。背景色が付きます。blockquote内のemはアンダーラインも同色になります<em></em>

blockquote内の<cite></cite>は右寄せになります

項目部分1
項目付きリストの項目部分は左にボーダーが付きます。
項目部分2
間違えて見出し4を使っていましたが、もとのソースはこれでした。
項目部分3
内容部分はインデントされます。
タグは<dl><dt>項目</dt><dd>内容</dd></dl>です

<div class="pattern"></div> 昔話のパーツを入れたいです

さて、このh1の文字が小さい理由は、section、article、aside、navにネストされると「ネストの数+1」と同じ意味になるからです。

どこまでも、まよいみち(トップページはh1)

どこまでも、まよいみち(他のページはp)

画像を表示させるとき、幅いっぱいにするならimgタグにクラスを追加すること。
<img src="画像URL" class="full"> 下の画像は親要素の100%幅で表示されます。小さい画像は拡大されます。ちなみに親要素"main-area"は1024pxの75%なので768px幅。んでdiv、section、article、のmarginとpaddingを引くと、うーん

そして、幅いっぱいだけどmaxは500pxにするならimgタグにクラスを追加すること。
<img src="画像URL" class="max500"> 下の画像は width: 100%; max-width :500px; で表示されてます。

スイッチページは<head>~</head>内にスイッチ用スクリプトがあるので注意!
設置方法を見て思い出した(?)。URL http://www.omi-para.net/omikuji/kobo/rakuomi2/setup.html

このページはサイト制作者が記事を書くときのための参照ページです。このサイトのコンテンツとは全く無関係です。

  背景画像:フリー素材 * ヒバナ