【初心者必見!】HTMLのブログページを15分で作成する方法を解説

2024.01.06
HTMLのブログページを15分で作成する方法を解説

「ブログサイトを一から作ってみたい」

「ブログページってHTMLだけで作れるのかな?」

と思ったことはありませんか?

今回は、そんな方のためにHTMLをCSSだけでブログページを作る方法を解説していきます!

STEPごとに分けて丁寧に解説していくので、初心者の方でも簡単にブログページを作ることができますよ。

ホームページなどのWebサイトを作ってブログページを作成する

ブログページを作成する時は、はじめに大元となるブログサイトなどのホームぺージを作る必要があります。

TOPページに1ページ分の記事を掲載してしまうと、後から追加で記事を書いた時に見づらくなってしまうので、記事一覧やおすすめ記事などを確認できるように必要なのです。

ちなみに、ブログサイトを作る時はセキュリティや使いやすさの観点から「WordPress」を使うのがおすすめです。

今回はHTMLだけでもブログページを作れることを学ぶために、HTMLのみで解説していきます。

今回は、ブログ記事1ページを作成することがテーマですので、ホームページは一から作成しません。

ホームページの作り方を詳しく知りたい方は、以下のページを参考にしてみてくださいね。

HTMLでのホームページの作り方を解説【初心者向け】

HTMLでブログページを作成する5ステップ

ブログページ一覧を表示するのはPHPなどのプログラミング言語が必要になります。

今回は、初心者向けのブログページ作成がテーマですので、簡単にHTMLとCSSだけで作れる1ページ分のブログ記事を作成します。

必要なステップを紹介していきますので、事前にHTMLを記述できるテキストエディタなどを準備しておきましょう。

HTMLとCSSでブログページを作成する具体的なステップは、以下の通りです。

  1. まずは書きたい記事をテキストファイルなどで執筆
  2. HTMLの枠組みを作成
  3. body内にSTEP1の文章をコピペ
  4. タグを使って文章を整える
  5. CSSで形を整える

【所要時間約15分】簡単なブログページをHTMLで作ってみよう!

では、先ほど紹介した5つのSTEPを詳しく解説していきます。

事前に以下のものを準備しておいてくださいね。

  • テキストエディタ
  • HTMLファイル
  • CSSファイル
  • imgファイル(画像ファイル)と画像1枚(好きな画像でOK)

約15分程度で簡単に作れるので、以下のSTEPを確認しながら一緒にブログページを作ってみましょう!

STEP1.まずは書きたい記事をテキストファイルなどで執筆

STEP3で文章をコピペするため、すぐに使えるように事前にブログ記事を執筆しておきます。

この際、マークを付ける、文字の大きさを変えるなどしてタイトルや見出し、強調したい文章などがわかるようにしておきましょう。

書きたい記事がある人は、Wordなどのテキストファイルに執筆しても良いですが、とにかくブログページの作り方を知りたい!という方は、以下の文章を使用してください。

h1タグ:■ h2タグ:◆ h3タグ:◇ ■タイトル ~ここに画像を入れます~ タイトルの下に記述する導入文です。 ◆大見出し h2タグの見出しの下に記述する本文です。 ~以下のリストを挿入~ ・リスト1 ・リスト2 ・リスト3 ◇小見出し h3タグの見出しの下に記述する本文です。 h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。 ~以下のリンクを挿入~ リンク(https://web-camp.io/magazine/) ◆まとめ この記事のまとめを記述します。

STEP2.HTMLの枠組みを作成

枠組みとなる基本的なHTMLコードを記述します。

一から全て覚える必要はないので、以下のコードをテキストエディタにコピペしてしまいましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>はじめてのブログ</title>
    <meta name="description" content="このWebサイトは、初めてHTMLで作るブログページです。">
    <link rel="stylesheet" href="./css/style.css">

  </head>

  <body>

  <!-- ここにブログ記事を記述していきます -->
 </body>

</html>

なお、今回はあくまでブログ記事を表示するだけなので、headerタグとfooterタグを使用しません。

STEP3.body内にSTEP1の文章をコピペ

STEP1で執筆したブログ記事をbodyタグ内にコピペします。

<body>
    h1タグ:■
    h2タグ:◆
    h3タグ:◇
    ■タイトル
    ~ここに画像を入れます~

    タイトルの下に記述する導入文です。

    ◆大見出し
    h2タグの見出しの下に記述する本文です。

    ~以下のリストを挿入~
    ・リスト1
    ・リスト2
    ・リスト3

    ◇小見出し
    h3タグの見出しの下に記述する本文です。
    h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。

    ~以下のリンクを挿入~
    リンク(https://web-camp.io/magazine/)

    ◆まとめ
    この記事のまとめを記述します。
  </body>

わからなくならないように、見出しなどのマークもそのままコピペしています。

STEP4.タグを使って文章を整える

では、順番にマークアップしていきましょう!

1.タイトル、見出しを整える(整えたらマークについての説明も消しましょう)

<body>
    <h1>タイトル</h1>
    ~ここに画像を入れます~

    タイトルの下に記述する導入文です。

    <h2>大見出し</h2>
    h2タグの見出しの下に記述する本文です。

    ~以下のリストを挿入~
    ・リスト1
    ・リスト2
    ・リスト3

    <h3>小見出し</h3>
    h3タグの見出しの下に記述する本文です。
    h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。

    ~以下のリンクを挿入~
    リンク(https://web-camp.io/magazine/)

    <h2>まとめ</h2>
    この記事のまとめを記述します。
  </body>

2.リストを整える

<body>
    <h1>タイトル</h1>
    ~ここに画像を入れます~

    タイトルの下に記述する導入文です。

    <h2>大見出し</h2>
    h2タグの見出しの下に記述する本文です。


    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>

    <h3>小見出し</h3>
    h3タグの見出しの下に記述する本文です。
    h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。

    ~以下のリンクを挿入~
    リンク(https://web-camp.io/magazine/)

    <h2>まとめ</h2>
    この記事のまとめを記述します。
  </body>

3.リンク、画像を整える

  <body>
    <h1>タイトル</h1>
    <img src="img/sample.jpg">
    タイトルの下に記述する導入文です。

    <h2>大見出し</h2>
    h2タグの見出しの下に記述する本文です。
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>

    <h3>小見出し</h3>
    h3タグの見出しの下に記述する本文です。
    h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。
    <a href="https://web-camp.io/magazine/">リンク</a>

    <h2>まとめ</h2>
    この記事のまとめを記述します。
  </body>

4.本文を整える

  <body>
    <h1>タイトル</h1>
    <img src="img/sample.jpg">
    <p>タイトルの下に記述する導入文です。</p>

    <h2>大見出し</h2>
    <p>h2タグの見出しの下に記述する本文です。</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>

    <h3>小見出し</h3>
    <p>h3タグの見出しの下に記述する本文です。<br>
      h3タグは、h2タグの中にもう一つ見出しを作りたい時に使用します。</p>
    <a href="https://web-camp.io/magazine/">リンク</a>

    <h2>まとめ</h2>
    <p>この記事のまとめを記述します。</p>
  </body>

STEP5.CSSで形を整える

HTMLだけの現段階では、ブラウザ上で以下のように表示されています。

HTMLだけの段階でのブラウザ上の表示

シンプルで寂しい印象ですよね。

よりブログらしく、見やすくするためにCSSで簡単にスタイリングしてみましょう!

一からコードを書くのが面倒な場合は、とりあえず以下のコードをコピペして、自分で少しずつカスタマイズしてみてくださいね。

/* 全て共通 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; 
  overflow-wrap: break-word;
  word-wrap: break-word; 
}

/* bodyタグ */
body {
  text-align: center; /* 全ての要素を真ん中に */
  padding: 50px 0; /* 上下の空白を指定 */
}

/* h1タグ */
h1 {
  padding: 30px 0; 
}

/* h2タグ */
h2 {
  background-color: #F89174; /* 背景色を指定 */
  color: #ffffff; /* フォントカラーを指定 */
  width: 600px; /* 横幅を指定 */
  padding: 5px 0; /* 上下の空白を指定 */
  margin: 20px auto; /* 上下の空白と真ん中に寄せる指定 */
}

/* h3タグ */
h3 {
  background-color: #F5F5F5; /* 枠線を指定 */
  width: 600px; 
  padding: 5px 0;
  margin: 20px auto; 
}

/* pタグ */
p {
 font-size: 14px; /* フォントサイズを指定 */
}

/* ulタグの指定 */
ul {
  border: 3px solid #F5F5F5;
  width: 600px;
  padding: 10px 0;
  margin: 20px auto;
}

li {
  list-style: none; /* リストの表示方法を指定 */
  padding: 5px 0;
}

上記のCSSを記述した場合、ブラウザ上では以下のように表示されます。

上記のCSSを使用した場合のブラウザ上の表示

HTMLだけで作られていた時に比べてよりブログらしくなりましたね!

このように、見出しに背景色を付けたり、リストを枠で囲うだけでも印象がグッと変わってきます。

ブログページはHTMLでも簡単に作れる!

今回は、HTMLとCSSでブログページを作る方法を紹介しました。

1記事分のブログページであれば初心者でも比較的簡単に作ることができます。

今回の記事を参考に、一度簡単なブログページを作成して感覚を掴んでから、本格的なブログサイト作成にチャレンジするのがおすすめですよ。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5