HTML

HTMLの勉強で押さえておくべきこと①Markup Languageとして使われるタグ

Sponsored Link

Sponsored Link

HTMLは習うより慣れろ

HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。
プログラミングをマスターしようとしたらまずはHTMLの習得は一丁目一番地です。
ここで挫折したらそれでもうおしまいですが・・・・・・私は最初に挑戦したときは挫折してしまいました^^;
あの文字と記号の羅列を最初に見たときに吐き気がしてどうしても先に勧めませんでした。
しかし
実際になにか形を作ろうと、作業をしながらやっていくと

HTMLは情弱のおじさんおばさんでも比較的簡単にマスターすることができると思います。
案ずるよりも有無が易し!

「案ずるよりも有無が易し」ということわざは

お産は生む前はあれこれ心配なことも多いが、実際にはそこまで難しくはない、
というところから派生して物事は事前にあれこれ思い悩むよりも、実際に取り組んで見ればそれほど難しくない

ということで。

HTMLの学習にアレルギー反応が起きる方は実際に順番に作成をしていくのが一番の早道です。

ちなみにHTMLはあくまでも土台ですので。
HTMLだけで作られたウェブページは文字と画像だけの単調なものになってしまいます。
そこでHTMLで作った土台のうえに
さらにより洗練したデザインやレイアウトを決めるのがCSSと呼ばれるコンピュータ言語があります。

HTMLを一通り見たらすぐにCSSを勉強しはじめ、一緒に理解を深めていきたいと思います。

今回はその第1段階で。

基本の基本を見ていきたいと思います。

HTMLとはなにか

HTMLはHyperText Markup Languageの略で2つの意味が組み合わさった言葉です。

「HyperText」とは文字通りの意味は「テキストを超えるテキスト」ということで。
通常のテキストの機能を超えてハイパーリンクを埋め込むことができます。

HTMLのもう一つの特徴である「Markup Language」とは
文書内の各部分(要素(element)と呼びます)に見出し・段落・表・リストなど、文書の中で果たしている役割が分かるように目印をつけて
その部分がどんな要素なのかをコンピューターに理解させるものです。

その事によって検索エンジンがウェブページの構造を把握して解析することができるようになったり。
ブラウザがウェブページ内の各要素の意味を理解して見出しに応じて文字の大きさを変えたりして
見やすい表示にしてくれたりします。

つまり・・・・

ハイパーリンクであることを示したり、文書の構造に目印をつけるための記号として使用されるのがHTMLタグです。

HTMLタグの使い方

<タグ名>と</タグ名>の間にタグの中身が挟まれています。

この<タグ名>中身</タグ名>という塊を要素といいますが、中身は挟まれるタグによって役割が変わっていきます。

例えば

<h1>これは練習です</h1>
<p>これは練習です</p>

とあった場合
同じ中身「これは練習です」であっても
<h1>これは練習です</h1>は大見出しとして、
<p>これは練習です</p>はこれで1段落である、とPCは認識をし、対応してくれます。

タグで囲む事によってPCにの要素の意味を知らせる事ができるのがHTMLですので
タグで文や画像などが訳のわからない記号などで囲われているのです。

ただ「文法の定義上、開始・終了タグ間に含める内容が存在しないために終了タグを設定することができない
「空要素」と呼ばれるタグがあり。
具体的にはmeta>や<input>,<img>などですが、それらはHTMLでは「閉じ」がありません。
(xhtmlでは閉じの要略が認められていないので「 />」 と表記することで終了タグの代わりにします)

HTMLは入れ子構造

HTMLは以下のようにタグ内にさらにタグを入れ込む構造になっています。

<!DOCTYPE html>

<html>
<head>
<title>html5で作成しています。</title>
 </head>
 <body>
<h1>これは練習です</h1>

   <p>これは練習です</p>

<h2>見出し2です。</h2>

   <p>練習しています</p>
</body>
</html>

このことを入れ子(ネスト)にする、といいます。

これを実際に表示してみると以下のようになります。

実際の表示。

見出し1です。

練習しています!

見出し2です。

練習しています!

ただしタグの種類によってこのタグは中に書いてもいいけどこのタグはだめ、というようなルールがあリます。

HTML基本タグ よく使われるタグ

<タグ名>と</タグ名>の間にタグの中身が挟まれ
この<タグ名>中身</タグ名>という塊を要素といい
中身は挟まれるタグによって役割が変わって来る

と先ほど書きました。

またタグによってはそのタグ内に追加の情報(属性)を入れることができます。
それは後ほど説明をしますが。

最もシンプルな形は

<タグ >サイトのトップページ</タグ>です。

それに属性を付けていくのが一般的な形です。
例えば
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”>サイトのトップページ</a>

というふうに色分けしrた3つの部分がaタグの属性です。

いずれHTMLではこのタグで文や画像などをはさむのが基本です。

今回は最低限必要と思われるタグを紹介しておきます。

ただ「文法の定義上、開始・終了タグ間に含める内容が存在しないために終了タグを設定することができない
「空要素」と呼ばれるタグがあり。
具体的にはmeta>や<input>,<img>などですが、それらはHTMLでは「閉じ」がありません。
閉じをつけるとエラーとなりますので注意が必要です。
(xhtmlでは閉じの要略が認められていないので「 />」 と表記することで終了タグの代わりにします)

DOCTYPE宣言

HTMLやXHTMLの文書の一番初めに書かれているもので
「このファイルはHTML文書です」ということと。

どのHTMLのバージョンか。
またそのバージョンに従った文書タイプ定義(DTDーDocument Type Definition)で記述をすることを宣言するものです。

これはタグではありません^^;

ただし最新のHTML5では、

<!DOCTYPE html>

とシンプルに記述するだけで上記のことが宣言されたとみなされます。
なお大文字と小文字は区別されません

<html>

<html></html>で囲まれた中身がHTML文書であることを示すタグ。
(DOCTYPE宣言のあとの)最初に<html>、最後に</html>と記述。
その中に<head></head>と<body></body>がひとつずつ入ります。

<head>

文書全体の基本的な情報(ヘッダ情報)を<head></head>で定義します

例えば「フォントの読み込み設定」「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などです。

<head>内のコードは画面には表示されません。

<title>・<meta>・<link>のタグはこの<head></head>の中に入ります。。

<title>

サイトのタイトルを<title></title>内に記入するとブラウザのタブや、

ブックマークされた際にそのタイトルとして表示されます。。

<meta>

サイトのメタ情報を設定するタグです。

メタデータとは付帯情報という意味で、ここではhtml本体を説明するものになります。
例えばワードなどでコンテンツを作った場合、それを本体とすると
作成日、タイトル、製作者などが本体コンテンツに対するメタデータにあたります
htmlでは<meta>に文字コードを指定したり、検索エンジン用のキーワードを入れたりするのが一般的です。

例えばhtml5において文字コードを”UTF-8”にする場合(日本語のサイトであれば、必ずこのコードを書くべき。)
<meta charset=”utf-8″>と記述します。

meta要素のうち文字コードを指定する場合には(html5の場合)charset属性を使います。

ちなみに文字コードとは、

コンピュータなどの電子媒体において、文章を画像などの図形データとして扱わずに、テキストの形式で扱う場合に、その各文字(単一の文字でない場合もある)に対して持っているコードのことである。(ウィキ)

なお終了タグが存在しないので入れるとエラーになります。

<link>

指定した文書を参照するタグ。
外部スタイルシートを適用する場合などの際これを使用します。

記事全体として。
例えばテキストタイプの”style.css”という外部CSSファイルをスタイルシートとして参照したい場合は
<link rel=”stylesheet” href=”style.css” type=”text/css”>

などと記述します。
CSSをについては別記事で解説します。

なお終了タグが存在しないので入れるとエラーになります。

<body></body>

コンテンツの中身を書く部分。

画面に表示されるのはbody内のものだけです。

またbodyタグは基本的に1ページに1回しか使うことができません。

bodyタグで使われる基本的なタグについて解説をしていきます。

<header>

イントロダクションやナビゲーショングループであることを示すタグ
HTML5から新たに追加されました。(ヘッダ情報を扱う<head>タグとは別のもの)
Webサイトの先頭)部分に使用し、
主にサイトのタイトルやメインの説明文やメニュー、ロゴや記事の内容などを伝えるナビゲーションなどが入ります。

当サイトでは記事の上の方ですね。

<footer>

HTML5から新たに追加されたフッタとは、そのセクションに関する情報であることを示すタグなので、
必ずしも一番下に置く必要はありません。
一般的には、サイト情報、関連文書へのリンク、著作権、連絡先などの情報が含まれます。

当サイトでは一番下の部分。

見出し<h1~h6>

<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>

見出しは数値が大きくなるほど小さくなります。

実際の表示

h1の見出し

h2の見出し

h3の見出し

h4の見出し

h5の見出し
h6の見出し

コンテンツを整理してわかりやすくすることができます。

段落<p>

段落を作成する際に使うタグで<p>~</p>の部分が段落(paragraph)となリます。

<p>この間が段落</p>
↓(実際のウエブ上での表記)
この間が段落

タグに属性を追加すると、要素のサイズや配置などを指定することができます。

川端康成「雪国」冒頭部分

国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。

この文章の段落タグ<p>に配置指定タグであるalignを追加し。テキストを中央(center)揃えにした場合。
<p align=”center >国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。</p>

ウエブ上で表示した場合にはテキストは中央に配置されます。

国境の長いトンネルを抜けると雪国であった。

夜の底が白くなった。

信号所に汽車が止まった。

この文章の真中だけを太字にするために<strong>夜の底が白くなった。</strong>というふうに太字のダグで囲みました。

改行<br>

HTMLコードを書いて改行したいときにエンターを押しても
改行として反映されません。
<p>タグを使えば改行はできるんですが。
もし<p></p>の中で改行したい場合は<br>タグを挿入すればOKです。

ただ私は殆ど使ったこと無し^^;なれてくるとあまり使わなくなるタグだと思います。

コメント非表示のコメントアウト<!—->

<!–と–>で挟まれた部分は画面に表示されませんので自分用のメモ書きに使ったりするのに便利です。

<h1>セキセイインコは可愛いね</h1>
<!–そのうちオカメインコも飼ってみようかなってこの部分がコメントアウトだから表示されないよ–>
<p>丈夫だし人懐っこいし。でもそんなにベタベタしてこないし。</p>

実際の表示

セキセイインコは可愛いね

丈夫だし人懐っこいし。でもそんなにベタベタしてこないし。

となってコメントアウトの部分は消えています。

ただこれ記事を画面上で右クリックして出てきたメニューから「ページのソースを表示」をクリックすると

HTMLコードがすべて見られますので。
当然コメントアウトの部分が誰にでも見ることができます。

秘密の事柄などは書かないでおきましょう^^;

 

 

リストを作成する<ol>・<ul>・<li>、<dl>・<dd>

<li></li>

はlist itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内の各項目を作成するときに使用します。

<ol></ol>

はordered listの略で、
アラビア数字(1,2,3等)やローマ数字(I,II,III等)等の数字 アルファベット「a,b,c~」など順番のあるリストを作成する事ができます。

例えば以下のように記述すると。

<ol type=”A”>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>

項目のところを「テスト」に変えると実際の表示は以下です。

  1. テスト1
  2. テスト2
  3. テスト3

<ol type=””>の””に1という数字を入れると

    1. テスト1
    2. テスト2
    3. テスト3

というふうに表示されます。

<ul></ul>

はunordered listの略で、
順番のないリスト(■や・等のマークが左端につくリスト)を作成する際に使用します。

先頭に付く記号の種類はtype属性で指定していきます。

  • テスト1
  • テスト2
  • テスト3

説明付きリスト<dl><dt><dd>

<dl>はDefinition Listの略で、<dl>~</dl>の範囲が定義リストであることを表します。

定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。

<dt>とは「definition team」の略で、定義語を表すタグです。

<dd></dd>は「definition description」の略で、定義の説明を表すタグです。

定義リストを表す<dl>タグとその説明を表す<dd>タグを組み合わせて定義リストを記述します。

例えば以下のように記述したとして

<dl>
<dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>

実際の表示

セキセイインコ
かわいいかわいいかわいい
オカメインコ
とってもかわいい
コザクラインコ
めちゃくちゃかわいい

テーブルを作成する<table>・<tr>・<td>・<th>

例えば以下のように記述すると

<table border=”1″>
<tr>
<th>インコ</th><th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td><td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td><td>性格は温厚であり人懐っこく長生き</td>
</tr>
</table>

実際の表示

インコ 特徴
セキセイインコ 値段が手頃で声真似が得意
オカメインコ 性格は温厚であり人懐っこく長生き

テーブルを作成するには以下の4つのタグが必要です。
table:表全体をはさむタグ。<table>~</table>の範囲が表になります。
tr:Table Row(テーブル行)の略。このタグを使用した数だけ行が追加されます。
th:Table Headerの略。テーブルの見出しのセルに使用します。

td:Table Dataの略。trの中でセルになります。表の中身が記述されるセルとなります。

<tr>
<th>インコ</th><th>特徴</th>
</tr>

で見出しセルであることを示します。

<tr>
<td>セキセイインコ</td><td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td><td>性格は温厚であり人懐っこく長生き</td>
</tr>

で中身についてのものであることを示します。

なお<table border=”1″>のborderは表の枠線の太さを決めるもの 。
border=”1″というのは 「線の太さが1pxになります」という意味で。
数とが増えていくほど太くなり、0にすると線は表示されません。

また様々な要素を加えることによって背景や文字の色を変えたり。
中央揃えにしたり。セルを結合したりなどできます。

デザインを自由に変えるために重要なタグ

CSSと連動してデザインを自由に作ることができるようにするためにぜひとも理解をしておく必要があるのが
2種類のタグです。

管理名をつけられるclassとid

この2つのタグは管理名をタグにつけるために必要な属性を示します
そしてHTMLで各タグに管理名をつけておくと、CSSでその管理している部分だけデザインを変える事ができます。

CSSを書き込む場所に関しては場合によって3種類のケースがありますが。
今回はHTMLファイルにstyleタグを追加してその中にCSSを書いて見ます。

例えば全体の文字の色を変えたい、という場合。

そのままだと文字は黒なんですが。
<head>内のスタイルシート<style> </style>に
以下のように記述すると

この様になります。

このサイトのトップページに飛ぶようにしました。
(リンクについては次に記事で詳しく解説しています。)

しかし<body> </body> の中をもっと細かいデザインにしたいといった場合。
管理名をつけることで可能になります。

タグにclassやidを割振っておき、それをCSSのデザイン情報とひもづけるという形です。

詳しくはCSSのところで解説をしていきます。

同じ様に管理名をつけるこの2つのタグですが。idとclassの違いは?ということなんですが。
idが1つのHTML文書内で同じid名を使うことができないのに対して
classは何回でも同じclass名を使うことができます。

CSSを学ぶことでこの違いの意味は次第に理解していくことができます。

コードにまとまりを作るためのタグdivとspan

span要素もdiv要素も特定の意味を持ちません。
しかしclass、lang、dir属性などのグローバル属性(HTMLのすべての要素で指定できる属性)と一緒になって
そのタブに含まれるフレーズをグループ化することができます。
つまり。divとspanは同じくまとまりを作るためのタグです。

違いは<div></div>で区切った場合。そのまとまりの後には改行が入ります(つまりブロック単位でまとめる)が。
<span></span>の後に改行は入りません。
なので文章の一部の文字色を変えたり、線を引いたりするときに便利です。

divとspanと先ほどのclassとidを組み合わせることでCSSで自由なデザインができるようになります。

詳しい使い方はCSSのところでやります。

まとめ

HTMLは学んでみると意外に簡単です。

というのも基本をマスターするだけであればそれほど覚えるものがないからです。

HTMLとは最初に書いたようにHyperText +Markup Languageの略で2つの意味が組み合わさった言葉です。

今記事ではそのうち主にMarkup Languageに関係したタグを簡単に紹介しました。

次の記事でHyperText に関するタグを説明したいと思います。

Sponsored Link

Sponsored Link

関連記事

  1. HTMLとCSS 初歩的な文字装飾 基本まとめ
  2. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. CSS セレクタとプロパティと値の基本まとめ
  5. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  6. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  7. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  8. CSS marginとpadding 余白の指定方法 基礎

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. 【Basics of site construction】ワードプレスで日付を消す方法
  2. Windows10 でフォルダの拡張子を表示するには?
  3. HTMLで動画や画像を埋め込みする方法を詳説
  4. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  5. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  6. サーバって何?どのレンタルサーバーを選べばよいのか?
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. WordPress新エディタ「Gutenberg」の使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク

ソフト・アプリの使い方

PAGE TOP