見出し画像

デイトラ Web制作コース 初級編 DAY2 HTMLの基礎について

MIO

ご覧いただき、ありがとうございます！

DAY2では、HTMLの基礎について学びました。
本格的にコードを書いていきます！


HTMLとは

HTMLとは、簡単にいうとWebページを制作するための言語です。
テキストや画像、リンクなどをWebページに表示させるために使います。

HTMLを書くときは、カギ括弧で囲まれたタグとコンテンツいうものを使用してコードを書いていきます。

<p>Hello Would</p>

<p>の開始タグと、</p>の終了タグが必要で、間に挟まれているHello Wouldをコンテンツと呼びます。
タグには他にも種類があり、コンテンツに自分が表示させたいテキストやら画像やらを書き込みます。

ちなみにコードを書くことをコーディング呼びます。

DAY2の最後には、とりあえずテキストや画像、箇条書きのテキストなどを表示させることができるようになりました。

環境設定

HTMLを書いて表示させるには、まず環境を整える必要があります。
デイトラでは言語を書くためのエディタとして「VSCode」を使い、「Google Chrome」で表示して確認しています。

エディタ「VSCode」

エディタの種類は本当にたくさんあります。

9年前にJavaを勉強した（挫折した）際はTeraPadというシンプルなエディタを使用していました。
でも今はVSCodeを使っています。おすすめです。
Visual Studio Code（VS Code）は本当に機能性が優れていて、初心者にも優しいです。

  1. 好きな場所でフォルダを作成

  2. VSCodeを開く

  3. 先ほど作ったフォルダをドロップアンドドロップ

  4. HTMLファイルを作成（index.htmlが一般的）

これでHTMLを書き始めることができます！

「Google Chrome」

デザイン、Web制作をする方には必須のブラウザだと思っています。

私の考える理由は、Google Chromeに搭載されている「検証ツール」が素晴らしすぎるからです。
こちらのブログで使用した時の状況をまた上げたいと思います。

何か制作するときは、index.htmlをGoogle Chromeで開いておくと、確認しながら作業を進められます。

既定ブラウザをChromeに変更しておくと便利です！

HTMLでタグを書いていく

DAY2では「タグ」と「属性」について学びました。

タグの種類は全部で100個くらいあるらしいです👀え？
なので、今回学んだ代表的なタグたちのみ、ご紹介します。

代表的なHTMLのタグ

  • hタグ：見出しにしたいコンテンツに使用（h1〜h6まであり、よく使うのはh1〜h4）

  • pタグ：段落。普通のテキスト

  • aタグ：リンクをつける時に使用

  • imgタグ：画像を表示（終了タグは不要）

  • ulタグとliタグ：数字なしのリストを表示（まさにこの箇条書きの状態）

  • olタグとliタグ：数字付きのリストを表示

  • コメント：エディタ内だけで見ることができる注釈。メモ

<h1>大見出し</h1>　　※ページのタイトルなどで使用するので、使うのは1回のみ
<h2>中見出し</h2>
<h3>小見出し</h3>

<p>テキスト</p>

<a href="飛ばしたいリンク先のURL">テキスト</a>

<img src="画像のURL">　　※画像に囲むコンテンツはないので、終了タグはいらない！

<ul>
  <li>チョコレート</li>
  <li>ポテトチップス</li>
  <li>ヤンヤンつけボー</li>
</ul>

<ol>
  <li>項目１</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

<!-- これはコメントです。ブラウザには表示されません -->  ※ブロックの区切りを分かりやすくするのにも使用

実際にエディタにコードを書き込むときは、上記のように行います。

グループ化

タグを学んだ後は、「グループ化」について学びました。
HTMLが数百行とかになってしまうと、どこが何の部分だったか分からなくなってしまいます。

ここでもタグが登場です。
<div>タグというタグを使うことによって、グループ化をすることができます。

<div>
  <ol>
    <li>項目１</li>
    <li>項目2</li>
    <li>項目3</li>
  </ol>
</div>

グループ化をして、ブロックに分けて管理するというのが、HTMLの基本的な考え方だと教わりました。
次に学ぶCSSでも<div></div>で囲われた範囲に、まとめて指示を書くことができるので便利です。

タグに属性をつける

このセクションの最後に学んだのが、タグに属性という追加情報を付け加えるやり方です。

<タグ名 属性 = "属性値">

ちなみに代表的なタグで勉強した、aタグはhref属性、imgタグはsrc属性を使っています。

  • id属性：要素に「固有名」を付ける

  • class属性：要素に「分類名」を付ける

  • src属性：imgタグとセットで使用。画像の置き場所を示す

  • href属性：aタグとセットで使用。リンクの場所を示す

id属性とclass属性の使い分けが最初は分かりづらかったのですが、どれもよく使うのでコーディングをしていれば自然に覚えると思います。

感想

こうやってブログを書いていると、olタグってあったな…と思い出しました。（復習不足）

今はSTUDIOやWordPressなど、ノーコードツールを使用しても制作をすることができます。
実は2ヶ月ほど前にSTUDIOを使用して、友人のポートフォリオサイトを制作させてもらったことがあります。
HTML/CSSの知識がなくても形にはできました。

ただ私の感想ですが、少しHTMLを学んだだけでもノーコードの理解が深まる。

Web制作コースの最後にSTUDIO制作のセクションあったので、初級編が終わったらそれだけ先に受講しようか迷っています。

逆にノーコードで何か制作してみると、コーディングするときに完成のイメージがしやすくなると感じました。

せっかくなので、その時のポートフォリオサイトを載せておきます。
ブレイクポイントのレスポンシブ対応が甘い…

最後までご覧いただき、誠にありがとうございました🌸


この記事が気に入ったらサポートをしてみませんか？