見出し画像
Photo by potto_de_ponto

【完全ガイド】Webサイト開発の基礎知識！HTMLとCSSの書き方

【AI×稼ぐ】ChatGPT収益化アイデア集 AIOLじゃんぷちゃん｜フォロバ100

初心者でも安心！HTMLとCSSでWebサイトを作れるようになろう

「Webサイトを作りたいけど、何から始めればいいの？」そんな悩みを抱えている方は多いのではないでしょうか。初めてのWeb開発は、専門用語やツールの多さに圧倒されがちです。でも、実は基本さえ押さえれば、あなたも簡単なWebサイトを作れるようになります。

本記事では、HTMLとCSSの基礎知識と実践的な書き方を解説します。これを読めば、Web開発のスタートラインに立つことができるはずです。具体的には以下のことが学べます：

① HTMLとCSSの役割の理解
② 実際にコードを書くための手順
③ 初心者におすすめの練習方法

それでは、Webサイト開発の一歩を一緒に踏み出しましょう！


【HTMLとCSSの基礎知識】2つの役割を理解しよう

HTMLとは？：Webページの骨組みを作る言語

HTML（HyperText Markup Language）は、Webページの構造を定義する言語です。
例えば、文章の見出し、段落、画像、リンクなど、ページ内の「中身」を作成します。

HTMLの基本構成

HTMLの基本的な書き方を見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>私のWebサイト</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これは初めてのWebページです。</p>
</body>
</html>

解説：

  • <!DOCTYPE html>：HTML5の宣言

  • <html>：HTML文書全体を囲むタグ

  • <head>：メタ情報を記述する場所（例：タイトル）

  • <body>：ページの本体内容

CSSとは？：デザインを整えるスタイルシート

CSS（Cascading Style Sheets）は、HTMLで作られた骨組みにデザインやレイアウトを加えるための言語です。
色やフォント、大きさ、配置などを指定します。

CSSの基本構成

次のCSSコードで、ページをより魅力的にしてみましょう。

body {
    background-color: #f0f8ff;
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: #ff6347;
    text-align: center;
}

p {
    line-height: 1.5;
    margin: 20px;
}

解説：

  • body：ページ全体のデザイン

  • h1：見出し（タイトル）のデザイン

  • p：段落のデザイン

【HTMLとCSSの書き方】手を動かして覚えよう

STEP1: 開発環境を整えよう

① テキストエディタを用意する
おすすめは以下のエディタ：

  • VSCode（Visual Studio Code）：無料で使いやすい。

② ブラウザを準備する
Google Chromeなどのモダンブラウザをインストール。

STEP2: 最初のHTMLを作成する

以下の手順で簡単なWebページを作ってみましょう。

  1. 新しいファイルを作成し、index.htmlと名前を付ける。

  2. 以下のコードを書いて保存。

<!DOCTYPE html>
<html>
<head>
    <title>初心者のWebページ</title>
</head>
<body>
    <h1>HTMLとCSSの世界へようこそ！</h1>
    <p>Webサイト作りを楽しみましょう。</p>
</body>
</html>

  1. ファイルをブラウザで開くと、内容が表示されます。

STEP3: CSSを適用してデザインする

  1. 新しいファイルを作成し、style.cssと名前を付ける。

  2. 以下のコードを書いて保存。

body {
    background-color: #e0ffff;
    font-family: 'Courier New', Courier, monospace;
}
h1 {
    color: #4682b4;
    text-align: center;
}
p {
    color: #2f4f4f;
    margin: 10px 20px;
}

  1. HTMLにCSSをリンクするため、<head>タグ内に以下を追加。

<link rel="stylesheet" href="style.css">


【具体例】簡単なWebサイトを作ろう

次に、具体的なプロジェクト例を見ていきます。

プロフィールページの例

以下のHTMLとCSSを使って、自分のプロフィールページを作成してみましょう。

HTMLコード例

<!DOCTYPE html>
<html>
<head>
    <title>私のプロフィール</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>私のプロフィール</h1>
    <img src="profile.jpg" alt="プロフィール写真" width="150">
    <p>こんにちは！私はWeb開発を勉強中です。</p>
</body>
</html>

CSSコード例

body {
    text-align: center;
    font-family: 'Verdana', sans-serif;
}

img {
    border-radius: 50%;
    margin: 20px 0;
}

p {
    color: #696969;
    font-size: 16px;
}

コードをコピーする【練習方法】スキルアップのためのアイデア

① 模写コーディング
気に入ったWebサイトのデザインを再現する練習。

② 無料の学習リソースを活用

③ ミニプロジェクトを作る
自己紹介サイトやお気に入りの写真ギャラリーを作るのがおすすめ。

結論：まずは小さく始めてみよう

HTMLとCSSは、Web開発の基礎中の基礎です。初めて触れるときは、難しく感じるかもしれませんが、少しずつコードを書いていけば、必ず理解できるようになります。大切なのは、手を動かして試すことです。

これからはあなたも、自分でWebサイトを作れるクリエイターの一員です。ぜひこの記事を参考に、Web開発を楽しんでください！


-AIOLちゃんプロフィール-

都内でOLをしている<AIOLちゃん>です
AIの力を借りながら、コツコツと一歩ずつ前進する様子をnoteで発信します！AIを活用して、「ネットで稼ぐ」副業の具体的なノウハウを発信していきます。

ぜひフォローをお願いします。必ずフォロバします！

62日目終了
AIOLちゃん

いいなと思ったら応援しよう！