paizaラーニング『HTML/CSS入門編2: CSSの基礎を学ぼう (全6回) 』を受講してみた

HTMLの次は、CSS

ってことで、レッスン2の『HTML/CSS入門編2: CSSの基礎を学ぼう (全6回) 』を受講

https://paiza.jp/works/html/primer/beginner-html2

なんかやっぱりレッスン1とレッスン2で声が違うな？

同じ声優さんだけど、喋り方が変わっただけなのか？

01:CSSの基本形を理解しよう

• CSSの書式

body { 　padding-top: 50px; 　background-color: lightgray; }

02:CSSの色指定を理解しよう

• 背景色

background-color: white;

• 文字色

color: white;

• 色の表現方法：色の組み合わせ

色	赤	緑	青
黒	×	×	×
赤	◯	×	×
緑	×	◯	×
青	×	×	◯
黄	◯	◯	×
紫	◯	×	◯
水色	×	◯	◯
白	◯	◯	◯

• カラー参照

http://paiza-webapp.s3.amazonaws.com/files/learning/color-slider.html

http://www.htmq.com/color/colorname.shtml

http://www.htmq.com/color/websafe216.shtml

03:CSSのフォント指定を理解しよう

• 文字の太さ

font-weight: bold;

• 文字のサイズ

font-size: 120%;

• 文字の種類
  • serif：明朝体など文字の端にヒゲがある文字
  • suns serif：ゴシック体など

04:CSSのレイアウト指定を理解しよう

• 要素の枠線を表示

border: dotted #008080;

• 要素の内側の余白

padding: 30px;

• 要素の内側の余白

margin: 30px;

05:レスポンシブデザインにしよう

• レスポンシブデザイン：
  • スマホやタブレット・PCなどサイズが異なるディスプレイでも、単一のHTMLファイルで、最適なデザインで表示する技術。
• Bootstrapのコンテナの基本形

＜div class="container"＞         ＜div class="starter-template"＞ 　　　＜h1>＜/h1＞         ＜div class="starter-template"＞     ＜div class="container"＞

06:Bootstrapのグリッドシステムを理解しよう

• Bootstrapのグリッドの基本形
  • 12グリッドある

＜div class="container"＞ 　　＜div class="row"＞ 　　　＜div class="col-sm-12"＞ 　　　　＜h1＞1行目</h1＞ 　　　＜/div＞ 　　＜/div＞ 　　＜div class="row"＞ 　　　＜div class="col-sm-4"＞ 　　　　＜h2＞2行目のA</h2＞ 　　　＜/div＞ 　　　＜div class="col-sm-4"＞ 　　　　＜h2>2行目のB</h2＞ 　　　＜/div＞ 　　　＜div class="col-sm-4"＞ 　　　　＜h2＞2行目のC</h2＞ 　　　＜/div＞ 　　＜/div＞     ＜/div＞

感想

結局どの言語でもそうだが、1つ1つの機能の記述方法を覚えるのはツラいので、入力補完してくれるツールが必要だな。

Bootstrapを使う場合のそんなツールってあるのかな？

多分、あるんだろうけど。

あと、ブログの中でタグをタグとして記述するには、どうしたらいいのだろうか？

とりあえず半角の角カッコを全角に変換してみたけど。

先頭のインデックスも思うように付けられないし。