kojo@web制作勉強中 | 山好き

40代女子、派遣社員+ちょっと副業。 派遣は3年の期限があるのがわずらわしくなり、手に職をつけてフリーになりたいとWeb制作勉強中。 もっと早く始めればよかったとも思うけど、まだまだやる気も体力もあるのでがんばります。 趣味は山登り。おこじょに会えるとキュンキュンします。

kojo@web制作勉強中 | 山好き

40代女子、派遣社員+ちょっと副業。 派遣は3年の期限があるのがわずらわしくなり、手に職をつけてフリーになりたいとWeb制作勉強中。 もっと早く始めればよかったとも思うけど、まだまだやる気も体力もあるのでがんばります。 趣味は山登り。おこじょに会えるとキュンキュンします。

最近の記事

<Web制作学習記録>デイトラ中級、始めました。 Day 3 [AIを活用したコーディング Github Copilot と Cursor]

AIで効率的にコーディングしようGithub Copilot(VsCode)と、Cursorでai機能を比較しながら使ってみます。 コードのリアルタイム提案 ・Github Copilot のみ コードを書いていると次のコードが自動で提案されてくる。 全て受け入れる場合は[Tab]。 単語ごとに選択する場合は[cmd + →]で選択していく。 コードを生成してもらう ・Github Copilot [cmd + i] インラインチャットで日本語で指示(例:2列4行の

    • <Web制作学習記録>デイトラ中級、始めました。 Day1-2

      初級がようやく終わりました。約2ヶ月半。。 もっと早く終わらせたかったのですが、別記事でも書いていますが、andoroid故障→iphone乗り換え、WindowsPC故障→macへの乗り換えは影響大きすぎました。 それと、XなどSNSを活用するようにといわれるのですが(実際営業には必要だと思います)、今までほぼ使ったことがなく、設定などに時間かかりました。このnoteもそう。こつこつやって慣れていくしかない。 初級の最後の課題はポートフォリオサイトの作成&公開。これも、

      • 【Google chrome】メールアプリが開くショートカットキーを無効にする。

        引き続き、Windowsからmac乗り換えを頑張っています。 何度もやってしまって困っていたのが、chromeブラウザで「cmd + shift  + i 」で「リンクを送信するメールアプリが開く」こと。 このコマンド、Windows「 ctrl + shift  + i」 だと「検証ツールを開く」なんだよぉー!!(と何度心の中で叫んだか。)  調べたらmacの設定ではなく、macOSの「chrome」の設定でした。 しかも、え?コマンドで直すの??? がんばります。

        • macのカスタマイズをしよう!① 【vsCode】エディターの移動と統合

          Windowsマシンが故障し、macに乗り換えてから1ヶ月。画面がとても綺麗なのに感動しつつ、キーボードにまだ慣れていません。 いろいろカスタマイズしたのだけど、まだWindows時代のクセでついキーを押してしまい、作業がすすみません。 もっとmacと仲良くなるべく、カスタマイズ記録集を作っていきます! まずは復習。 キーボードショートカットは「cmd + k   cmd + s」です。 【vsCode】editorを分割&移動するショートカット。コーディングって、たくさ

          デイトラWeb制作 -Day30- [display:sticky]と、[flex-basis]を理解する。

          大変久しぶりの投稿です。 前回投稿してから、出張やら山行やらあった上に、 ・androidスマホ画面割れ(2回目)→ iPhone16Proへ移行、 ・WindowsPC故障(マザーボードがアウト)→ Macbookへ移行 と、なんかいろいろありました。 少し前に家族が使わなくなって貰い受けたMacbookAir、アカウント設定していたので割とスムーズでしたが(こうなることを無意識に予測していたのか?)、まだキーボードに慣れていません。半角全角キー押したつもりで「1」とか「

          デイトラWeb制作 -Day30- [display:sticky]と、[flex-basis]を理解する。

          デイトラ-Day26~27- ポートフォリオサイト作成(headerまで)

          ポートフォリオサイト作成編、です。 えっ、この初期段階でポートフォリオなんか作れるの?とりあえず指示通りに作ってみます。 、、、と思ったけど、いろいろ考えるところがあり、指示通りではなくて少々変えてしまいました。あとでなんかおかしいことしていないかチェック用に、学んだことと合わせて、何を変えたかも記録しておきます。 Sassのファイル構造、ファイル名まだ慣れていないのでなんとも、なんですが、色の変数名を_colors.scssというファイルに入れていたけど、そんなに細かくや

          デイトラ-Day26~27- ポートフォリオサイト作成(headerまで)

          デイトラWeb制作-Day23-24- Sass学習

          Sassの学習をはじめます。 前にも使ったことがあり、超絶便利で大好きなのですが、最近は脱Sassの傾向もあると聞いているので、使い続けていいのかな、なんて思いながら、楽しく復習させていただきました。 SassMeisterが開けないこれ、どうしたんでしょう。半年くらい前には普通に使えていたのですが、、ますますSassが消えていくのではと思ってしまいます。(私レベルが心配することでもないのですが😅) Live Sass Compilerのインストール今までDartSass

          デイトラWeb制作-Day23-24- Sass学習

          デイトラWeb制作-Day22続き- Notion活用

          山行(剱岳北方稜線)+もろもろ(スマホ再修理とか)で、1週間空いてしまいました。電波を丸3日受信せず。たまにはデジタルデトックスも必要!ということで、、 そろそろ再開いたします。 Notionにコードストックを追加していく…にあたり、先週自分の書いたコードを見ていたらいろいろ直したくなってしまいました。でも綺麗にできたので、時間かかったけど、次からはきっと効率よくなるはず。 まず、直したところ モーダルで画像を拡大表示するとき、元の画像よりは大きくならないように修正。

          デイトラWeb制作-Day22続き- Notion活用

          デイトラWeb制作 -Day21~22- 課題③まで

          なんだか急に子育て放棄されたみたいな、、自分で何とかがんばれという課題になりました(笑)  始めに作ったケーキ屋さんのwebページに、アコーディオンやスクロールトップボタンなどを追加します。 難易度急に高くなったように感じます。でもいろいろ検索しながら、なんとかできた。やったー! でも合ってるのか、少し不安です。特にJavaScript(jQuery)は、一応動いたのですが、初級はコードレビューがないので、AIにレビューしてもらいました。 変数を使おう 何度も使うのでな

          デイトラWeb制作 -Day21~22- 課題③まで

          デイトラWeb制作-Day20- ChatGPT活用

          ChatGPTなど、AIを使ってみたほうがいい時5つ辞書として活用(なんとなく知っていた上で、「こういうのあったよな、なんだっけ」って時に使うとよい。 タイポ(打ち間違い)のチェック(自分で探してもなかなか発見しづらい) エラーメッセージの意味を知るのに使う(英語も怖くない。エラーメッセージには答えが書いてある) コードの解説に使う。(まずは自分で読んで理解しようとしてみてから!初めから丸投げしないこと) 記事の解説に使う。(検索した解説記事などを読んで、さらにわか

          デイトラWeb制作-Day20- ChatGPT活用

          デイトラWeb制作-Day19- アニメーションいろいろ

          今回はちょっと課題感があり、楽しそうです。 アコーディオンとか、ハンバーガーメニューを作ります。 作成していて、覚えておいた方がよさそうなことをメモしておきます。 buttonタグについてJavaScript、jQueryのクリックイベントに使用するタグは、 「button type="button"」として作成するのが良い。 理由:キーボード操作でカーソルをあてることができるから。 要注意:buttonタグには、必ずtype属性を指定すること!!! type属性を指

          デイトラWeb制作-Day19- アニメーションいろいろ

          デイトラWeb制作-Day18- jQuery②メソッドとパラメータ

          本日もこつこつやっていきます。 メソッド、パラメーターとはメソッドとは、セレクタで指定した要素を操作する命令文のこと。クラスを追加して!CSSを設定して!テキストを変更して!など。 パラメーターとは、どのようにメソッドを実行するか具体的に指示する補語。パラメーターに渡された値のことを引数と呼ぶ。 // クラスの追加jQuery("#js-btn").addClass("btn-register");//クラスの削除jQuery("#js-register").remove

          デイトラWeb制作-Day18- jQuery②メソッドとパラメータ

          デイトラDay17 jQuery①

          jQueryの基本的な書き方まずはCDNを読み込み。<body>タグ直前に記載しておく。 ただし自作jsファイルより前にすること。 基本文法。 jQuery("主語").動詞("補語"); //javaScriptの場合document.querySelector("#js-title").innerText = "Hello, javaScript!";//jQueryの場合jQuery("#js-title").text("Hello, jQuery!");//また

          デイトラWeb制作 Day16 -JavaScript基礎講座(DOM操作)-

          動きが付けられると、プログラミングしてる~、っていう感じで楽しくなってきます。 20年前には、オブジェクトって意味わからん、って思っていました。初心者向け情報がたくさんある、素晴らしい時代になりました。 「DOM」とはDocument Object Modelの略称 HTMLやXMLドキュメントなどのマークアップ言語と、CSSをJavaScriptなどのプログラミング言語からアクセスできるようにするためのAPI(仕組み) DOMは、HTMLやXMLのドキュメントをオブジェ

          デイトラWeb制作 Day16 -JavaScript基礎講座(DOM操作)-

          裏銀座ルート山行記録(2024.9.11-14)

          7月に計画して悪天で中止した、裏銀座ソロ山行。 そして平日しか予約が取れない山小屋たち。 遅い夏休みを頂き、平日の贅沢な山行をしてきました。 前泊+山小屋3泊。七倉山荘、野口五郎小屋、三俣山荘、ヒュッテ大槍。 烏帽子から双六までを裏銀座といって歩く方は結構いますが、やっぱり槍まで行くのが正式だよね、と思い、少し背伸びしてこのルートに決定。 天気予報は連日「晴れのち昼から雨」だったけど、一度もレインウェア着なくてすみました。 今回は確実に降られると思い、レイン着ても暑くな

          裏銀座ルート山行記録(2024.9.11-14)

          デイトラWeb制作 Day14~15 JavaScript基本文法 Object

          引き続きJavaScriptの基礎を学びます。 let 変数 of 配列 が、なかなか私の中に定着しないところ。 オブジェクトとは配列と同様に複数のデータを扱うことができる。 配列と違うところは、キー(プロパティ)を使ってデータを管理すること。そのため、何を表すデータなのかが理解しやすくなる。 const scores = { math: 87, //数学のスコアだよ  english: 90, //英語のスコアだよ science: 65, //サイエンスのスコア

          デイトラWeb制作 Day14~15 JavaScript基本文法 Object