はじめに
ウェブ開発の基本を学ぶためには、HTML（Hypertext Markup Language）とCSS（Cascading Style Sheets）の理解が不可欠です。HTMLはウェブページの構造を定義し、CSSはその見た目をスタイリングします。
本記事では、実際にWebページを作成する手順を、コード例を交えて詳しく説明します。
ステップ1: 環境の準備
まず、作業を行うための環境を整えます。以下の手順で進めてください。
テキストエディタのインストール
コードを書くためのテキストエディタを用意します。以下のようなエディタが人気です。
Visual Studio Codeをダウンロード
※上のURLを開き「Visual Studio Code をダウンロードする」ボタンを押してお使いのPC・macを選択してダウンロードしてください。
プロジェクトフォルダの作成
新しいフォルダを作成し、名前を「my_website」とします。このフォルダ内にHTMLファイルとCSSファイルを保存します。
ステップ2: HTMLファイルの作成
次に、HTMLファイルを作成します。以下の手順で進めます。
HTMLファイルの作成
「my_website」フォルダ内に「index.html」という名前のファイルを作成します。
HTMLファイルを作成するには、windowsならメモ帳、macならテキストエディタでテキストファイルを作成してデスクトップに保存します。
デスクトップに保存したテキストファイルの名前を「index.html」に変更し「my_website」フォルダ内に入れます。
基本的なHTML構造の記述
インストールしたVS Code(Visual Studio Code)を開いて、「my_website」フォルダを展開します。
「my_website」フォルダが開けたら、以下のコードを「index.html」に記述します。
練習を兼ねて、手打ちしてみましょう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の初めてのウェブサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>私の初めてのウェブサイト</h1>
<nav>
<ul>
<li><a href="#about">私について</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>私について</h2>
<p>ここに自己紹介文を入れます。</p>
</section>
<section id="services">
<h2>サービス</h2>
<p>提供するサービスの説明を入れます。</p>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<p>連絡先情報を入れます。</p>
</section>
</main>
<footer>
<p>© 2024 私のウェブサイト</p>
</footer>
</body>
</html>
ステップ3: CSSファイルの作成
次に、CSSファイルを作成してスタイルを追加します。
CSSファイルの作成
「my_website」フォルダ内に「style.css」という名前のファイルを作成します。
「idex.html」ファイルをフォルダ上でコピーして、名前を「style.css」にします。
コピーして名前を変更したら、VS Codeで内用を削除し保存します。
基本的なスタイルの記述
以下のコードを「style.css」に記述します。
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
}
ステップ4: レスポンシブデザインの追加
現代のウェブサイトでは、さまざまなデバイスに対応するレスポンシブデザインが重要です。CSSにメディアクエリを追加して、モバイルデバイスでも見やすいレイアウトにします。
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 10px 0;
}
}
このコードを「style.css」の最後に追加することで、画面幅が600px以下の場合、ナビゲーションメニューが縦に並ぶようになります。
ステップ5: テストとデバッグ
作成したHTMLとCSSファイルをブラウザで開いて、表示を確認します。
以下の手順で進めます。
ブラウザでHTMLファイルを開く
「index.html」ファイルをダブルクリックすると、デフォルトのブラウザで開きます。
表示の確認
ページが正しく表示されているか確認します。ナビゲーションリンクをクリックして、各セクションに移動できるかもチェックします。
デバッグ
表示に問題がある場合は、HTMLやCSSのコードを見直し、必要に応じて修正します。ブラウザの開発者ツールを使うと、スタイルの適用状況やエラーを確認しやすくなります。
ステップ6: ホスティング
ウェブサイトが完成したら、インターネット上に公開するためのホスティングが必要です。以下の手順で進めます。
ホスティングサービスの選択
無料または有料のホスティングサービスを選びます。
まずは、無料レンタルサーバーもあるので、そちらで公開してみるのも良いと思います。
有料レンタルサーバーと無料レンタルサーバーの違いは、広告が表示されることや容量にある程度の制限があること。その他に、独自ドメインの利用だったり、サポート体制、少量利用の可否などがあります。
本格的にサイトを制作したい場合は、有料のレンタルサーバーをお勧めしますが、勉強中は無料サーバーで十分だと思います。
ではでは、無料レンタルサーバーと有料レンタルサーバーの自分が思う使いやすいサーバーのリンクを貼っておきますので、登録の参考にしてください。
無料レンタルサーバー
有料サーバー
このブログでも使っている、お勧めなサーバー。
以下のリンクから登録すると、最大20％割引になります。
（ボクにも利用料20%のプレゼントがあるので、嫌な人は「エックスサーバー」で検索して別で登録してね！）
エックスサーバー
次のStar Serverもお勧めなサーバー。
無料レンタルサーバーでしばらく登録してたけど、使いやすくてサポートも丁寧だったのでお勧めしたいです！
（こちらも以下のリンクから登録するとボクに少しの紹介料をいただけますが、嫌な場合は「Star Server」で検索して契約してくださいね！）
Star Server
ファイルのアップロード
選んだホスティングサービスの指示に従って、作成した「my_website」フォルダ内のファイルをアップロードします。
公開URLの確認
アップロードが完了したら、提供されたURLを使ってウェブサイトにアクセスできるか確認します。
まとめ
この記事では、HTMLとCSSを使って基本的なウェブページを作成する手順を詳しく解説しました。環境の準備から始まり、HTMLとCSSのコードを記述し、レスポンシブデザインを追加し、最終的にホスティングまでの流れを紹介しました。
ウェブ開発は学ぶことが多い分野ですが、実際に手を動かして作成することで理解が深まります。ぜひ、この記事を参考にして、自分だけのウェブサイトを作成してみてください。
コメント