もな

web制作学習をしています。日々の継続を大事にコツコツ学んでいます。

もな

web制作学習をしています。日々の継続を大事にコツコツ学んでいます。

しょーごさんコーディング教材【中級編EX】完走

こんにちは、もなです。 しょーごさんのコーディング教材【中級編EX】完走しました！！ 一度目の提出で、「軽微の修正なので、修正後はそのまま合格でOK」とのコメントを頂き、一発合格とはなりませんでしたが、目標にしていた【中級編EX】を合格することができました。 うれしい！ここまで来れたことが。。。 （学習を始めたころの自分に言いたい！！　笑） かかった時間は35時間ほどでしょうか。 複数ページの構築、モーダルやタブなどの設置、CSSアニメーションなど学習を深めることができま

もな

    • しょーごさんコーディング教材【中級編】完走

      こんにちは、もなです。 しょーごさんのコーディング教材【中級編】一発合格をいただきました！！ めちゃくちゃうれしいです！ 中級編もたくさんのことを学ぶことができ、完成に近づいていく過程が楽しかったです！うん、楽しかった！その感情が一番強い！！(*´ω｀*) 今回一番勉強になったことは「JQueryの実装」でしょうか。 正直今までは、「なんとなく動いて、なんとなく実装できてる（気がする）からいいかな～……」みたいな、自信のない部分を見て見ぬふりをし曖昧にしていたところが多々

      もな

      • しょーごさんコーディング教材【初級編EX】完走

        こんにちは、もなです。 しょーごさんの有料カンプ【初級編EX編】 一発合格を頂きました！！ 今回は取り組んでみての感想や、購入をもし迷っている方がいらっしゃいましたらぜひおすすめしたい理由を、ひとりの初学者目線ではありますが思うままにまとめていますので、ご一読いただけたらうれしいです。 まず自分が取り組んだ際の気持ち・こちらの教材を選択した基準は、 「今まで学習してきたHTMLとCSSの総復習をするため」でした。 しょーごさんが「HTML,CSSの総復習に」とお話しさ

        もな

        • WEB制作学習　今後の目標

          こんにちは、もなです。 2022年になって早くも10日経ちましたね。 昨年の12月中にクリスタ初級編・中級編・上級編を終わらせる！という目標は、今年度の三が日に３日遅れでクリアすることができました。 今後はこちらのしょーごさんのカンプで、より実践的なコーディングを学習していきます。 ワードプレス学習も含め、今後を見据えてマガジンでまとめ買いをさせて頂きました！！ せっかく購入したので、まずは初級編からスタート。難なくクリアでき次は初級編EX！ HTMLとCSSの総復

          もな

        しょーごさんコーディング教材【中級編EX】完走

        もな

          【HTML・CSS学習】クリスタ上級編

          こんにちは、もなです。 デザインカンプからのコーディング練習を続けています。 この度はクリスタさんのカンプ練習上級編にチャレンジし、無事に終えることができた！という記事です。 トップページから下層ページまで計３ページ。 レスポンシブも含めてかかった時間は18時間前後でしょうか。 中級編に比べると複雑な部分もありましたが、何とか形にすることができました！ クリスタさんのカンプは初級・中級・上級とあり、中級と上級は動画で解説もされています。 わからない部分は動画でしっかり確認

          もな

          【HTML・CSS学習】クリスタ上級編

          もな

          クリスタ中級編：前編

          こんにちは、もなです。 コードステップ中級編も全て終わらせることができ、 12月10日から14日までクリスタ中級編にチャレンジしました。 初級編はレスポンシブ込みで3時間半程で完成しましたが、中級編はJQueryも使うとあって、難しそうなイメージ。 果たして完成させることが出来るのか不安を少し抱えながらも、分からないところはググりながら取り組みました。 ググったところ・勉強になったところ1.スクロールするとヘッダーの背景色が変わるJQuery XDカンプを見て、「hea

          もな

          クリスタ中級編：前編

          もな

          Codestep中級編まで

          長らく日が空いて久しぶりの投稿になります。 毎日コードを書くことを自分に課し、noteの投稿よりもコーディングの練習を優先して過ごしています。 コードステップの途中で挫折したと思われても仕方がないくらい、更新が止まっていましたが、 ・入門編6つ ・初級編5つ ・中級編5つ を終えました。 この間にカンプからではなく実サイトの模写もいくつか挑戦しました。 HTML・CSSも少しずつ、 JQueryも少しずつ、 学習を始めたころよりは前に進んできていると思います。 以下

          もな

          Codestep中級編まで

          もな

          Codestep入門編4

          こんにちは、もなです。 少し間が空いてしまいましたが、Codestep入門編の続きにチャレンジしました。 PC版 SP版 終えてみて学んだこと ・画像を画面に3分割する方法→calcで計算する ・TwitterやFacebookなどのsnsは一つのカテゴリーとして考え、リストタグで配置する 今回のテーマは【レシピサイトを想定してサイトを作ろう】でした。 前回まではカフェをイメージした画像を使っていましたが、今回は料理や食卓の画像を検索して配置していきました。 猫が好き

          もな

          Codestep入門編4

          もな

          Codestep入門編３

          こんにちは、もなです。 Codestep入門編、今回は3つ目です。 6回連続チャレンジも半分まで来ました！ PC表示 SP表示 終えてみて 前回と同じようで少し異なるデザインでした。 ・勉強になったこと →縦に線を引いて、レスポンシブでは横に書き直す。その時は余白をpaddingで調節する。 毎日新しくググって学んでの繰り返しです。 後々必ず為になると信じてコツコツ。 大変だけど今回も何とか形になったので良いかな〜って思います。 カフェの画像が続いたので、明日から

          もな

          Codestep入門編３

          もな

          Codestep入門編2

          こんにちは、もなです。 模写コーディングはCodestep入門編2にチャレンジ！ 今月中に入門編6つすべてを終えるのが目標です。 PC表示 SP表示 終えてみてどうにかできあがりました。よかった！ オーダーリストの番号部分をはみ出すことなく左端に揃えることができました。つい先日の苦闘が活かせてうれしいです！！ まだまだ慣れていない部分が多いので、できそうと思えても形になるまでとても時間がかかります。 こんな感じで構図を作るのかな？と頭で少しずつイメージして、いつかは

          もな

          Codestep入門編2

          もな

          Codestep入門編

          こんにちは、もなです。 初模写からの、一度挫折したCodestepに再挑戦します。 初回は入門編のこちらから。 PC表示 SP表示 終えてみて 画像はカフェをイメージしたものを使いました。 ソースコードを見ずにレスポンシブまで作ることができました！ すごくうれしかった…！ 前と同じように全くできなかったらどうしようかと不安でしたが、どうにか形になるものが出来てホッとしましたし、すごくうれしかったです！！ ヘッダーは文字を書くだけでなく、ちゃんと配置できた！（笑） 自

          もな

          Codestep入門編

          もな

          【HTML・CSS学習】Codestep再度チャレンジ

          初めて模写に取り組んだのはCodestep（コードステップ）さんのサイトです。 再度チャレンジします！ まずはこちらの自転車画像があるサイトから。 前は、レイアウトを書いていざやるぞ！とVSCodeを開いたものの、ヘッダーにある「About」と「bicycle」しか書けず、程なく撃沈した苦い思い出。 ほんと書いただけで右端に配置することもできませんでした（笑） 模写のハードルの高さを味わい、当時の自分のひとこと日記がこちら。 【8月4日　初めて模写を行うが全くわからな

          もな

          【HTML・CSS学習】Codestep再度チャレンジ

          もな

          【HTML・CSS学習】list-style- position

          olのli番号（マーカー）部分が親要素からはみ出て、思うようにレイアウトできず苦闘しました。 テキスト部分は動かせるのに数字だけが言うことを聞かず、なぜ？なぜ？とググってググって何とか解決。 自分の疑問はみんなの疑問（のハズ）なので、いろんなサイトを参考にさせてもらってます。 「？」が解決できて思うように画面が表示されるとめちゃくちゃ嬉しいです！ 今日の学習でlist-style-positionにoutsideとinsideという概念があることを知りました。 マーカー部分

          もな

          【HTML・CSS学習】list-style- position

          もな

          【HTML・CSS学習】くりのすけさんnote第２弾を終えて

          こんにちは、もなです。 今月5日（日）から始めたくりのすけさんnote第2弾は、10日（金）に終えることができました。 終えたといっても、最後のフッター部分までどうにか駆け足でたどり着いたといった感じでしょうか。 わからないところや初めての部分は写すだけになったり、ググってみたり、いろいろなことが一気に出てきて頭がパンクしそうでした。 今まで学習してきたなかで曖昧な個所や忘れているところも多々あったので、土日でシュンさんの写経サイトとくりのすけさんnote第１弾を復習しま

          もな

          【HTML・CSS学習】くりのすけさんnote第２弾を終えて

          もな

          【HTML・CSS学習】新たな拡張機能

          こんにちは、もなです。 引き続きくりのすけさんのくりnoteでレスポンシブを学習しています。 昨日は、 ・画面を縮めると要素が折り返さずはみ出る →お手本コードと見比べても何が間違っているかわからない →寝る（眠りにつく間際まで考えていた） しかし今朝になって、「こうかも？」と気が付き無事に修正！ 詰まったら寝るのも大事ですね（笑） それから、VSCodeにまた新たな拡張機能を入れました。 ・Auto Rename Tag タグを変更する時に対応するもう一つのタグも変更して

          もな

          【HTML・CSS学習】新たな拡張機能

          もな

          【HTML・CSS学習】dl dt dd の続き

          こんにちは、もなです。 模写コーディングをしながら、日々新しいことに触れています。 昨日はまた新たな表の作り方を発見し、「こんなやり方もあるのか！」と驚きですぐVSCodeを開きました。 今までは ・各項目をdivで囲いdisplay:flexで横並びにして、paddingやmarginで調節 ・tableタグを使う だったのが、 ・dl.dt.ddを使い、calcで幅を調整 という、つい最近学習した「dl dt dd」を使用する方法。 前は頭がごちゃごちゃしていてあ

          もな

          【HTML・CSS学習】dl dt dd の続き

          もな