【プログラミング学習】HTMLに触れてみよう!をやってみた【Progate】




eyecatch-lessons-html-study-1 プログラミング
スポンサーリンク

いじゅ~もり(@ijumori)です。

 

Progateにてプログラミング学習を始めます。

Progateでプログラミングを学びます。まずはHTML&CSSから
...

 

今回は、「HTML&CSS」の初級編のうち、「1章:HTMLに触れてみよう!」をやってみます。

この初級編は全7章にわたって学習をすることができます。

lessons-html-study-1

 

このコースの最終目標は「お問い合わせフォームを作ろう!」とありますので、ただ知識を学習するのではなく、形になるものをつくることを目的に学習をすすめることができるので、途中で挫折することなく進められそうです。

ではさっそく始めていきたいと思います。

 

Progateの学習の進め方

Progateの学習方法はスライド形式となっています。

はじめは知識の部分。

これはこういうことですよという説明があり、それを踏まえた上で演習へ進むという流れになっています。

演習画面はこんな感じです。

lessons-html-study-1-exercises

 

左に課題があり、真ん中にコードを記述するところがあり、右上にはコードで書いたものがすぐさまプレビューされ、右下の見本と同じになったら正解となります。

lessons-html-study-1-exercises-1

 

「確認して次へ」をクリックすると正解不正解が判定されるという仕組みです。

正解すると経験値がたまり、レベルが上がっていきます。

レベルが上がると、ツイッターでみんなへ自慢しませんかみたいなことを言われるので自慢してみました。

 

こんな感じで学習を進めます。

もしも課題がわからなかった場合でもヒントが見れますし、スライドへ戻ることも可能です。

また、プログラミング学習初心者の大きな壁である環境構築というところがなく、すぐにコードが書ける点がすばらしいと個人的には思います。

 

わかったこと

この章でわかったことを列挙します。

  • Webページは「HTML」と「CSS」を組み合わせてつくられている
  • HTMLではテキストにタグをつける
  • テキストをタグで囲むことでそのテキストに意味をもたせる
  • テキストをタグで囲むときは開始タグと終了タグで挟む
  • 終了タグには「/」が必要
  • 見出しの要素には<h1><h2><h3><h4><h5><6>があり、<h1>タグが一番大きな見出しで<h6>タグがいちばん小さな見出し
  • 段落の要素は<p>タグ
  • コメントがある
  • <!– コメント –>と書くと書かれたコメントは表示されないのでメモ代わりになる
  • リンクの要素は<a>タグ
  • <a>要素にリンク先を指定するときは、href属性を追加する
  • <a href=”url”>というように
  • 画像の表示は<img>要素を使う
  • <img src=”url”>というように
  • <img>要素は終了タグは不要
  • リストをつくるには<li>要素を使う
  • <li>要素を<ul>要素で囲むと先頭に黒丸がつく
  • <li>要素を<ol>要素で囲むと数字が連番でつく
  • 要素を要素で囲むことを入れ子という
  • 囲むほうを親要素、囲まれるほうを子要素という
  • 入れ子構造の要素がある場合はインデント(字下げ)をするとよい
  • インデントをすると複雑になっても親子関係がわかりやすい

詳しくは次の記事で解説しています。

【HTML&CSS】HTMLにおけるタグ、リンクの指定、画像の表示、リスト表示のやり方
...

 

演習課題でやったこと

課題でやったことを列挙します。

  • 「Hello World」を<h1>タグで囲んだ
  • 「Progateとは」を<h2>タグで囲んだ
  • 「オンラインの~~~」を<p>タグで囲んだ
  • <a>要素を用いて指定のリンクを作成し、指定のテキストを表示した
  • src属性の中身を指定して、指定の画像を表示した
  • リストを作成した

 

わからなかったこと

特になし

 

その他・感想

楽しい!

 

最後に

Progate楽しく勉強できました。

まだまだ序盤の序盤なのでつまづくところもなく、スイスイと進められています。

いまはまだ学習段階ですので、今回の記事の内容はやったことの羅列に過ぎませんが、今後は学んだことついて解説等も加えて行く予定です。

ともあれ、楽しいです。

 

最後まで読んでくれてありがとうございました。

いじゅ~もり(@ijumori)でした。