10月16日 フィヨルドブートキャンプ学習記録

学習内容

  • CSS上級課題 アイコン作成に着手

実施したこと、理解した点

  • 上級課題のアイコン作成について Q&Aで質問をし、アイコン作成についていくつか参考になる資料を提示していただいたので それらを見て実際に、何個か作成を行った。 提示された資料は、プラクティスに課題の参考としてURLが貼ってあったので、質問する前に自分でちゃんと探していれば良かったかなと感じた。

  • overflowプロパティについて アイコンを作成する上で初めて出会ったプロパティだったので、学習。 ボックスの範囲内に内容が納まりきらない場合に、どうするかを指定するプロパティ。 主な値には以下がある。 visible:要素がはみ出す場合、そのままはみ出して表示される。(デフォルトの値) hidden:要素がはみ出す場合、はみ出した部分は削除される。 scroll:要素が範囲内に納まらない場合、納まらない部分ははみ出さない。 要素が納まらない場合は、スクロールバーが表示される。 auto:要素が範囲内に納まらない場合、どう表示するかはユーザーエージェントに依存する。 要素が範囲内に納まらない場合は、スクロールバーが表示される。 ※ユーザーエージェントとは? 利用者があるプロトコルに基づいてデータを利用する場合に使用するソフトウェア、またはハードウェアのこと。

  • z-indexについて 要素の重なりの順序を指定する。 デフォルトは0で、大きい値を設定するほど上に表示される。

分からなかった点、疑問に思った点

  • アイコンを作る上で、擬似要素やpositionなど様々な要素を用いたので、もう一度復習しておく。

自分で描いてみたアイコン

※メールアイコン、ページタイトルアイコンは資料を見ながら、引用文内のアイコンは資料のヒントから自力で作成。 - メールアイコン(2つ) https://codepen.io/ryotori1024/pen/BazKQgN https://codepen.io/ryotori1024/pen/jOrqBbp

所感

アイコンの作成の仕方について、質問して解決できたはいいが、参考となる資料は全てプラクティスにURLが貼ってあったので、質問する前にもう少し自力で探すべきだったかなと反省した。

明日の予定

引き続き、課題を進める。