こー@Web制作勉強中！

✅実務では先輩に教えてもらうことも多いので、ChatGPTに頼るだけでなく、メンターさんへ質問する経験を通して質問力を鍛えることも忘れずに！！

【#デイトラ #Web制作 初級編Day18】 ChatGPTのプログラミングへの活用方法について学習しました💻 ✅辞書、タイポのチェック、エラーメッセージの解読、コードや記事の解説に利用すると👍 ✅なんとなく理解したら先に進むというのはもう古い。ChatGPTに聞いてみるというステップを挟んでみよう

Day17で気になったので、複数のクラスが並ぶ場合のCSSの記述方法について調査🔍 ✅同じタグ内に複数のクラス名が並んだ場合→続けて記述（.A.B） ✅入れ子構造の場合→半角スペースを入れる（.A .B） ✅複数のクラスに同じCSSを適用する場合→カンマで区切る（.A,.B） 参考qiita.com/redrabbit1104/…

【#デイトラ #Web制作 初級編Day17】 JS, jQueryのコーディングノックに挑戦しました💪 一人では実装できず…まぁやっていくうちに身についてくるはず！！笑 ✅HTMLでクラスを指定する際、CSS用とjs用に分けると捗る ✅何度も登場する部分を定数に定義すると保守性向上（例：課題5つ目のnameInput）

初級編Day16に関連して、on(“click”)とclick()の違いを調べました！ ✅どちらを使っても挙動は同じ ✅on()は複数のイベント処理が可能 ✅jsで生成した要素の操作が可能 基本的にon(“click”)でやろうと思います💡 参考：pengi-n.co.jp/blog/jquery-cl… #デイトラ #Web制作

✅パラメータの中にクラス名を記述する際は、セレクタとは異なり「.」は不要 ✅メソッドチェーンにより複数のメソッドをまとめて記述可能

【#デイトラ #Web制作 初級編Day16】 jQueryのメソッド、イベント監視を学びました ✅jQuery(“セレクタ”).メソッド(“パラメータ”)という構文 ✅セレクタで指定した要素をメソッドで操作する（例：CSSを設定しろ！） ✅メソッドの具体的な内容をパラメータで指示する（例：文字を赤色にしろ！）

【#デイトラ #Web制作 初級編Day15】 jQueryのメリットや書き方のルールを学びました ✅jQueryはJavaScriptよりも効率的にプログラムを記述可能 ✅jQuery(“主語”).述語(“補語”)のイメージ ✅jQuery(“”)がdocument.querySelectorAll(“”)と同じ意味合い ✅複数のセレクタをまとめて指定可能

スニペットに追加しようとしたら、エラーで弾かれてしまいました。 一番後ろに「,」をつけておかないと、次に追加したスニペットがエラーになってしまうようですね💡 昨年も同じところで引っかかったかも…？笑

【#デイトラ #Web制作 初級編Day14】 DOM操作を学びました ✅HTMLデータはdocumentというオブジェクトに入っている ✅JavaScriptを使って、documentから特定のデータを取得し、加工し、出力する 自分で実装しようとすると全然記述できない… これもやっていくうちに身体で覚えるはず！

【#デイトラ #Web制作 初級編Day13】 配列、オブジェクト、繰り返しについて学びました ✅慣れない人は特に:と;、[]と{}の混同に注意 ✅解説動画を真似るだけでなく、自分でもあれこれコードを書いてみ他のでより深く学べた✨ ✅練習問題では、今回学んだ3種類の繰り返し処理で実装できました！

【#デイトラ #Web制作 初級編Day12】 javaScriptの関数、条件分岐を学びました ✅関数スコープは定義した関数内でのみ参照可能 ✅グローバルスコープは関数の外から参照可能だが、意図しない衝突に気を付けること ✅変数や定数の有効範囲はどこまでなのかを意識して取り組むこと

【#デイトラ #Web制作 初級編Day11】 javaScriptを学び始めました（昨年の記憶がほとんどなくなってる…） ✅「'」「“」「;」「`」のキーの位置はまだまだ覚えられないけど、スニペットに登録してガンガン活用して効率化していきたい！ haniwaman.com/vscode-snipet/

【#デイトラ #Web制作 初級編Day8~10】 ギリギリ6時間以内に完成しました！ ✅自力で実装する過程で、分かった気になっていた部分が浮き彫りになる ✅innerはpaddingで左右に余白を作るだけのものではない。max-widthとmargin: 0 auto;の合わせ技で、画面幅の変化によらず中央に寄せることが可能💡

【#デイトラ #Web制作 初級編Day7】 コピーライトにsmallタグを使った理由を調べました ✅このテキストは注釈や著作権データですよという意味を持たせるためのもの ✅ただ、有名サイトを見てみるとdivやpタグを使っていため、必須ではなさそう 参考 evoworx.co.jp/blog/small-tag…

【#デイトラ #Web制作 初級編Day7】 サイトが完成しました！ これを流用するだけで営業できちゃう気もしますね😄

✅「padding: 0 20px;」と入力したい時は「p0-20」と打てばOK 講師の方が動画でEmmetの入力方法も言葉にしてくれるから非常にありがたいです🙇 Emmetをもっと使いこなせるようになりたい🔥 #web制作 #デイトラ #駆け出しエンジニアと繋がりたい

✅デブツールを全然使えてなかったことを実感^^; そこで調整し終わってから、スタイルシートへコピペすれば効率的にコーディング可能。 直接コードをいじると、検討過程で行った変更箇所を戻し忘れてしまうリスクもあるので、こっちの方が全然良いですね💡

【#デイトラ #Web制作 初級編Day6】 メインコンテンツを作成しました！ ✅pictureタグのメリット ・media属性で画面幅に応じて表示する画像を切替可能 ・表示されない方の画像は読み込まれないため、Webサイトの表示スピードが改善される 参考 zero-plus.io/media/html-pic…

✅クラス名の付け方が非常に参考になった HTMLの階層が深くなるのに合わせて「-」で繋ぐ必要はなく、後で見たときに意味が分かるようにするのが重要。 例えば、about-contentsの子要素はabout-textでOKで about-contents-textなどとする必要はない。

【#デイトラ #Web制作 初級編Day5】 ChromeのデベロッパーツールやGoogle Fontsの使い方を学び、headerを作成！ ✅デブツールのComputedにて、選択した要素のpaddingやmarginをヴィジュアルで確認可能（Stylesの一番下でもOK） ✅Computed→Rendered Fontsにて、表示されているフォントを確認可能