はじめてのコーディング② 〜HTML編〜

前回は事前準備として、学習の心構えやインターネットについての知識、HTML/CSSの役割を学んだね!今回は実際にHTMLを書いてみよう★

HTMLの基礎知識

HTMLの基本的な書き方

HTMLは文章や単語を「タグ」で囲むことで、一つ一つの文章や単語に対して意味を与える役割があります。文を囲む最初に来るものを開始タグ、最後に来るものを終了タグと言います。また、タグの中には「属性」と言われる情報が入ることもあります。以下の例はclass属性を持つh1タグの例です。

Image from Gyazo

<用語解説>class

classを使用すると、特定のHTML要素に任意の名前を付けることができます。初めのうちはclassに対してどんな名前をつければ良いかわからないと思いますが、「class名を見ただけでどこの何かだいたいわかる」かつ「ある程度規則性がある」状態であれば良いと思います。

どうしても気になる方は以下の記事を参考にしてください。

コーディング初学者向けにclassの命名規則について考えてみた

HTMLの構造

HTMLは以下のような構造になっています。

headタグはサイトの見た目には現れない情報、bodyタグ内にはサイトに表示される情報が入ります。HTMLは入れ子構造になっており、bodyタグの中にはheaderタグ、mainタグ、footerタグなどが入ります。

Image from Gyazo

タグ名 役割
html HTMLの文書全体を囲む
head Webサイトに表示されない情報を記述する
body Webサイトに表示される情報を記述する
header サイトタイトルやナビゲーションなどが入る
main メインのコンテンツが入る
footer コピーライトなどが入る

<用語解説>親要素・子要素

HTMLは要素同士を入れ子にすることができます。外側を囲んでいる要素を親要素、内側にある要素を子要素・孫要素・子孫要素と言います。

Image from Gyazo

HTMLを書いてみよう

デザインの確認

デザインデータはFigmaというデザインツールで用意しています。以下のリンクから確認できます。

<参考>Figmaの基本操作

Figmamの基本操作について気になる場合は以下のリンクから確認してみてください。必ずしもコーディングに必要な知識ではありませんが、非常に便利なツールです。

【初心者必見!】figmaの導入から基本的な使い方まで徹底解説!

今回使うHTMLタグを確認しよう

今回使用するHTMLタグを一覧にしています。暗記しようとしなくて良いのでざっと確認しておきましょう。実際に書きながら少しずつ覚えていけば大丈夫です!

タグ名 役割
section 章(section)を表します。一つ以上のhタグを含みます。
div 特定の意味を持たないブロックを形成するときに使います。
span 特定の意味を持たないインラインを形成するときに使います。
h1〜h6 見出しを表す。重要度に応じてh1〜h6を使い分けます。
p 段落(paragraph)を表す。本文にあたる文章を囲みます。
ul 箇条書きリスト(unordered list)全体を囲みます。
li 一つひとつのリスト項目(list item)を囲みます。
img 画像を挿入します。src属性に画像ファイルのパスを入力します。
a ハイパーリンクを作るときに使用します。

<参考>よく使うHTMLタグ一覧

以下の記事で、よく使用するタグをチートシートにまとめています。参考に確認してみてください!

【チートシート付き】コーディングで頻出のHTMLタグをまとめました

実際にマークアップしてみよう

それでは、実際に以下の動画を見ながらHTMLを書いていきましょう!

使用する画像はこちらからダウンロードしてください!

以下のテキストをコピーして、VSコードに貼り付けましょう。

 はじめてのコーディング

コーディングを学習して、
オリジナルサイトを作成しよう

はじめに
このサイトは、コーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。

学習の心構え
暗記しようとしない
反復練習する
習得するまでコピペ禁止
1回で理解できなくても気にしない

学習すること
HTML5
CSS3
JavaScript

Webサイトを見る

<用語解説>絶対パスと相対パス

パスとは「該当のファイルまでの通り道」のようなイメージです。指定する方法はいくつかありますが、以下の2つを抑えておけばOKです。

  • 絶対パス:URLを使用してファイルの場所を指定する方法
  • 相対パス:ファイル同士の位置関係でファイルの場所を指定する方法

<参考>パスの指定方法

パスの指定方法については以下の記事で解説しています。パスの概念は非常に重要なので、確認しておきましょう!

【コーディング初学者必見!!】パスの指定方法

マークアップはできましたか??以下の画像のようになっていればOKです。

Image from Gyazo

HTMLの基本は理解できたかな??1回でわかる必要はないので、繰り返しやって理解していこう!!

次回はCSSの基礎知識を学んでいくよ!

はじめてのコーディング③ 〜CSS基礎知識編〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA