スキル

Webページ管理に便利なHTMLの基本を徹底解説

「サイトの管理運営を始めたいけれど、HTMLについての知識がない」と、このページを見ている方は思われているかもしれません。今回はサイトの運営管理をする上では必要な知識になるHTMLの、基礎的な知識をご紹介します。

HTML(HyperText Markup Language)はサイトで表示するページを組み立てる為のもので、ブラウザで読み取って文字や画像、サイトのデザイン全般を表示しています。

HTMLを使用する時に使用するもの

HTMLを記述する時には、実際にコードを入力する為の「テキストエディタ」と、HTMLがきちんと表示されているかを確認するための「Webブラウザ」が必要です。使用したことのない方の為に、それぞれの役割や使用方法を解説します。

テキストエディタについて

テキストエディタには様々な種類がありますが、ここでのテキストエディタはHTMLを入力するためのものです。「メモ帳」というアプリケーションがパソコンには入っていることがありますが、それでは文字を入力するだけなので、プログラミング言語を入力するツールが必要です。

テキストエディタでは、使用頻度の高いタグを予測入力したり、色分けでわかりやすく管理したりできるのでコードの入力に特化しています。テキストエディタには色々な種類がありますが、初めて使用する方は「Sublime Text」がオススメです。初めての方でも直感的に使用ができて、シンプルな機能性なので使いやすいという特徴があります。

Webブラウザについて

Webブラウザとは「Google Chrome」や「Safari」などの事で、Webサイトを見る為に使用するもので、HTMLを確認するためのブラウザはいつも使用しているブラウザで問題ありません

WebブラウザにはHTMLを読み取って表示するという機能が備わっているので、自分が作成したHTMLが正しく表示されているかを確認することができます。サイトを作成する時には必須の作業です。

Windowsで拡張子を表示する方法

HTMLの作成ではファイルの拡張を表示した方がやりやすいので、事前に拡張子を表示するための設定をしておきましょう。Windowsの設定方法はスタートメニュー内の「表示」から「オプション」を選択します。その中の「フォルダオプション」をクリックして「表示」という箇所を開いて「登録されている拡張子は表示しない」のチェックボックスをオフにします

HTMLをWebブラウザで表示する時の流れは?

HTMLの入力をした後はWebブラウザで確認をしますが、その時の流れについて解説します。

「Sublime Text」を使用する

先ほどご紹介した「Sublime Text」を例にして解説します。ダウンロードした「Sublime Text」を開きます。インストールしたファイルの保存箇所が不明な場合はパソコン内の検索欄に「Sublime Text」を入れれば表示されます。

「Sublime Text」を開くと入力画面が開くので、次はコードの入力をしていきます。

定型文のコピー&ペーストをする

開いた画面に以下のコードをコピー&ペーストをします。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>サイトタイトル</title>
<meta name=description content=サイト説明文>
</head>
<body>
<h1>大見出し</h1>
<p>文章</p>
</body>
</html>

ファイルの保存について

定型文の貼り付けが終わったら、その状態を保存します。この時にファイルの拡張子が「○○○.html」になっているかを確認してから保存しましょう。管理しやすいようにです。

Webブラウザで表示する

ファイルを保存したらWebブラウザを起動して、どこでもよいのでページを表示します。今回は「Google Chrome」を例にして解説します。先ほど保存したhtmlファイルをドラッグ&ドロップをしてブラウザの画面上に移動させましょう。うまく動作しない時はファイルを右クリックして「開く」でGoogle Chromeを選択します。

そうすると、ファイルの内容がページとして表示されます。

HTML定型文の内容は?

先ほどご紹介したHTMLコードについて解説します。先ほどのコードはサイトを作成する時には代表的な定型文なので、必ず覚えておきましょう。

まず一番上部に入力していた「<!DOCTYPE html>」はここからの内容はHTMLで入力していくというのを、認識させる為のコードです。

</html>
<head>
<meta charset=utf-8>
<title>サイトタイトル</title>
<meta name=description content=サイト説明文>
</head>
上記のコードの部分は入力はしますが、サイトには実際に表示されません。

<body>
<h1>大見出し</h1>
<p>文章</p>
</body>
</html>
実際にページに表示されるのは上記の部分です。

!DOCTYPE htmlという部分について

<!DOCTYPE html>(ドックタイプ エイチティーエムエル)とはHTMLを入力する時には必ず入力するもので、今からの内容がHTMLであることを認識させる為のものです。

htmlタグについて

<!DOCTYPE html>の下部に実際にコードを入力していきますが、コードの最初と最後を<html>~~</html>と入力します。このコードを入力することでその間のコードがHTMLであるということを認識させます。

headタグについて

<head>~~</head>(ヘッド)は先ほど「表示されない部分」と解説した箇所です。これはブラウザに認識させる必要がある内容になります。

例えばサイトのタイトルや説明文、サイトオーナーの名前などがこの部分の内容になります。<title>~~</title>にはそのwebサイトのタイトルを入力をして、<meta name=”description” content=”○○○○”>には○○○○の部分にサイトの説明文を入力します。

タイトルと説明文はブラウザで検索した後の検索結果のページで表示されるので、実際にサイトの内では使用しません。

bodyタグについて

<body>~~<body>(ボディ)は実際にサイトで表示される部分のコードです。

ボディタグの間に実際に表示したいコンテンツを入力していきます。先ほどの内容では

<h1>大見出し</h1>
<p>文章</p>

と入力しましたが実際に表示されるのは

大見出し
文章

という表示になります。

使用頻度の多いコードは?

ボディタグの中に入力する頻度が高いコードの一部をご紹介します。どのようなものを表示させたいかをイメージしながら、確認していきましょう。

pで段落をつくることについて

HTMLを入力していく時には、「pタグ<p>~</p>」は必ず使用します。ページ内での段落表示やブログなどを作成する時には、改行をする時に使用します。ちなみに、「p」はParagraph(パラグラフ)のPを意味します。

[htmlコード]

と入力をするとブラウザでは

[ブラウザ表示]

と表示されます。

h1~h6の見出しについて

h1~h6で見出しをつくる為に使用しますが、「h1」は記事のタイトル、「h2」は記事の大見出し、「h3」は記事の中見出し、「h4」は記事の小見出しという風に番号の値が増えていくにしたがって見出しの内容としてのスケールは小さくなります。基本的には「h3」までを使用して、必要であれば「h4」を使用するという認識で問題ありません。あまり見出しを細かく設定し過ぎても見にくいページになってしまいます。

imgで画像を貼る方法について

HTMLでは画像を表示する時に「imgタグ」を使用します。使用できる画像ファイルの形式はJPG/PNG/GIFだけなので注意しましょう。imgタグを使用する時は以下のように入力します。

src=”” には画像ファイル名とファイルの場所を示す内容を入力します。ページが開かれた時にはここで指定している画像が表示されます。

alt=”” には画像が表示できなかった時に表示される文章です。代替えテキストと呼ばれるものです。imgタグの場合は最後にスラッシュを入れることで、コードの内終了を意味します。

文字と同時に表示する時は以下のようにコードを入力します。

[htmlコード]
<p>ここに文章を入力</p>
<p><img src=”画像ファイルの指定” alt=”代替えテキスト” /></p>

画像で段落をつける時には「p」を使用するので、imgタグを「p」で挟むと改行ができます。

aタグでリンクの作成方法について

サイト内で他のページへのリンクを作成したい時は「a」タグでリンクを作成できます。

<a href=”リンク先URL”>~</a>という風に入力することで、ページ内にはURLが表示されてそれをクリックするとリンク先へアクセスすることが可能です。

また、テキストだけではなく画像などを指定することも可能なので、画像をクリックしてリンク先をアクセスできるように設定することも以下の方法で可能です。

[htmlコード]
<p>テキスト</p>
<p>
<a href=”リンク先のURL”>
<img src=”画像指定” alt=”代替えテキスト” />
</a>
</p>

箇条書きを作る方法について

サイト内でのテキストの一部を箇条書きで表示したい時は「<ul>と<li>」もしくは「<ol>と<li>」で箇条書きの表示が可能です。

例えば下記のようにHTMLを入力すると通常の箇条書きで表示されます。

<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>
の場合
・1行目
・2行目
・3行目
のようにサイトでは表示されます。

ulの代わりにolを使うと箇条書きが番号での表示になります。

<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>
と入力をすると
1.1行目
2.2行目
3.3行目
とサイトで表示されます。

箇条書きの最大数の制限はないので、表示させたい数だけ間の行数を増やせば好きなだけ箇条書きで表示ができます。

改行について

「p」でも実際には改行ができるのであまり使用することはありませんが「br」というコードでもページ内の改行が可能です。「p」との違いは終了タグの使用がなくても改行ができるので、好きな位置で改行ができるという点です。例えば以下のように使用します。

<p>あかさ<br>たなはまやらわ</p>
と入力すると

あかさ
たなはまやわら
という表示になります。

HTML内でのメモをしたい時について

HTMLコードを入力している時に、自分がわかりやすいようにメモを残しておきたいという場合は「<!–と–>では」を使用します。使い方は以下の通りです。

[htmlコード]
<h1>タイトル</h1>
<!–メモ–>
<p>内容</p>
と入力しておくとサイトにはタイトルと内容だけが表示されます。

例えばコードの詳細についてや画像のことについてなどを書き記しておくと、あとで編集する時に自分が管理しやすくなります。

divタグとspanタグについて

divタグとspanタグはテキストを分けて管理したい時に使用します。入力方法は以下の通りです。

<div class=one>
<p>あいうえお<p>
</div>
<div class=two>
<p>かきくけこ<p>
</div>

 

ちなみにこの入力だけではサイト表示は何も変化はありません。このコードはそれぞれを1まとめとしてグループ分けをする為のコードです。

たとえば、「あいうえお」は青文字にして「かきくけこ」を黄文字にするという効果をつけることが可能になります。

「div」では前後の改行はありませんが「span」では前後が改行されるので、改行が必要な場合は「span」を使用しましょう。

初心者でもHTMLが学べるサイト

初心者でもHTMLを学べるサイトをご紹介します。無料のサイトをまとめてご紹介しますのでこれからHTMLを学びたいという方はぜひ参考にしてください。

ドットインストールについて

毎日少しずつ学びたいけど、まとまった時間を取るのが難しいという方にオススメです。全部で307個の講座を無料で公開していて、3分ずつなので毎日少しずつ学べます。初心者向けの入門講座もたくさんあるので、確認してみてください。

ちなみに月額980円の有料プランもあり、中級者向けの内容が公開されています。初心者の方は無料で公開されている分でも十分勉強になります

参考:ドットインストール

CODEPREPについて

HTMLを楽しく覚えられるので苦手意識があるという方にオススメです。穴埋め式の画面でテンポよく楽しみながらHTMLについて学ぶことができます。また、動画だけではないので実践しながら学ぶことができて飽きません。

参考:CODEPREP

schooについて

じっくりとHTMLについて学びたいという方におすすめのでサイトで、HTMLだけではなく他にもプログラミングについて幅広い講座を聞くことが可能です。時間としては約1時間〜2時間の講座があるので、まとまった時間をとれる方向けになります。

中級者向けの月額980円と1,980円の有料プランもあるので、慣れてきた方でもっとスキルアップをしたいという方は利用しましょう。本格的にWebデザイナーとしてスキルアップしたいという方は99,800円のプランもありますので、興味のある方は合わせてチェックしてみてください。

参考:schoo

progateについて

スライドをみながら実践的にHTMLを学べるサイトで、比較的難易度が高めです。詳しい知識を学ぶことができるので、他のサイトで学んでからでも十分に新しい知識を取り入れることが可能です。また、月額980円の有料プランもあるので、応用的な知識も学びたいという方は合わせてチェックしてみてください。

また、提携しているクラウドソーシングサイトで仕事を受注することもできるので、実績を積むこともできます。

参考:progate

HTMLクイックリファレンスについて

学ぶというコンテンツではありませんが、HTMLについて辞書のように調べることのできるサイトです。一通りのHTMLを学んだ後でも全てのコードを記憶するのはとても難しいですが、このサイトでコードを調べるとすぐにわかります。

また、欲しい機能を元に逆引きで調べることも可能です。

参考:HTMLクイックリファレンス

まとめ

HTMLと聞くと難しく聞こえますが、基礎的な部分さえ覚えればあとは応用なので少しずつ覚えれば大丈夫です。サイトを管理運営したいという方にとってHTMLは覚えておくと便利ですので、今回の内容を参考にしてこの機会にぜひチャレンジしてみてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。