プログラミング学習【HTML編4】

kazikazi1234

5年 ago

前回は、コメントアウト、linkタグ、id属性、class属性、style属性について解説しました。

今回はHTMLのコメントアウト、linkタグ、id属性,class属性,style属性というものに触れていきます。

前の記事を読んでいない方は以下のリンクからどうぞ。

プログラミング学習【HTMLの講座3】

もくじ
1．見出しh1～h6とは？
2．p、br、preタグを使ってみよう
3．divタグの紹介

見出しh1～h6とは？

h1,h2,h3,h4,h5,h6はそれぞれ見出しという意味があります。
h1が一番大きい見出しで、h6が一番小さい見出しです。
ブラウザ上ではh1を設定しても文字が大きくなるだけにしか見えませんが
検索エンジンなどはこのh1に記載されている見出しを最も重要視していますので
SEOとしては大きな意味があります。

ここではh1タグを使って「はじめてのHTML」と記載してみます。

■index.html
----------------------------------------------------------------
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>はじめてのHTML</title>
 <meta name="description" content="はじめてのHTML,プログラム,学習,HTML">
 <meta name="shortcut icon" content="favicon.ico">
 <link rel="stylesheet" href="test_style.css">
</head>
<body>
 <h1>はじめてのHTML</h1>
</body>
</html>
----------------------------------------------------------------

背景が怖いままなのでbackgroudの指定をredから「#99FFFF」に変えます。
HTMLでは色の指定は英単語でもできますが、RRGGBBという表記で設定もできます。
この記事では詳しい解説はしませんが、RRGGBBでの指定の方がより細かい設定が
できるという認識で問題ありません。

■test_style.css
----------------------------------------------------------------

body{background:#99FFFF;}

----------------------------------------------------------------

p、br、preタグを使ってみよう

「p」タグはParagraph(段落)の略です。
ブログなどで記事を記載する場合はもっとも良く使うタグです。

以下のように使ってみます。

■index.html
----------------------------------------------------------------
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>はじめてのHTML</title>
 <meta name="description" content="はじめてのHTML,プログラム,学習,HTML">
 <meta name="shortcut icon" content="favicon.ico">
 <link rel="stylesheet" href="test_style.css">
</head>
<body>
 <h1>はじめてのHTML</h1>
 <p>
   HTMLの学習はパソコン1台あればできます。
   後は実際にテキストエディタにHTMLを書きながら学習していきましょう。
   継続は力です。
 </p>
</body>
</html>
----------------------------------------------------------------

捕捉説明ですが、HTMLのコードでは改行を認識しませんので実際にブラウザで
表示すると上記のように改行が反映されておらず1行で表示されます。
また、改行を認識していませんので、上記<p>から</p>までは1行のコードとして認識されます。
それでもあえて改行を使って記載したのは、この方がソースコードが見やすいためです。
プログラミングをする上で「見やすい」というのはとても重要な事ですので
見やすいソースコードを意識してかくようにしましょう。

次に「改行して表示させたい」場合があるかと思いますがその際はbrを使います。
以下のように使ってみます。

■index.html
----------------------------------------------------------------
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>はじめてのHTML</title>
 <meta name="description" content="はじめてのHTML,プログラム,学習,HTML">
 <meta name="shortcut icon" content="favicon.ico">
 <link rel="stylesheet" href="test_style.css">
</head>
<body>
 <h1>はじめてのHTML</h1>
 <p>
   HTMLの学習はパソコン1台あればできます。<br>
   後は実際にテキストエディタにHTMLを書きながら学習していきましょう。<br>
   継続は力です。
 </p>
</body>
</html>
----------------------------------------------------------------

brタグはBreak(改行)の略です。
pタグのようにスラッシュをつけた閉じタグがいりません。

続いてpreタグです、preはPreformatted Text(整形済みテキスト)の略です。
HTMLでは改行は無視される、と言いましたがpreタグで囲むと書いた文字がそのまま
表示されます、半角スペースや改行などもそのまま表示されます。
ソースコードなどを表示したい時に使います。

以下に具体例を記載します。

■index.html
----------------------------------------------------------------
<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>はじめてのHTML</title>
 <meta name="description" content="はじめてのHTML,プログラム,学習,HTML">
 <meta name="shortcut icon" content="favicon.ico">
 <link rel="stylesheet" href="test_style.css">
</head>
<body>
 <h1>はじめてのHTML</h1>
 <p>
   HTMLの学習はパソコン1台あればできます。<br>
   後は実際にテキストエディタにHTMLを書きながら学習していきましょう。<br>
   継続は力です。
 </p>
<pre>
 ここのテキストはそのまま表示されます。
 <pre>タグの効果です。
</pre>
</body>
</html>
----------------------------------------------------------------

divタグの紹介

続いてdivタグです。
divタグを一言で言うのであれば「囲んだ要素をグルーピングするタグ」です。
グルーピングするだけなので、単独では何の効果もありません。
こう書くとあまり使わないタグに聞こえるかもしれませんが、実際はWEBのデザインを
決める上では最重要と言ってもいいタグです。
むしろ、divタグがないと現代のWEBデザインは成り立たないと言っても過言ではありません。

divタグの重要性はCSSを学習し始めると分かってきますので、今回は説明しません。
WEBデザインでは重要な囲んだ要素をグルーピングするタグとして頭に置いておいてもらえればと思います。

続きは別の記事で記載します、以下のリンクをクリックしてください。

【HTMLの講座5回目】

以上となります。
少しでもお力になれれば幸いです。
ありがとうございました。