「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。
-
-
【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。
[toc]
<img（イメージ）>タグで画像を表示する
<img>タグを使えば、
画像を挿入することができます。
文章の中に画像があると、
より伝わりやすい表現ができたり、
Webサイトの見栄えが良くなります。
画像は自分で用意したものを使います。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<img src="フォルダ名/画像のファイル名">
</body>
</html>
11行目が<img>タグです。
終了タグはなく、
「src=""」の部分で画像を指定します。
画像の指定方法等、
以下、『TechAcademyマガジン』というサイトでも分かりやすく解説してくれてます。
分からない方は併せて参考にしてみて下さい。
<br（ビーアール）>タグで改行する
改行したい場合は、
<br>タグを使います。
以下、<br>タグを使わなかった場合、
使った場合を比較して見てみましょう。
<br>タグを使わなかった場合
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<p>プログラミング学習のツボ。それは楽しむことだ。</p>
</body>
</html>
11行目です。
ブラウザ表示させてみましょう。
横に繋がって表示されていますね。
<br>タグを使った場合
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<p>プログラミング学習のツボ。<br>それは楽しむことだ。</p>
</body>
</html>
11行目をご確認下さい。
<br>タグを使っています。
実際にブラウザで表示させてみると、
どうなるでしょうか？
改行が入りました。
こちらの方が読みやすい印象ですね。
<br>タグは、終了タグ不要で、
改行したい場所に書き込んで使います。
<p>や<h>タグで区切れば、
改行されたように表示することは出来ますが、
一つの文章内で改行させたい場合は、
<br>タグを使いましょう！
強調したい部分は、<strong（ストロング）>タグで囲もう
文章を書いていて、
「ここは強調して伝えたい！」
という時がありますよね。
そんな時は<strong>タグを使います。
書き方を見てみましょう
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<p>プログラミング学習のツボ。それは<strong>
楽しむ</strong>
ことだ。</p>
</body>
</html>
11行目で<strong>タグを使い、
「楽しむ」を強調しています。
ブラウザで表示してみましょう。
「楽しむ」の部分が、
少し太字になり、強調されていますね。
重要な部分は、
<strong>タグで強調しましょう。
<hr（エイチアール）>タグで区切り（水平線）を表現する
話題の区切りを表現したい場合は、
<hr>タグを使います。
早速、実際の書き方を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<p>プログラミング学習のツボ。<hr>それは楽しむ
ことだ。</p>
</body>
</html>
11行目で<hr>タグを使っています。
実際にブラウザ表示させてみましょう。
<hr>タグを書き込んだ場所に水平線が引かれ、
文章が区切られました。
<hr>タグは終了タグ無しで使う点にもご注意下さい。
区切りを入れたい場合は、
<hr>タグを使いましょう。
引用文は<blockquote（ブロッククオート）> タグで囲もう
何かを引用した文章は、
<blockquote>タグで囲みましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<p>以下が引用文です。</p>
<blockquote cite ="https://○○">
<p>ここが引用・転載文です。</p></blockquote>
</body>
</html>
12行目で<blockquote>タグを使っています。
「cite =""」の部分に、どこからの出典か分かるように、
引用元のURLを入力します。
<blockquote>タグを使うことで、
少し字下げと行間隔が広がっています。
ブラウザに、
ここは引用文ですよと伝えている役割を持ちますので、
SEO上の観点からも、
引用文にはしっかりと<blockquote>タグを使いましょう。
また、引用する際は、
出典元を明記するというルールがあります。
他の人が作ったものを、
勝手に流用したコンテンツにならないように十分注意しましょう。
ブラウザに表示されない備忘コメントは<!-- -->タグを使う
ブラウザ上では表示されず、
作業する際のコード上だけで見えるコメントを入れたい場合は、
<!-- -->タグを使いましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<!--以下、コンテンツの文章を書き込む-->
<p>プログラミング学習のツボ。それは楽しむ
ことだ。</p>
</body>
</html>
11行目でコメントタグである<!-- -->を使っています。
テキストエディタのコード上では表示されていますが、
以下の通り、ブラウザ表示してみると、
コメントタグ部分は表示されていません。
丁寧に備忘コメントを入れておくと、
後で修正する場合や、
コードを書いていない人が触る場合に、
非常に助かります。
書き方に違いはありますが、
他のプログラミング言語にも、
同様のコメント表現があります。
プログラミングする際は、
積極的にコメントを活用していきましょう！
まとめ
・<img>タグで画像を表示する
・<br>タグを使えば、改行出来る
・<strong>タグで文を強調出来る
・<hr>タグで話題の区切りを表現しよう
・引用文は、<blockquote>タグで挟む
・備忘コメントは、<!-- -->タグを使う
色々な『HTML』のタグを知っていれば、
それだけ色々な表現が出来ます。
全てを丸暗記する必要はありません。
こんな時は何か使えるタグがあったぞと、
頭に少し浮かぶ感じで大丈夫です。
焦らず、一つ一つ進めて行きましょう。
皆さんの『HTML』学習、
応援しています！