人気ホームページが作れる簡単作成講座

ホムつく式　初心者さんのためのホームページ作成講座

はじめてホームページ作成に挑戦する方も、何度か挑戦したものの挫折しちゃった方も、ホムつく講座を体験してみてください。

はじめに

Step１　ホームページの土台を作る

ホームページを作り始めると、たくさんのファイルができてきます。そのファイルの管理をきっちりとできるように、保存用のフォルダを作ったり、ホームページ作成の始まりとなるXHTML（HTML）を記載してみよう。

1. ホームページデータの保存先フォルダを作る
2. HTMLファイルの作成
3. HTMLとXHTMLのどちらで作成するか決める
4. CSS（スタイルシート）の外部ファイルの作成

Step２　CSSレイアウトの構築

CSSレイアウトは、うまく配置できないと悩んでいる方が多いので、難しいと思っている方が多いようですが、実はCSSレイアウトはとっても簡単なんです。基本となるレイアウトを組めるようになって、あなたもCSSレイアウトでホームページを作りましょう。

1. CSSレイアウトは<div>で作る
2. XHTML/HTMLタグへ個別にCSS（スタイルシート）を指定する
3. 上下に並んだ<div>..</div>を左右に配置させる
4. Webページの横幅を指定する
5. 「float」によるCSSレイアウトの崩れを防ぐ

Step３　レイアウトをデザインする

基本となるレイアウトが組めたら、線をひいたり、色を付けたり、思い通りにデザインができるようになるために最も基本となるデザイン方法を学んでみよう。

1. 枠線でレイアウトを区切る
2. 「border」によるCSSレイアウトの崩れを防ぐ
3. レイアウトの背景を指定する

Step４　XHTML(HTML)をもっと理解しよう

XHTML(HTML)は文章構造を示すもの！とっても使用頻度が高く、重要度の高いタグをマスターしましょう。たったこれだけで、HTMLの８０％はマスターしたも同然！？

1. 超重要！Webページの内容を示すタイトル
2. 基本は「見出し」と「本文」でコンテンツを作成する
3. 箇条書きで見やすく整理する
4. 万能タグ<div>は「class属性」で使いこなそう

Step５　CSS（スタイルシート）でデザインする

さぁ！テンプレートとなるWebページの完成までもう少しです。最後は文字の装飾。適切なタグを使って文字を記述すれば、自動的に文字装飾が指定されるんですよ。ポイントはシンプルに装飾することです。

1. 文字のサイズ（フォントサイズ）を指定する
2. 文字の色を指定する
3. 文字に背景色を指定する
4. 何もない空間がデザイン性と可読性をアップさせる
5. 「padding」と「margin」をコントロールして、文章レイアウトを整える
6. 上下左右の余白を個別に指定する
7. 左寄せ、中央、右寄せを指定する
8. 「auto」でWebページを中央表示させる

Step６　ページ作成からFTPアップロード

Webページのテンプレートが完成したので、ここからはコンテンツの作成からサーバーへのアップロードまでを解説していきます。

1. Webページの新規作成
2. ホームページレイアウトの基本構成
3. 画像を掲載する
4. 文字を装飾してみよう
5. リンクでWebページをつなぐ
6. ホームページの完成とアップロード