はじめてのホームページ基礎講座(HTMLとCSS)

2020年4月3日2024年12月25日

URLをコピーしました！

初心者の方むけのホームページ作成講座

インターネットが生活の一部となった今、ホームページは情報を発信したり、自分やビジネスをアピールしたりするための強力なツールです。でも、「技術的に難しそう」「どこから始めればいいかわからない」と感じている方も多いのではないでしょうか？この講座では、初心者の方でも無理なく進められるように、ホームページ作成の基本を一つずつ丁寧に解説します。難しい専門用語は使わず、実際に手を動かしながら楽しく学べる内容です。パソコン1台があれば大丈夫！初めての一歩を、私たちと一緒に踏み出しましょう。

「ホームページ基礎から中級」の動画は2021年以前にAdobe Bracketsを使用して作成しました。しかし、Bracketsは現在サポートが終了しています。そのため、この記事では代わりにVisual Studio Code (VSC) を使用して解説を行います。VSCの使い方に関する解説と動画は新たに作成済みですので、安心して学習を進められます。

HTMLのマークアップの学習スタート

HTML（Hyper Text Markup Language）は「マークアップ言語」と呼ばれる言語です。

「マークアップ」とは、文章に印をつけて、その構造や意味をわかりやすくする作業のことを指します。HTMLは、文章の骨組みや構造を作るために使う言語です。

たとえば、タイトルを表すには<h1>、そのサブタイトルには<h2>、段落には<p>、箇条書きには<ul><li>、リンクには<a href="">といった具合に、それぞれの役割に応じた「タグ」と呼ばれる印をつけていきます。

このタグをつける作業は、機械任せではなく、人間が文章を理解しながら行う必要があります。そのため、この「マークアップ」という作業は、コーダーが手作業で行う重要な仕事のひとつです。

動画で学ぶWebデザイン教室　 Fuku…

HTML要素　-よく使うタグ名と使う場所とコード確認- | 動画で学ぶWebデザイン教室　 Fukuokamiyako HTML要素の基本を学ぼう HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たし…

練習フォルダを作成

まず、パソコンのデスクトップや「ドキュメント（書類）」フォルダに、新しく「ホームページ練習」などの名前のフォルダを作成してください。このフォルダに、これから作成するホームページのファイルを保存していきます。

ホームページのファイルは、必ずファイル名の最後に「拡張子」として.htmlを付ける必要があります（例：index.html）。拡張子は、ファイルの種類を表す重要な部分です。

Windowsをお使いの方は、初期設定ではエクスプローラーに拡張子が表示されていないことがあります。表示するには、エクスプローラーを開き、「表示」タブの中にある「ファイル名拡張子」にチェックを入れておきましょう。これで拡張子が表示されるようになります。

Visual Studio Codeのインストールしてから練習フォルダを読み込む

HTMLを練習するには、プログラム作成に特化した専用のエディタ（テキスト編集ソフト）を使います。今回の動画では「Adobe Brackets」を使用していますが、この記事では「Visual Studio Code」を使って解説します。

まず、Visual Studio Codeを開いてください。そして、先ほど作成した「ホームページ練習」フォルダを開きます。方法は、メニューバーから「ファイル」→「フォルダを開く」を選択し、「ホームページ練習」フォルダを指定してください。これで、フォルダ内に作成するファイルがVisual Studio Code上で管理できるようになります。
また下記のように、フォルダをドラッグするだけでもOKです。

左のサイドバー上で、右クリックして、新しいファイルを作成し、index.htmlとします。

右側の入力側に下記の文章をコピー＆ペーストしてください。

エコロジー＆環境問題 
ECOLOGY 【エコロジーへの取り組み】
エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
Copyright (C) Computer Technology Groups. All rights reserved.

下記のように貼り付けることができたら、忘れずに保存します（メニューバーのファイル＞保存）もしくは、Ctrl + s (command +s)で保存となります。

HTMLを入力開始

１行目にはHTMLのバージョン宣言

ホームページのファイルを作成する際、最初に「HTMLのバージョン宣言」を書く必要があります。これによって、「このファイルはHTMLという言語で作られていて、HTML5というバージョンを使っています」とコンピュータに伝えることができます。

HTML5のバージョン宣言は、以下のように書きます：

<!DOCTYPE html>

この1行をファイルの一番最初に書くことで、ブラウザ（ホームページを表示するソフト）が正しくファイルを読み取れるようになります。忘れずに必ず入力しましょう！

2行目にはhtml要素

次に、2行目には「html要素」を書きます。HTMLは、開始タグと終了タグがセットになっています。開始タグは<html>、終了タグは</html>です。この2つのタグで、HTML全体の範囲を囲むようにします。

終了タグ（</html>）は、ファイルの最後に記述しておきましょう。これでHTML全体を正しく構成する準備が整います。

さらに、<html>タグには「lang属性」を追加します。この属性は、そのHTMLがどの言語で書かれているかをブラウザに伝えるためのものです。たとえば、日本語で書かれたページの場合は、以下のように記述します：

<html lang="ja">

このように書くことで、「このHTMLは日本語で記述されています」という情報が伝わり、ブラウザや検索エンジンが適切に処理できるようになります。

3行目からはhead要素以下を指定

3行目からは「head要素」を記述します。<head>タグは、ホームページを表示するための準備や設定を記述する場所です。この中には、ページ全体に影響する重要な情報を指定する「meta要素」や、ページタイトルを決める「title要素」などを記述します。

まず、文字化けを防ぐために以下の「meta要素」を記述します：

  <meta charset="UTF-8">

このコードは、「このページはUTF-8という文字コードで書かれている」とブラウザに伝えます。UTF-8は、日本語や多くの言語を正しく表示できる文字コードです。

次に、「title要素」でホームページのタイトルを指定します。このタイトルは、ブラウザのタブや検索結果に表示される部分です。以下の例では「エコロジー＆環境問題」というタイトルを指定しています

<title>エコロジー＆環境問題</title>

これらを<head>タグで囲むと、以下のようになります：

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題</title>
</head>

これで、ページの基本的な設定が整います！

７行目からbody要素を入れて、以下のように完成していきましょう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題</title>
</head>

<body>
    <h1>ECOLOGY 【エコロジーへの取り組み】</h1>
    <p>
        エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
        Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
    </p>
    <p>
        また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
    </p>
    <p>
        <small>Copyright (C) Computer Technology Groups. All rights reserved.</small>
    </p>
</body>

</html>

はじめてのホームページ基礎講座　２に移動

HTMLとCSS基礎　1回目の動画

下記は上記の流れのコーディングの練習を行っている動画です。詳しくは下記の動画から確認しましょう。

はじめてのホームページ基礎講座では、HTMLを、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。

Brackets

A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With ne…

Adobe社が開発しているAdobe Bracketsは、HTML、CSSの学習を始めたい初心者の方には、おすすめのエディタです。そもそも「エディタって何？」となりますが、エディタは、HTML,CSSなどのホームページを作るために必要なコードを入力しやすいように開発されたメモ帳です。

中でもAdobe Bracketsは、インストール直後から日本語に対応しており、コードを入力したあとにブラウザで閲覧するための「プレビュー」機能も最初から準備されています。また、無料で使用でき、後の機能強化に用いるプラグインも豊富に揃っているという利点があります。

但し、残念なことにAdobe Brackets は2021年にサポートが終了したので、今後HTMLやCSSがバージョンアップされた際は対応されません。HTMLの練習に慣れてきたら、他のエディタもご検討ください(追記)

東京都新宿区のWeb制作会社 – ウェ…

2021年9月1日、Adobeが「Brackets」のサポートを終了！推奨エディタ「VisualStudioCode」に乗り換えよう｜… 東京都新宿区のWeb制作・Webデザイン会社ウェブラボ（Weblab）のスタッフブログ。ウェブラボのスタッフが、Webの最新トピック「 2021年9月1日、Adobeが「Brackets」のサポ…