「HTML＆CSS学習コース 初級編」から３週間くらい経ちましたが、ようやく中級編も終わりました。
このページではプログラミング学習サービス「Progate」の「HTML & CSS 中級編」を勉強してみて、学んだこと気づきいたことについてメモしておきます。
中級編で学習すること
中級では、立体的なボタンを作ったり、文字の透明度や太さを変えたり、ヘッダーを固定したりと、初級よりも高度なデザインテクニックを学習します。
終わった直後の感想としては、「今後、こんなの一人で作れるのかなぁ」というのが今の気持ちです。
文字の装飾・位置の設定
文字の透明度の設定
opacity
rgba
rgbaは指定したものだけが透明になる。
文字の太さの設定
font-weight:normal
font-weight:bold
文字間隔の設定
letter-spacing
文字の位置設定
text-align:left
text-align:right
text-align:center
行間の設定
line-height
ボタンの装飾・操作
ボタンの角を丸める
border-radius
立体的なボタンを作る（影をつける）
box-shadow
ボタンをクリックした時に処理を加える
div:active{ }
背景画像の設定
CSSで背景画像を設定する
background-image: url(画像のURL);
画像が小さい場合に、同じ画像が繰り返されるのを防ぐ
background-size: cover;
ブロック要素 / インライン要素 / インラインブロック要素
<a>はインライン要素なので、widthやheightの設定ができない。設定したい場合は「ブロック要素」や「インライン要素」に変更する。
インラインブロック要素の設定方法
display:inline-block
インラインブロック要素にすると複数要素あった場合、横並びになる。
ブロック要素の設定方法
display:block
ブロック要素にすると複数要素があった場合、縦並びになる。
他にもありますが、一旦ここまでにしときます。
難しかったところ
中級になると、classの設定がたくさん出てくるのでかなり複雑になっていきます。
Progateの演習ではどこに何を書けば良いのか親切に書かれているので、その指示通りにすればいいのですが、「この設定をしたら、どこかどう変わるのか」きちんと流れを追って演習に取り組まないと、中級が終わっても全然わからない状態になってしまいます。
ボタンを押した時の処理や要素の重なりを防ぐz-indexの指定など、後半はかなりややこしく、僕自身きちんと理解せずまま進めてしまったところもあるので、もう２～３回繰り返し復習して、チャレンジ問題に挑戦したいです。
