【実践編＃２】模写コーディングでサイトをつくってみた(float,overflow)

成果品

HTMLとCSSを使い、サイトの模写コーディングを行いました。

時間は、５時間かかりました。

文章のコピーは、模写サイトでcommang+Aで全選択して、command+cでVSCode（テキストエディタ）へ貼り付けます。

画像は、Chromeの拡張機能「Image Downloader」を使用しました。

サイト全体のスクショは「Full Page Screen Capture」を使用しました。

模写サイトを参考に、HTMLでマークアップをします。

タグの意味を考えながら囲います。また、CSSでのスタイリングを考慮してクラス名などもつけていきます。

模写サイトを参考に、CSSでスタリングしていきます。

クラス属性やfloatプロパティを使って、位置などを決めていきます。

色に迷ったら、Chromeの拡張機能である「colorzilla」を使います。

更新情報（日付＋内容）は、dlタグ,dtタグ,ddタグでマークアップする。

著作権情報は、smallタグでマークアップする。

max-withで最大幅が決められる。

overflow: hiddenで要素が余計な隙間に入らなくできる。(floatした要素に高さを持たせることができる）
※本来は、ボックス外の領域を非表示するものです。仕組みの応用なのかな？

overflow-y:scrollで縦スクロールのスタイリングができる。

float: leftで要素を左配置にできる。

実際に作成することで、基礎の定着率が上がりました。

実際に何かつくるとテンションあがるので、おすすめです。

参考にした動画