IT~情報と技術

ドットインストールでHTML基礎文法入門とCSS基礎文法入門②【初心者向け】

「ドットインストール」というオンライン講座でプログラミングの勉強を始めました。

ここではHTML基礎文法入門(全30回)とCSS基礎文法入門(全37回)を紹介します。

前回はHTML基礎文法入門で、今回はCSS基礎文法入門についてです。

ドットインストールでHTMLとCSSの勉強

ドットインストールにある、HTML基礎文法入門(全30回)と、CSS基礎文法入門(全37回)を使って勉強した内容を紹介します。

前回のドットインストールでHTML基礎文法入門とCSS基礎文法入門①【初心者向け】では、HTML基礎文法入門を紹介しました。

今回はその続きで、CSS基礎文法入門の紹介です。

回数は両方やると全67回と多いように思いますが、1回あたり約3分なので全部見ても200分くらいです。

2時間の授業を2コマ受けるくらいのもんです。これで、HTMLとCSSの基礎文法を一通り体験できるのです!ということで頑張りましょう。

2つの講座今回はこの2講座が対象です。

さて、あいかわらず講師の田口先生の進行スピードが速くて面食らいます。一時停止を駆使して、がんばってついていきましょう。

CSS基礎文法入門(全37回)

ではCSS基礎文法入門です。回数が多いので2回に分けての紹介します。

気になったところやメモとして残しておきたいところ

講義は、毎回テーマとなる文法事項があってそれが回ごとに違うので、それぞれが独立している感じです。前後の関連はあまりありません。

CSSの文法

「#02 CSSの文法に慣れよう」で出てくるCSSの文法です。セレクターでどこを、宣言でどのようにしたいかを指定します。

CSSの文法HTMLのh1要素を、赤色にします。
line-hight

「#09 line-heightで行の高さを調整しよう」で出てくるline-hightのしくみです。文字の大きさはfont-sizeで指定しますが、その上下に余白が設されます。

line hightフォントサイズ16ピクセルの上下に8ピクセルの余白があります。
vertical-align

「#10 vertical-alignで位置を調整しよう」で出てくるvertical-alignのしくみです。vertical=縦方向、align=位置調整ですね。

vertical alignvertical alignを使って日の丸の上下位置を調整します。
色の指定

「#11 色の表現方法を覚えよう」で出てくる、各種の色の指定方法です。色の表現はなかなか奥が深そうです。

red, blue, pinkといった色の名前をキーワードで指定する方法です。直観的でわかりやすいです。

色の表現red, blue, pinkで色を直接指定する。

RGB(R:Red 赤 G:Green 緑 B:Blue 青)の割合で指定する方法です。

RGBで色を指定RGBで色の表現を指定する。R=赤、G=緑、B=青です。

混ぜるRGBの量は16進数で表します。

この16進数がむつかしいかもしれません。10進数は9の次に10で桁が上がりますが、16進数では15に相当する”F”の次で桁が上がって16進数の”10”になります・・・・???

文章よりも動画で解説を見るのが分かりやすいかな。1つ探してみました。

HSL(H:Hue 色相 S:Saturation 彩度 L:Lightness輝度)で指定する方法です。色相は0~360で指定します。

HSLによる色指定HSLで色を指定する。H=Hue(色相)、S=Saturation(彩度)、L=Lightness(輝度)です。

最後に透明度を指定する方法です。英語でopacityといいます。

opacity透明度(opacity)の指定
idとclass属性を使う

「#14 セレクターの基本をおさえよう」でidとclass属性を使う例が出てきます。HTML側でidまたはclassを設定して、CSS側でこのidまたはclassを指定してスタイリングします。

HTML内でidが重複してはいけないのですが、classにはその制限がありません。なので、共通のスタイル設定を行いたい場合はclassを使います。

  • HTMLで id=”open”を付けて、CSSで #openとして指定する。

HTML
<button id=”open”>Open</button>

CSS
#open {font-weight: bold;}

  • HTMLで class=”title” を付けて、CSSで .titleとして指定する。

HTML
<h2 class=”title”>CSSの練習</h2>
<h3 class=”title”>CSSの練習</h3>

CSS
.title {text-align: right;}

ひとこと

内容が多岐にわたっていてイマイチまとまりが無い印象ですが、一通り浅く広くCSSの勉強をすることができます。

まずははじめてみて、手を動かしてやってみましょう!

内容が難しくて意味が分からなかったら、とりあえずまねして進めて、後で意味を調べましょう。

次回はCSS基礎文法入門の後半です。