HTML & CSS 初級編 見出しと段落・リンク を深掘り 勝手に解説

どーも。さいんです。

勝手に解説シリーズ、みなさんからの多くの感想ありがとうございました！まだまだ分かりにくい場所もあるとは思いますが、ぜひ楽しんでプログラミングを学んで行ってくださいね

多くの人が独学でのプログラミングの習得に挑戦して、途中でやめてしまうと聞いています。

原因としては、やはり一人で進めていくと教材に頼りっぱなしになってしまい受け身になりがちです。
学んでいることが果たして役に立つのかどうかが分からないまま、学習を進めていき成長している実感がないまま飽きてしまうということが多いです。

勝手に解説シリーズとは

独学でプログラミングを勉強している人の多くが利用しているProgateやドットインストールについて勝手に深掘りしちゃおうという企画です

実際にWebエンジニアとして業務を行い、比較的年収も多めにもらっている私が、実際にProgateやドットインストールを試してみて、

• ここはちゃんと深掘りした方があとで役立つのになー
• ここってそんなにサラッとでいいんだ！？
• あれ？これって今じゃそんなに使わないよね

と思うことが多々あったので、それを実際に勝手に解説しているシリーズになります。

HTML & CSS 初級編

それでは、すでにプログラミングの学習を始めているからも、これからの方もProgateのHTML & CSS 初級編を開いて、この記事を横目に勉強していきましょう！

まずみなさんがプログラムを勉強するときに、出会うであろう講座がこの

HTML & CSS 初級編

まずはこの講座を図を用いて解説して、みなさんの反応をいただけたらなと思っています！

今回は第2段のコンテンツとなります。

初めてプログラミングを勉強される方やシリーズを見る方はぜひ第1段からご覧ください。

[card2 id=”173″]

もし、よかった！やこの図がわかりにくいっていうのがあれば、Twitter(@1000sideincome)にどしどしご意見ください。

2. 見出しと段落

いよいよホームページの作成の2つ目のステップに進んだ、みなさんですが次に学ぶのは

<h1></h1>

といった見出しタグや段落となります。

これって文字のサイズ変わるだけよね？と思いがちですが、
実は超大切です！

どう大切かというと、これは本の見出しの役割をもつタグだからです。

みなさんは、ブログやホームページにどうやってアクセスしますか？

TwitterなどのSNS経由もありますが、調べ物などの多くの場合Googleを利用するのではないでしょうか？

このGoogleも<h1>タグなどをチェックして、Googleの検索結果に載せます。

綺麗な本はどうなっていますか？

いかがでしょうか？見出しの順番が綺麗になっていたり、数のバランスが整っていると一覧にしたときもとても綺麗に感じますよね？

Googleはコンテンツがちゃんとまとまっているか、整理されて読みやすいものかということもチェックするようにかしこくなっています。

以前はh1タグはページに1回までや、h1タグに重要なキーワードを詰め込めなどいろんなノウハウがありましたが、今ではそこまで重要視されていないようです。

しかし、hタグをみやすく配備することはユーザにとって読みやすいコンテンツになることは間違いありません。

ユーザが読みやすいコンテンツはGoogleの検索結果に評価されることになります。

そのため、hタグがただ文字のサイズを大きくするだけではなくGoogleにとっても重要なタグということは覚えておきましょう。

3. リンク

リンクです。リンクはサンプルではProgateやGoogleのURLになっていましたが、

今開いているページから移動する場合は基本的に全てリンクとなります。

将来的に<a>以外の方法でページを移動する手段を知るかもしれませんが、ほとんどの場合<a>を使用してページから移動することになります。

いろんなページをみて回るときに、ページを移動したな！っと思ったらそれは<a>タグをクリックしていると思ってもらえるとOKです。

リンクといってもいろんなリンクがあることをさらっと触れておきます。

同じ<a>タグでも属性やリンクの貼り方で、リンクの動きを変えることができます。

同じウィンドウで別のページにリンク

1つ目の同じウィンドウで違うページにリンクは、通常のページやブログで記事を見たり、トップページに戻ったりするときに使ってますよね？

同じブログやサイト内でのリンクでは効果的に使えるのがこの同じウィンドウで別のページにリンクになります

別のウィンドウで別のページにリンク

先ほどの同じウィンドウで別のページにリンクの場合、今まで見ていたページが別のページに切り替わってしまいます。

もし自分のブログから、別の人のブログにリンクを貼る場合、まだ自分のブログを残してもらいながら、別の人のブログの記事も紹介したい！なんてこともありますよね？そのときに別のウィンドウやタブでリンクを開くこともできます。

リンクを貼るときはこっちの方がいい！と思う方もいらっしゃるかもしれませんが、このリンクの貼り方にはセキュリティやパフォーマンスの点で問題視されることもあり（解決方法もあります）、安易に多用するのは注意です。

同じページの別の場所にリンク

今まで紹介したものはあくまで別のサイト、ページにリンクしていましたが、実は同じページ内にリンクを貼ることも可能です。

コンテンツの量が多い場合は、ページの上部に目次があり、そこをクリックするとページの下の方のコンテンツに飛ぶリンクです。

Noteでも目次があり、それをクリックすると見たいコンテンツまで飛べるのは<a>タグを使用しているからなんです。

<a>タグといっても様々なリンクを貼ることができ、そのリンクの貼り方もいろいろあることをご紹介しました。

上の3つの動作は、具体的な例は宿題として、今後ブログ内や、Noteのサークルなどで答え合わせなんかできたらいいなと思っています。

まとめ

今回は第二回としてProgateのHTML & CSS 初級編のHTMLに触れてみよう！の見出しと段落とリンクの二つの項目を一気に深掘りしてみました。

特にリンクのタグはWebエンジニアとしても長い付き合いになるので、しっかりとタグだけでなくリンクの種類も頭に入れておきましょう。

まだプログラミングの学習の本当に第一歩ですが、今学んでいることも業務としてバリバリ使い続ける項目がほとんどなので、しっかりと基礎を固めてくださいね。