無料HTML素材ダウンロードサービス

無料HTMLテンプレート

Wiki形式・ビジネス・1列

情報をページ単位で整理する、攻略情報・用語集・マニュアル向けのテンプレートです。紺を基調に、落ち着いた見出しと整った余白で組んだデザインです。

パソコンで表示したときの見た目
パソコン
スマートフォンで表示したときの見た目
スマートフォン

デモを見る ZIPをダウンロード(13KB)

登録は不要です。お使いになる前にご利用についてをお読みください。

このテンプレートの仕様
形式Wiki形式
スタイルビジネス
カラム1列
ページメインページ、記事ページ
対応する画面パソコン・タブレット・スマートフォン
使っている技術HTML・CSS・JavaScript(ライブラリは使っていません)
料金無料

このデザインについて

形式:Wiki形式

情報をページ単位で整理する、攻略情報・用語集・マニュアル向けのテンプレートです。メニューの絞り込み検索、読んでいる位置を示す目次、見出しをクリックして並べ替えられる表、情報ボックス、注釈など、調べものをしやすくする部品を入れています。

スタイル:ビジネス

紺を基調に、落ち着いた見出しと整った余白で組んだデザインです。会社・事務所・サービスの紹介など、信頼感を出したいサイトに向いています。見出しの帯や表の罫線を、読みやすさを優先して整えています。

カラム:1列

本文を中央に1列で置くレイアウトです。パソコンでもスマートフォンと同じ流れで読めます。プロフィールやお知らせなどの補足は、本文の下にまとめて並べます。

入っているページと部品

  • キーワードで絞り込めるメニュー
  • 読んでいる位置を示す目次と、並べ替えできる表
  • 情報ボックス・注釈・関連ページの部品
  • スマートフォンでは、メニューをボタンで開閉する形に切り替わります
  • ページの先頭へ戻るボタン

ファイルの構成

wiki-business-1col/
├── index.html      メインページ
├── page.html       記事ページ
├── css/
│   └── style.css   スタイルシート
├── js/
│   └── main.js     動き(メニューの開閉など)
├── images/         仮の画像(2点)
└── README.txt      使い方の説明

使い方

  1. 「ZIPをダウンロード」を押して、ファイルを保存します。
  2. ZIPファイルを展開(解凍)し、中の index.html をブラウザで開くと、見た目を確かめられます。
  3. テキストエディタで HTML を開き、文章・画像・リンク先をご自分のサイトの内容に書き換えます。
  4. 色や文字の形は、css/style.css の先頭にある「色・文字・形の設定」でまとめて変えられます。
  5. 公開するときは、各ページの <head> にページの説明(meta description)などを足してください。

同じ形式・スタイルの、ほかのカラムの数