Progate(プロゲート):学習記録「HTML&CSS学習コース 中級編」

「HTML&CSS学習コース 初級編」から3週間くらい経ちましたが、ようやく中級編も終わりました。

このページではプログラミング学習サービス「Progate」の「HTML & CSS 中級編」を勉強してみて、学んだこと気づきいたことについてメモしておきます。

中級編で学習すること

中級では、立体的なボタンを作ったり、文字の透明度や太さを変えたり、ヘッダーを固定したりと、初級よりも高度なデザインテクニックを学習します。

終わった直後の感想としては、「今後、こんなの一人で作れるのかなぁ」というのが今の気持ちです。

文字の装飾・位置の設定

文字の透明度の設定
opacity
rgba

opacityとrgbaの違い
opacityは文字・背景全てが透明になる。
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の指定など、後半はかなりややこしく、僕自身きちんと理解せずまま進めてしまったところもあるので、もう2~3回繰り返し復習して、チャレンジ問題に挑戦したいです。

スポンサーリンク
コメントを残す

CAPTCHA