021D 独自レイアウト

独自テンプレートとして、JimdoExpertの「Jimdoベネフィットサポーター」による無料テンプレートから「シンプル」レイアウトを使用する。

021D-1 Jimdo ベネフィットサポーターの独自レイアウト

レイアウトを、使用されている HTML の ID に関連付けして表示してみた。

HTML コードとレイアウトとの関連を表してみた。

（クリックすると拡大表示、さらにF11を押すと全画面表示となる）

<div id="○○○">～</div>

div要素は、表示する要素をグループ化したユニットを示す。ユニット名は、id="○○○"で指定され、表示のされ方は、CSSコードで記述される。

<main id="◎◎◎">～</main>　-------------------　ライン14～16

main要素は文書内の主要なコンテンツを表します。主要なコンテンツとは、Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、その文書内で主な内容となる部分を指します。

<aside id="△△△">～</aside>　-------------------　ライン21～23

aside要素は、その部分が文書内における補足情報のセクションであることを示す際に使用します。

<footer id="□□□">～</footer>　-----------------　ライン25～30

footer要素は文書やセクションのフッターを表します。著者情報や関連記事へのリンクを記述する場合によく利用されます。フッターというと、セクションの末尾に配置されているイメージがありますが、footer要素はセクションの最初に置いても問題ありません。

<var>～</var>　---------------------------　ライン15、19、22、29

var要素は変数を表します。<var>～</var>で囲まれた部分が変数や引数であることを示します。

テンプレートの構成パーツは、Content、Sidebar、Navigation、Footer が必要です。独自のレイアウトを適用するには、独自レイアウトにこれらの構成パーツを含み、且つ詳細仕様に適応する必要があります。HTMLコードでは以下のように記述する。

<var>content</var>

<var>sidebar</var>

<var>navigation[1|2|3]</var>

<var>footer</var>

詳細は、023D 独自レイアウトを参照する。

詳細は、022D 独自レイアウトを参照する。