8月14日 学習記録

実施内容

• progate

  HTML/CSS 中級編 道場コース

  第1章:中級編を復習しよう

  メッセージ部分を作ろう

本日学習した内容

• 1:メッセージ部分の作成

  要素に影を付けたり、クリックした際に高さを変え、ボタンが押されたように見えるようにする事項を復習しながら行った。

  ↓復習した内容

  ①box-shadow: 水平方向の位置 垂直方向の位置 色;

  要素に影を付ける事ができる。

  ②セレクタ:active

  この設定をすると、要素がクリックされている間のみCSSを適用できる。

  ③none

  プロパティにnoneと設定すると、CSSを打ち消すことができる。

  例えば、ボタンに「box-shadow」で影を付けておき、「セレクタ:active」と、影を打ち消す「box-shadow:none;」と「position:relative;」、「top」を組み合わせることで、「ボタンが押された際に、影を打ち消し、ボタンを影の分だけ高さを下げる」つまり、「ボタンがクリックされた」ように見せることができる。

• 2:作成したソースコード

• 3:サイトのプレビュー

  

今日のエラー

今日は特になし