第2回レッスン「HTML記述方法/CSSの思想/SASS/次回課題」

前回「自主学習1-7」を終え、今回はゴミリョ講師によるプログラミングレッスン2回目の内容をお届けします。

プログラミングレッスン第1回目の添削

ゴミリョ
まずは前回の課題、ホームページの添削から始めましょう。
ゴミコ
お願いします。
作成したホームページの添削内容

HTMLファイルの添削

  • ファイル内の階層構造を分かりやすく可視化するためにインデントは必ず活用しよう。
  • Pタグなどインライン要素の記述は文章の終わりに(改行せずに)終了タグを記述しよう。
  • H1~6タグは文字の大きさを変えるためのタグではないよ。あくまでSEOとしての「見出し」をつけるためのタグだと理解しよう。
  • H1タグ(大見出し)は1ページにつき1つの使用に留めよう。
  • 画像はimgタグやdivタグを使用し、CSSで配置やサイズなどを指定しよう。画像をHタグで囲むことはあまりしないよ。

CSSファイルの添削

リセットCSSの活用
  • H1~6タグを使用するとブラウザで文字の見た目が変わるような仕組みは、あくまでブラウザが勝手に見た目を変換しているにすぎないよ。ブラウザに頼った表示方法ではなく、自分の意図する表示をさせたい場合には、デフォルトで指定されているブラウザ表示をリセットしてから(リセットCSSを読み込んでから)自分のCSSを書き始めよう。例えばラジオボタンやチェックボックスの見た目は、指定がなければブラウザごとにそれぞれのデフォルト値で表示されるよ。
  • リセットCSSはオープンソースで様々な種類が公開されているよ。作成するサイトの構成に合わせて使用しよう。
オープンソースの活用
  • オープンソースは世界中の誰もが閲覧できるコードのことだよ。悪意のあるコードの公開などは基本的にオープンソースではありえない(悪意のあるコードを公開するメリットがない)ので、他者が公開するコードを利用することを恐れる必要はなく、基本安全だと思ってOKだよ。

CSSの思想を知ろう【参考サイト「CodeGrid」】

  • OOCSS(Object Oriented CSS)…オブジェクト指向のCSS。(設計の考え方や概念)
  • BEM(Block・Element・Modifier)…厳格なclass名の命名ルールを用いる設計方法。
  • SMACSS(Scalable and Modular Architecture for CSS)…ルールを5種類に分けて用いる設計手法。
ゴミリョ
これらの設計思想を知ることで、CSSの設計がとてもスムーズになるよ。

SASS(サス)を知ろう

  • サスはツールを使用したコーディング手法のことで、SASS記法とSCSS記法の2種類があるよ。
  • CSSはHTMLのように構造化した記述ができないけれど、サスを用いることでCSSの構造化が可能になるよ。
ゴミリョ
CSSで記述する方法でも問題はないので今後のレッスン内容には含めないけれど、「サスというコーディング手法が存在する」ということは知っておこう。
ゴミコ
思想については参考サイトを少し覗いてみたけど、これは理解するに至るまで結構大変なのでは…。
ゴミコリョ
無理に理解しようとせず、まずは「気軽に参考サイトを読んでみる」程度から始めてみましょう。

ここまでが前回の添削と今後知っておくべき事項についての説明です。次回からはJava scriptの学習に移ります。

プログラミングレッスン第2回目の課題

課題
  • JS(ジャバスクリプト)の書籍『JavaScript本格入門』を読んで文法をマスターしよう。
  • 本を読んだら実際に手を動かしてJSを書いてみよう。
ゴミリョ
もし途中で読むことがつらくなったり、息切れしそうであれば、自分で作ったホームページをJavaScriptで実装してみよう。
本を読むより実体験でJavaScriptをマスターしていく人もたくさんいるよ!

学習のヒント

課題の書籍『JavaScript本格入門』ですが、こちらは電子書籍、紙書籍、どちらもありますので、お好みの媒体で読み進めていきましょう。

学習サイト「プロゲート」について

ゴミコ
個人的な要望なんですけど…
プログラミング学習サイトの「プロゲート」を私も使ってみたいんだよね。
ゴミリョ
実際のプログラミングスクールでは自社以外の学習教材を使用してのレッスンはNGなんだけど、ゴミコさんはスクールの生徒さんではないから、全然いいですよ。
プロゲート使ってみましょう。
ゴミコ
プロゲートのキャラクター、忍者ワンコがめちゃくちゃ可愛くて気になってたんだよね。ワンコ見るためにプロゲートがんばろう。

以上がレッスン2回目の内容になります。次回からはまた自主学習の結果を書いていこうと思います。
ここまで読んでくださりありがとうございました。

次回の記事

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