HTML/CSS初心者のためのテンプレートの使い方

初心者向けHTMLテンプレートの使い方テンプレートからサイトを作る
スポンサーリンク

htmlの構成

まずは、簡単にhtmlファイルの成り立ちを知っておきましょう。

  • サイトの基本的な情報や、読み込むcss・jsを指定する「head」
  • サイトのコンテンツを記述する「body」
  • headおよびbodyを包括する「html」
​<html>
<head>
ここにサイトの情報
</head>
<body>
ここにサイトのコンテンツ
</body>
</html>

headタグ

<head> から </head> の間には、サイトの基本情報を書きます。サイトを訪問した人からはほとんど見えませんが、重要な情報です。例えば以下のような感じ。

  • サイトタイトル
  • 読み込むCSSやJSファイル
  • 使用言語

このブロックの中で編集するのは、サイトタイトルのみです

<title>ここにサイトタイトル</title>

ここで書いたサイトタイトルは、ブラウザのトップバーやタブに表示されます。

titleタグ内に書いた文字列がサイトタイトルになる

bodyタグ

さて、htmlテンプレートからサイトを作る場合、もっとも時間をかけて編集することになるのがbodyタグの中身です。ここには、サイトを訪問してくれた人が見るコンテンツを記述します。

bodyタグは、主に以下のようなタグでブロック分けされています。

  • サイトタイトルやメニューなど、サイト上部のコンテンツを入れる「header」
  • 主なコンテンツを入れる「main」
  • ナビバーを入れる「nav」
  • サイドバーを入れる「aside」
  • コピーライトなど、ページ下部のコンテンツを入れる「footer」
  • その他のブロック分けに用いられる万能コンテナー「div」

htmlの知識が浅いうちは、div以外のこれらのタグは追加したり削除したりするのはやめた方がよいでしょう。レイアウト崩れの原因になります。

divタグは、上手にコピペできれば、ある程度自分で自由にレイアウトを組み替えることができます。開始タグ<div>と、終了タグ</div>の数が合うように気をつけながら、レイアウトを組みましょう。

htmlタグ

headとbodyをまとめて入れているのがhtmlタグです。特に編集する必要はありません。誤って削除してしまわないように気をつけましょう。

htmlの編集

いよいよhtmlファイルの編集をしていきます。

この記事では、当サイトで配布しているテンプレート「空にうたえば」を例に解説していきます。

他のサイトで配布しているテンプレートとは少し構成が異なるところもあるかもしれません。しかし、基本的なタグの使い方はどのテンプレートも共通しているはずですので、ご了承の上で参考にしていただければ幸いです。

当サイトのテンプレートをお使いの方は、1column.htmlもしくは2column.htmlを複製し、index.htmlという名前をつけてください。

サイト名の書き換えと画像の差し替え

<head> 〜 </head>のtitleタグと、<body> 〜 </body>のh1タグです。

htmlテンプレートを編集しているところ

h1タグは、見出しを意味するタグです。h1〜h6までの整数のものが存在し、数字が小さいものほど重要な見出しで、数字が大きいものは「小見出し」の扱いになります。

重要度
h1>h2>h3>h4……

h1タグは通常、1ページあたり1回しか使わないことになっており、サイト名に使われることが多いです。当サイトのテンプレートでは、h1タグはサイト名の表示にしか使いません。

h1タグの直後に書いてあるpタグの中には、サイトの簡易な説明を書き入れます。改行する場合は、改行したいところに<br>と書いてください。htmlファイル内で改行するだけでは、ブラウザで見たときに反映されません。

また、header内にimgタグがありますが、ここで指定されている画像がヘッダー画像として、サイト名の後ろに重ねて表示されています。

<img src="img/top.jpg" class="heroimg">

画像を好きなものに差し替えたい場合は、

  • imgフォルダ内に使いたい画像を入れて、src=”img/top.jpg”の部分を、当該画像の名前に書き換える(classは削除しない)
  • imgフォルダ内のtop.jpgを、他の使いたい画像で上書きする

のどちらかで完了します。

メニューの編集

コンテンツ一覧となるメニューバーを編集します。当サイトのテンプレートでは、navタグの中にメニューが入っています。

ナビバーの編集

ulタグ、liタグはリストを作るタグ

liとはlist(リスト)のことで、ulはunordered list(番号をつけないリスト)のことです。liタグでリストにしたい項目を箇条書きにして、liをulタグで囲むとそのリストがひとかたまりであることを示すことができます。

  • 記事内に出てくるこの箇条書きも
  • ulタグとliタグで実現しています。

メニューをulやliで作っているテンプレートは多いので、デフォルトのとおりに作りましょう。

aタグはリンクを作るタグ

liの中に入っているaタグでリンクを作ります。hrefで指定したアドレスへジャンプします。

<a href="リンク先アドレス">リンク文字列</a>

「空にうたえば」では、リンク先として半角シャープから始まる文字列が入れられていますが、このような書き方をすると、半角シャープの後の文字列と同じ「id」が設定されたところまでページ内ジャンプします。

<a href="#content">ここをクリックすると……</a>

……

<p id="content">同じページ内にある「content」idを持つところへスクロールします。</p>

一般的にhrefには、別のhtmlファイルを指定することで、別のページへジャンプします。また、合わせ技で「別のhtmlファイルのidを持つところ」へのリンクも可能です。

<a href="contents.html#novel">小説</a>

このように書くと、contents.htmlの中のid=”novel”を持つ要素のところへジャンプします。

サイト案内と更新情報

h2が見出しタグ、dl/dt/ddはリストを作るタグです

h2は大見出しタグ、pタグはその他の文章

サイトタイトルのときと使い方は同じです。h2タグで特に注目してほしい見出しを作り、pタグに補足や本文を書きます。

dlタグでリストを作る

更新履歴はdl、dt、ddタグを使います。これは定義タグとも呼ばれて、リストを作るタグです。tableタグをご存知の方は使い方をイメージしやすいかもしれません。

<dl>
<dt>項目1</dt>
<dd>項目1の内容</dd>
<dt>項目2</dt>
<dd>項目2の内容</dd>
</dl>

更新履歴では、dtに更新日、ddに更新内容を記入します。

小説、イラスト、リンクなどのリストを作る

小説はul、liで作ります

コンテンツのリストは、ulおよびliで作ります。ulにclassを設定することで、リストのスタイルを使い分けることができます。詳しくはテンプレートに書かれている解説およびサンプルを参考にしてください。

以上の編集を行い、コンテンツを作り込んでトップページからリンクを繋いでサーバーにアップロードすれば、あなたのサイトが出来上がります。お疲れ様でした!

発展編:divを用いた段組み

当サイトではBootstrapというCSSを用いて段組みを作るシステムを採用しています。サンプルページの一部が2カラムデザインになっていますが、divタグをコピペすることで再現することができます。

<div class="col-12">

<div class="col-md-6">左のカラム</div>
<div class="col-md-6">右のカラム</div>

</div>

col-12クラスを持つdivの中に、col-md-◯(◯の中には半角数字)クラスを持つdivを入れます。◯にあたる半角数字は、合計12になるようにしてください。例えば、col-md-4とcol-md-8でもOKで、この場合カラムの大きさは4:8(1:2)になります。

col-md-◯クラスだと、スマホや携帯から見たときにはカラムの横並びが解除され、縦並びになります。一方、col-◯クラスだと、スマホや携帯から見ても横並びが解除されず、そのまま表示されます。好みと見やすさに応じて使い分けてみてください。

終わりに

HTMLは習うより慣れろの部分も多く、解説を読み込んで勉強するより、とりあえず自分で編集してみて実際の挙動を確認したほうが、早く理解できるかもしれません。

そういう意味でも、あらかじめほぼ完成品になっているHTMLテンプレートを使ってサイトを組み立てることは、大きな助けになるはずです。

また当サイトでは、HTMLが分からない人でも簡単に作れるテンプレートを目指して、日々製作を進めています。

不具合や、わかりにくいところ、使いにくいところがありましたら、ご意見フォームから教えていただけますと、テンプレートをアップデートしたり、次の制作に生かすことができます。

すべての御要望に対応することは難しいですが、多くの声を聞けたら嬉しいです。よろしくお願いいたします。

メールサポートも承っています

当サイトのテンプレートをご利用の方には、カスタマイズにあたりメールでのサポートをいたします。ヘルプページに記載の事項をご確認の上、ご活用ください。

コメント

タイトルとURLをコピーしました