HTML.CSS練習日記 #1
練習、学習サイト。
codestepさんのサイトを模写。
リンクはこちら。
Codestep | 作って学ぶコーディング学習サイト(HTML、CSS、JavaScript、WordPress) (code-step.com)
目標デザイン。
![](https://assets.st-note.com/img/1663952808146-8eGnda90ly.png?width=800)
模写
HTML.
![](https://assets.st-note.com/img/1663951536988-cIqvIvU97m.png?width=800)
● HTMLで躓いた点。
基本的になし。
![](https://assets.st-note.com/img/1663951816786-Zayv0lJkRf.png)
![](https://assets.st-note.com/img/1663951836405-yEayFYf8Fc.png?width=800)
● cssで躓いた点。
1.aboutセクションで、写真の幅とinfoのmargin調整がうまくいかなかった。
解決策: min-width
2.デモソースを見るとbicycleセクションの画像はli要素で組んでいる。
divで囲んで代用。
![](https://assets.st-note.com/img/1663952239884-orGBPzLKCP.png?width=800)
1.ブラウザーズーム67%でキャプチャ。
2.フッター省略。
3.infoのmargin-bottom忘れ。
覚えておくこと。
section{}でのmarginプロパティが、クラス名で指定したスタイルを受け、上書きされてしまう。3で書いたBICYCLE titleのmargin-topが、それ以前のセンタリングで使ったmargin:0 auto;で消えてしまっている事。
画像挿入で崩れたサイズはmin-widthで補える。
この記事が気に入ったらサポートをしてみませんか?