HTMLとCSSでWebサイトを作る方法
HTMLとCSSでWebサイトを作る方法（完全版） | We.Inc
HTMLとCSSで1ページのWebサイトを完成させる方法。骨組み、ヘッダー、ヒーロー、セクション、問い合わせフォーム、フッター、レスポンシブ対応、公開までをライブプレビュー付きで解説します。
HTMLとCSSでWebサイトを作る方法
フォルダーを1つ作り、2つのテキストファイルを用意します。内容を書くindex.htmlと、見た目を決めるstyles.cssです。index.htmlは標準の骨組み（doctype、html、head、body）から書き始め、headでスタイルシートを読み込み、ヘッダー、メインのセクション、フッターを追加してから、ブラウザーでファイルを開きます。公開するには、フォルダーを静的ホスティングにアップロードします。
6つのステップで完成まで
- 1. 骨組み
- doctype、html lang、charset・viewport・titleを含むhead
- 2. 構造
- header、nav、セクションを含むmain、footer
- 3. 内容
- 見出し、段落、代替テキスト付きの画像、フォーム
- 4. スタイル
- フォント、色、余白、中央寄せしたコンテンツ幅
- 5. レイアウト
- ヘッダーにFlexbox、カードにグリッド、メディアクエリを1つ
- 6. 公開
- 両方
- フォルダーを静的ホスティングにアップロードする
最初のファイルだけでなく、完成までの全工程を扱います。空のフォルダーからレスポンシブなレイアウトまで、小さなお店のページを作っていきます。下のビルダーに自分の名前や情報を入力すると、完成したページがその場で更新されます。すべてのコードは完全な形なので、最終的な2つのファイルをコピーしてすぐに開けます。
- パソコンに新しいフォルダーを作り、その中に好きなテキストエディターでindex.htmlとstyles.cssを作成します。
- 下のビルダーの項目を入力してページを整え、生成された2つのファイルをフォルダーにコピーします。
- index.htmlをダブルクリックしてブラウザーで開きます。編集して保存し、再読み込みすると変更を確認できます。
- 各ステップのセクションを読んでコードの各部分の役割を理解すれば、自信を持って変更できます。
- 満足したら、最後に紹介するホスティング方法のどれかでフォルダーを公開します。
- ワープロソフトではなく、VS Codeなどのコードエディターを使いましょう。ワープロはブラウザーが読めない書式を追加してしまいます。
- トップページの名前はindex.htmlにしましょう。多くのホスティングでは、フォルダーのアドレスにアクセスしたときにこのファイルが自動で表示されます。
- ファイル名はスペースなしの小文字にしましょう（例：about-us.html）。多くのサーバーは大文字と小文字を区別します。
- 公開前に、ブラウザーの開発者ツールのデバイスツールバーで、スマートフォンの狭い幅での表示を確認しましょう。
- ページをHTMLバリデーターにかけましょう。ブラウザーが黙って推測で補っている閉じ忘れのタグを見つけられます。
よくある質問
HTMLでWebサイトを作るのに費用はかかりますか？
かかりません。ファイルを書くのに必要なのはテキストエディターとブラウザーだけで、どちらも無料です。小さなサイト向けの無料プランがある静的ホスティングもいくつかあります。費用がかかるのは、通常、独自ドメインを使いたい場合だけです。
viewportのmetaタグはなぜ必要ですか？
これがないと、スマートフォンのブラウザーはページをデスクトップの広い幅でレイアウトしてから縮小するため、文字が非常に小さくなります。width=device-widthは実際の画面幅を使うよう指示するもので、これによってメディアクエリが正しく動作します。
HTMLだけのサイトに問い合わせフォームを置けますか？
フォームの表示はHTMLでできますが、送信内容を受け取る仕組みが別に必要です。静的ホスティングでは、フォームのactionをフォーム処理サービスかホスティングの組み込みフォーム機能に向けます。最も簡単な代替手段はmailto:リンクです。
ページを増やすにはどうすればよいですか？
about.htmlなどのファイルを新しく作って同じヘッダーとフッターを入れ、<a href="about.html">About</a>でリンクし、1つのstyles.cssを共有します。各ページにはそれぞれ独自のtitleとh1を付けましょう。
代わりにフレームワークを使うべきですか？
最初のサイトなら不要です。素のHTMLとCSSは読み込みが速く、ビルド手順もいらず、どのフレームワークも最終的に何を出力しているのかを学べます。多くのページで共通のコンポーネントが必要になったときや、アプリのような動作が必要なときにフレームワークを検討しましょう。
セマンティックなタグには実際の役割がある
- header、nav、main、section、footerは、単にdivをきれいに言い換えた名前ではありません。スクリーンリーダーはこれらをランドマークとして示し、利用者はその間を移動できます。検索エンジンも、メインのコンテンツと繰り返されるメニューを区別するために使います。
- ページのテーマにはh1を1つ使い、各セクションにはh2を使いましょう。見出しだけを並べたときに、目次のように読めるアウトラインになるのが理想です。
スマートフォンを優先したレイアウト
- ブロック要素はもともと縦に並ぶので、スマートフォン向けの1カラムレイアウトをデフォルトとして書きます。そのうえで、min-widthのメディアクエリを1つ追加し、十分な幅があるときにカラムを有効にします。
- ラッパーにmax-widthを指定して読みやすい幅に制限し、margin-inline: autoで中央に寄せます。追加のルールなしで、広い画面でも行の長さが快適に保たれます。
フォルダーを公開する
- 静的ホスティングはファイルをそのまま配信します。HTMLとCSSのサイトに必要なのはそれだけです。一般的なサービスでは、管理画面にフォルダーをドラッグするか、Gitリポジトリを連携してプッシュのたびに公開中のサイトを更新できます。
- アップロード後は、公開アドレスをスマートフォンで開き、すべてのリンクをクリックし、フォームを一度送信して自分に届くことを確認しましょう。
ステップ1：ページの骨組み
どのHTMLページも同じ数行から始まります。doctypeはブラウザーを標準モードに保ち、langはスクリーンリーダーにどの言語で読み上げるかを伝え、viewportタグはスマートフォンに実際の幅を使わせます。
index.htmlの出発点
これを保存してブラウザーで開けば、タブにタイトルが表示される正しいページがもう完成しています。
ステップ2と3：構造と内容
body内では、headerに名前とメニュー、mainにセクションを入れ、footerでページを締めくくります。下のライブ結果にはまだスタイルがありませんが、良いHTMLはそれだけでも読みやすいことがわかります。
ヘッダー、ヒーロー、カード、問い合わせフォーム、フッター
テキストを編集すると結果が更新されます。フォームのラベルに注目してください。ラベルをクリックすると対応する入力欄にフォーカスが移ります。
これをindex.htmlと同じ場所のstyles.cssに入れます。読みやすい文字、中央寄せのカラム、flexのヘッダー、広い画面で3カラムになるカードグリッドを設定します。
完成版のスタイルシート
ビルダーの出力と同じように、header、main、footerの中身を<div class="wrap">で囲むとコンテンツが中央に寄ります。
ステップ6：公開
静的なフォルダーをオンラインに公開する方法
- ドラッグ＆ドロップ式の静的ホスティング
- 初めてのサイト
- ホスティングの管理画面でフォルダーをアップロードする
- Git連携の静的ホスティング
- 今後も編集し続けるサイト
- リポジトリにプッシュすると、ホスティングが再デプロイする
- 共用レンタルサーバー
- メールやPHPも必要なサイト
- ファイルマネージャーかSFTPで公開フォルダーにアップロードする
- Webサイトビルダー
- コードを一切書かずに済ませたい場合
- サイトの内容を説明し、見ながら編集する
ハーバーベーカリー
日の出前に焼き上げる、焼きたてのサワードウ。
- カントリーサワードウ
- シード入りライ麦パン
- 週末限定のペストリー
ページを作る
お店の名前、キャッチコピー、3つの商品を入力してください。入力に合わせてプレビューと両方のファイルが更新され、すぐにコピーできます。
連絡先メールアドレス
キャッチコピー
商品{n}
表示
プレビュー
ページのプレビュー
index.htmlをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る