記事一覧
Codestep入門編３
こんにちは、もなです。
Codestep入門編、今回は3つ目です。
6回連続チャレンジも半分まで来ました！
PC表示
SP表示
終えてみて
前回と同じようで少し異なるデザインでした。
・勉強になったこと
→縦に線を引いて、レスポンシブでは横に書き直す。その時は余白をpaddingで調節する。
毎日新しくググって学んでの繰り返しです。
後々必ず為になると信じてコツコツ。
大変だけど今回も
Codestep入門編2
こんにちは、もなです。
模写コーディングはCodestep入門編2にチャレンジ！
今月中に入門編6つすべてを終えるのが目標です。
PC表示
SP表示
終えてみてどうにかできあがりました。よかった！
オーダーリストの番号部分をはみ出すことなく左端に揃えることができました。つい先日の苦闘が活かせてうれしいです！！
まだまだ慣れていない部分が多いので、できそうと思えても形になるまでとても時間が
Codestep入門編
こんにちは、もなです。
初模写からの、一度挫折したCodestepに再挑戦します。
初回は入門編のこちらから。
PC表示
SP表示
終えてみて
画像はカフェをイメージしたものを使いました。
ソースコードを見ずにレスポンシブまで作ることができました！
すごくうれしかった…！
前と同じように全くできなかったらどうしようかと不安でしたが、どうにか形になるものが出来てホッとしましたし、すごくうれし
【HTML・CSS学習】Codestep再度チャレンジ
初めて模写に取り組んだのはCodestep（コードステップ）さんのサイトです。
再度チャレンジします！
まずはこちらの自転車画像があるサイトから。
前は、レイアウトを書いていざやるぞ！とVSCodeを開いたものの、ヘッダーにある「About」と「bicycle」しか書けず、程なく撃沈した苦い思い出。
ほんと書いただけで右端に配置することもできませんでした（笑）
模写のハードルの高さを味わい、
【HTML・CSS学習】list-style- position
olのli番号（マーカー）部分が親要素からはみ出て、思うようにレイアウトできず苦闘しました。
テキスト部分は動かせるのに数字だけが言うことを聞かず、なぜ？なぜ？とググってググって何とか解決。
自分の疑問はみんなの疑問（のハズ）なので、いろんなサイトを参考にさせてもらってます。
「？」が解決できて思うように画面が表示されるとめちゃくちゃ嬉しいです！
今日の学習でlist-style-positio
【HTML・CSS学習】くりのすけさんnote第２弾を終えて
こんにちは、もなです。
今月5日（日）から始めたくりのすけさんnote第2弾は、10日（金）に終えることができました。
終えたといっても、最後のフッター部分までどうにか駆け足でたどり着いたといった感じでしょうか。
わからないところや初めての部分は写すだけになったり、ググってみたり、いろいろなことが一気に出てきて頭がパンクしそうでした。
今まで学習してきたなかで曖昧な個所や忘れているところも多々
【HTML・CSS学習】新たな拡張機能
こんにちは、もなです。
引き続きくりのすけさんのくりnoteでレスポンシブを学習しています。
昨日は、
・画面を縮めると要素が折り返さずはみ出る
→お手本コードと見比べても何が間違っているかわからない
→寝る（眠りにつく間際まで考えていた）
しかし今朝になって、「こうかも？」と気が付き無事に修正！
詰まったら寝るのも大事ですね（笑）
それから、VSCodeにまた新たな拡張機能を入れました。
・A
【HTML・CSS学習】dl dt dd の続き
こんにちは、もなです。
模写コーディングをしながら、日々新しいことに触れています。
昨日はまた新たな表の作り方を発見し、「こんなやり方もあるのか！」と驚きですぐVSCodeを開きました。
今までは
・各項目をdivで囲いdisplay:flexで横並びにして、paddingやmarginで調節
・tableタグを使う
だったのが、
・dl.dt.ddを使い、calcで幅を調整
という、つい