自主学習2-4「プロゲートHTML/CSS初級編」

前回「自主学習2-3」までで書籍『JavaScript本格入門』の冒頭部分のまとめを終え、今回からprogate(プロゲート)を使用しての学習に移っていきたいと思います。

プロゲートとは?

プロゲート公式ページ

プロゲートトップページ

プロゲートとは、web上で実際のコードを書きながらプログラミングを体験&学習できる楽しい学習サイトです。無料部分と有料部分に分かれていますが、無料部分では各コースの初級編(コースによっては続きの中級編の途中)まで利用できますので、お試しでも学習体験は十分に可能です。

有料部分では全コース使いたい放題で1か月980円。同じコースを何週してもOK。もちろん1か月で契約終了してもOKです。気合いで全てのコースを終わらせ980円で全知識を得る…ということも可能であります。

参考画像2-4-1

プロゲートのサイト自体がパステル色基調のほんわかした雰囲気で、可愛いキャラクターがたくさん出てきます。主なキャラクターは忍者ワンコ。(かわいいいいい!!!)

学習できる言語や開発ツールも豊富に用意されています。

参考画像2-4-2
ゴミコ
会員登録を済ませ、まずは復習の意味でHTML/CSSの初級編から始めていくよ。

プロゲート「HTML/CSS初級編」について

初級編では実際にwebページを作りながら、HTML/CSSの基礎(タグの記述方法)などを学んでいきます。

HTML初級編で学習できること

プロゲートHTML初級編の学習要項
  • ⟨!DOCTYPE html⟩を用いてのDOCTYPE宣言を行う。「これはHTMLファイルですよ!」と宣言する。
  • ⟨!-- --⟩を用いてコード内にコメントを挿入する。コメントはブラウザには表示されないのでコード内のメモとして利用できる。
  • ⟨h1⟩~⟨h6⟩タグを用いて見出しをつける。
  • ⟨p⟩タグを用いて段落を作成する。
  • ⟨a⟩タグを用いてリンクを作成する。飛び先をhref(エイチレフ)属性で指定する。
  • ⟨img⟩タグを用いて画像を表示させる。src(ソース)属性で値に画像の置き場所(url)を記述する。
  • ⟨li⟩タグを用いて箇条書きのリストを作成する。
  • ⟨div⟩タグを用いてレイアウトを構成(分割)する。
  • ⟨span⟩タグを用いて文中の一部のみにCSSを適用させる。
  • ⟨input⟩タグ(一行入力欄)と⟨textarea⟩タグ(複数行の入力欄)を用いてお問合せフォームを作る。

CSS初級編で学習できること

プロゲートCSS初級編の学習要項
  • ⁄∗ ∗⁄ を用いてコード内にコメントを挿入する。アスタリフトで囲んだ部分がコメントになる。
  • font-sizeプロパティで文字の大きさを変える。サイズはpx単位を用いて指定する。
  • font-familyプロパティで文字の種類を変える。フォント名を指定する。
  • colorプロパティで文字の色を変える。
  • background-colorプロパティで文字の背景色を変える。
  • width、heightプロパティで要素の高さと横幅を変える。
  • floatプロパティで指定した要素を横並びにする。
  • borderプロパティで要素内に枠線を入れる。
  • paddingプロパティで要素の余白を指定する。(borderの内側の余白)
  • marginプロパティで要素の余白を指定する。(borderの外側の余白)

classを用いて要素に名前をつける際の注意点

特定の要素にCSSを適用するために、classを用いて名前をつける。複数のタグで同一のclass名をつけた場合、それら全てに同じCSSが適用される。classにCSSを適用する際に、class名の先頭にドットを記述しなければCSSが適用されない。

プロゲートを使用した感想

HTML/CSSは既に自主学習で進めていたので、プロゲートの初級編はすんなり進めることができました。自主学習では知ることのなかった知識も補完できましたし、使い勝手も良いので楽しく復習できました。

ゴミコ
忍者ワンコが学習を応援してくれるのが、かわいい。
参考画像2-4-3

初級編は無料部分なので、お試しで学習したい方はぜひ挑戦してみてください。

プロゲートで補完した知識

余白の作り方

プロゲートの初級編では自主学習1-1から1-7で学習した内容とほぼ同じでしたが、今回のプロゲートで新しく補完した箇所はCSSのmarginとpaddingでの余白の作り方の部分になります。プロゲートのスライドは貼れませんが、自分なりに理解した余白についての参考画像を貼っておきます。

濃いオレンジ色部分は要素のborderとなる箇所です。

参考画像2-4-4
ゴミコ
余白の作り方ひとつでデザインも色々と作れる…ということを学習しました。

自主学習2-4について、講師の評価

まだ学習が始まったばかりなので何も言うことはありませんが、個々に時間をかけずに全て通しで学習されるとよいでしょう。分からないところはメモをとっておき、分かるまで調べましょう。それでもはっきりしない点は、講師に聞いて知識を確かなものにしていきましょう。

byゴミリョ

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村