イラストサイトのテンプレート
このページでは、ｈｔｍｌ、CSSの知識がないけど、とにかくイラストを展示できるサイトを作りたい初心者の方のためページです。
なので、サイトのデザインは後回しでまずは作ってみましょう。
デザインは、運営しながらhtml、CSSを勉強して少しずつ作っていけばいいですしね。
ちなみに、ｈｔｍｌとはホームページを作成する言語のことで、<html><head></head><body></body></html>のような言語で構成されています。htmlだけでホームページを作成することは出来るんですが、細かなデザインをしたい時にCSSという言語を使用します。
今回使用するテンプレートには、CSSも含まれていますので、CSSが分かる人なら編集できます。
テンプレートのダウンロード
早速、テンプレートをダウンロードしましょう。
※ 画像が表示されなかったり、リンクできないことがありますが、編集することで出来るようになります。
| 1ページのテンプレート | |
|---|---|
 |
１ページのみのサイトなので、とても早く完成します。 |
| 4ページ＋画像ページのテンプレート | |
 |
ホーム、
アバウト、
ギャラリー、
ブログ、
リンクのページに1枚ずつの画像ページがあります。 |
圧縮されているので、解凍ソフトが必要です。
「フリーソフト 解凍ソフト」で検索すれば、出てきます。
有名どころとしては+Lhacaです。ここからダウンロードできます。
全てのｈｔｍｌファイルの書き換え
さて、テンプレートのダウンロードはできましたか？さっそく変えていきましょう。
ファイル名の後ろがｈｔｍｌになっているファイルを右クリックし、「プログラムから開く」にマウスのカーソルをあて、「notepad」または「メモ帳」をクリックします。
ファイルが開いて、文字がいっぱい出てきましたね。
ここで書き換えるのは★印に囲まれている部分です。
<!--■文字-->はコメントで、実際にはホームページには表示されません。
編集が終わったら、index.hｔmlファイルをダブルクリックして、おかしいところがないかチェックをしましょう。
出来たら、インターネットに公開してくれるサービスがあるので、そこに登録をします。
詳しくは、メニューの「サイトを作る」に載っていますので、参照して下さい。「サイトを作る」へ
これだけは知っておいてほしいHTML言語
| <p> | 段落のこと。段落の上下に余白がつきます。 |
| <br> | 改行のこと。 |
| <div></div> | CSSを使用する際に使ったりします。デザインする範囲を決めて、使用するデザインを指定します。間違って消さないように。 |
| <table> | テーブル、表のことです。<tr>は１行分です。<td>は、ひとつの項目（セル）です。 |
※テンプレートがおかしい。構文が間違ってるんじゃないかとか、こういうテンプレートが欲しいなどの要望を待っています。ただし、HTMLやCSSについての質問には答えられません。「サイトを作る」にホームページ作成講座のおすすめサイトを載せてます。そちらのサイトに分かりやすく説明してあるので、見て頂ければと思います。