こんにちは!国分です。
インターン8日目もコーディングの続きをしました。
調べながらJavaScriptで『続きを読むボタン』を完成させることができました!
each を使うと繰り返しができることや addClass を使うと新しいクラス属性を作ることができるということなどを学びました。
ボタンを作った後は、XDを見ながら幅やフォントの大きさ、色などを細かく設定していきました。
XDはフォントサイズや色などがすぐわかるのでとても使いやすいなと思いました!
今回一番苦戦したのは、ボタンの配置でした。
画像の下に謎の空白があったり幅が揃っていなかったりで、無料で読むボタンと画像の下を揃えるということがなかなかできませんでした。
クラス名を1つずつ確認しながら重なってるところがないか、何か抜けてないかを見ていきました。
その結果、imgにdisplay:blockがついていなかったことと余分なpaddingがあったということがわかり、なんとか揃えることができました!!
次回は、モバイル表示の方も揃え、もう少しXDで作ったデザイン案に近づけるために調整していきたいと思います!