はじめに

　2019年８月末からHTML・CSSの勉強を開始し、１ヶ月半ほど経った10月半ば、自分でコードを書いてみました。

〜完成したページ〜

今回の練習で難しかったところを備忘として記録していきます。
（数回に分けてアップする予定です。）

＊全体で７時間ほどかかっており、全部難しかったのですが、特に時間がかかった箇所を記載します。
＊なんとか解消したものの、未だ根本的な解決方法が不明なものについても記録します。こちらについては解決方法が分かったらアップデートしたいと思います。

（CSS)画像の下部を曲線にする方法

（方法）
1.border-bottom-left/right-radiusを使う
　画像の左下・右下にborder-bottom-left/right-radiusを設定する。テキスト等で学習する場合、通常５pxくらいの小さな半径を設定するが、ここでは2000pxという巨大な半円を設定し、下線全体が弧を描くようにした。

2.marginを使用し、端の部分を綺麗にする
　border-bottom-left/right-radiusだけだと、端の部分が変にまるまってしまう。

この部分を綺麗にするため、margin-left/rightを使用し左右両端を画面上から見えないように設定。(設定する値をマイナスにする事で画面上から削る）

３.paddingを使用し、削りたくない上部を調整
marginを設定する事で下部は綺麗になるが、上部のページ名称の部分も両端が見えなくなってしまう。

これを防ぐため、marginで削った分をpaddingで無理やり戻す。

（実際のコード）
実際に完成したコードがこちら。