成果品
HTMLとCSSを使い、サイトの模写コーディングを行いました。
時間は、5時間かかりました。
![](https://tumaboki.com/wp-content/uploads/2020/11/screencapture-file-Users-inamurakakeru-Desktop-index-html-2020-11-08-23_02_16-1024x880.png)
作成の流れ
模写サイトの文章、画像のコピー、サイト全体のスクショを撮る。
文章のコピーは、模写サイトでcommang+Aで全選択して、command+cでVSCode(テキストエディタ )へ貼り付けます。
画像は、Chromeの拡張機能「Image Downloader」を使用しました。
![](https://tumaboki.com/wp-content/uploads/2020/11/24adc2b8da36d2a97792c0b4200c79e5-1024x566.jpg)
サイト全体のスクショは「Full Page Screen Capture」を使用しました。
![](https://tumaboki.com/wp-content/uploads/2020/11/3bc3cf5c513057508462d573f1f4f3a4-1024x540.png)
HTMLファイルの作成
模写サイトを参考に、HTMLでマークアップをします。
タグの意味を考えながら囲います。また、CSSでのスタイリングを考慮してクラス名などもつけていきます。
CSSファイルの作成
模写サイトを参考に、CSSでスタリングしていきます。
クラス属性やfloatプロパティを使って、位置などを決めていきます。
色に迷ったら、Chromeの拡張機能である「colorzilla」を使います。
![](https://tumaboki.com/wp-content/uploads/2020/11/53d50e41e747a3a66f4bf555ba0fc7bf-1024x561.png)
勉強になったコード
HTML
更新情報(日付+内容)は、dlタグ,dtタグ,ddタグでマークアップする。
著作権情報は、smallタグでマークアップする。
CSS
max-withで最大幅が決められる。
overflow: hiddenで要素が余計な隙間に入らなくできる。(floatした要素に高さを持たせることができる)
※本来は、ボックス外の領域を非表示するものです。仕組みの応用なのかな?
overflow-y:scrollで縦スクロールのスタイリングができる。
float: leftで要素を左配置にできる。
まとめ
実際に作成することで、基礎の定着率が上がりました。
実際に何かつくるとテンションあがるので、おすすめです。
参考
参考にした動画
![](https://tumaboki.com/wp-content/uploads/2020/11/html-1-163x1024.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/css-1-137x1024.png)
コメント