【初級編DAY24～25】自分のポートフォリオサイトを作ろう（準備〜headerまで）

WEB制作デイトラメモ

これまでの学びを踏まえ、自分のポートフォリオを作成します。ポートフォリオの作成において大切なことや必要なことを自分用メモとしてまとめておきます。ポートフォリオとは？ポートフォリオサイトの目的ポートフォリオの構成基本構成追加おすすめ要…

2023-10-22

【初級編DAY23】CSS設計の基本概念からクラスの付け方をイメージしよう

CSS Sass WEB制作デイトラ

一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！そのためにはどうしたら良いか？についてここでは学んでいきましょう。 CSS設計について OOCSSについて「構造」と「見た目」の分離「コンテナー…

#OOCSS #BEM #SMACSS #CSS #CSS設計 #Sass

2023-10-21

【初級編DAY22】カフェLPのCSSをSassで書き直してみよう

Sass WEB制作デイトラ

Sassについて学んだところで、実際にコードを書いていくための準備をしましょう。 SassからCSSへコンパイルする Live Sass Compilerのインストール設定画面記述文 Sassの出力方法の設定拡張子出力先フォルダ Autoprefixerによるベンダープレフィックスの…

#Sass #Live Sass Compiler #コンパイル #@use

2023-10-19

【初級編DAY21】CSSの上位互換！Sassを学習しよう

WEB制作デイトラ Sass

SassのSCSS文法について学んでいきます。 Sassとは？入れ子の書き方＆でつなげる擬似要素・クラスの書き方変数を使ってみよう変数をつかった四則演算定義したスタイルを使いまわそう @extendの使い方 @mixinの使い方 @extendと@mixinの違い @mixinを使…

#Sass #@extend #mixin #css

2023-10-16

【初級編DAY20】【調べながら実装しよう】jQuery実践課題②

WEB制作デイトラ

前回に引き続きjQueryの実践を行っていきます。本日の課題 ≪HTML≫ まとめ※一部省略 ≪CSS≫ まとめ反省点覚えておきたいこと復習（position fixedとabsoluteについて） ≪jQuery≫ まとめ覚えておきたいこと完成これからコードを書くに当たって本日の課…

2023-10-15

【初級編DAY19】【調べながら実装しよう】jQuery実践課題①

WEB制作デイトラ jQuery JavaScript HTML CSS ChatGPT

HTML・cssの課題で作成したサイトに動きを付けてみましょう！下記は復習と、新しく覚えたいことを記録しておきます。手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教え…

#.scroll #JavaScript #jQuery #HTML #CSS #まとめ

2023-10-13

【初級編DAY18】ChatGPTのプログラミングへの活用方法

ChatGPT デイトラ WEB制作

プログラミングを行うにあたり便利なChatGPTの機能を使ってみよう！ ChatGPTを使ったプログラミング勉強方法 chatGPTを使う注意 chatGPTのおすすめの活用方法命令（プロント）のポイント ■ChatGPTとは■ ChatGPTは、自然言語処理技術を使用して対話型のコン…

#chatGPT

2023-10-12

【初級編DAY17】よくあるアニメーションを自在に作れるようになろう②

jQuery JavaScript WEB制作デイトラ

最終問題「フォームに入力された値をアラートに表示しよう」を見ていきます。フォームに入力された値をアラートに表示しよう新しく覚えたいことフォームに入力された値をアラートに表示しよう jQuery("#js-form-name").on("submit", function (e) { e.pre…

#function(e) #preventDefault #反転の意 #！

2023-10-08

【初級編DAY16】jQueryを学ぼう②

jQuery デイトラ WEB制作

前回に引き続きjQueryについて学んでいきましょう。メソッドとパラメーターメソッドとパラメーターについて jQueryの代表的なメソッド情報の追加と変更要素の挿入と削除属性の取得、変更、追加、削除 class属性の追加と削除 cssの取得、設定 cssの複数…

#jQuery #メソッド #パラメーター #メソッドチェーン #イベント構文 #.on

2023-10-08

【初級編DAY15】jQueryを学ぼう①

jQuery WEB制作デイトラ

DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう！ ■jQueryとは？■ jQueryを使うための準備 jQueryを書く時のルールセレクタ（HTML要素）の指定方法【jQuery("セレクタ")】メソッド("パラメータ") 繰り返し処理【.eac…

#jQuery #CDN #jQuery(function(){}) #.each(function) #this #TreeTraversal #find() #children()

2023-10-07

【初級編DAY14】Web制作初心者のためのJavaScript基礎講座（DOM操作）

JavaScript WEB制作デイトラ

サイトに動きを付けるためにはJavaSprictでDOM操作することで動きをつけることができます。DOM操作について学んでいきましょう！ DOM操作とは HTML要素の取得最初に一致したセレクタ要素を取得【document.querySelector】一致したすべてのセレクタ要素を取…

#DOM #querySelector #querySelectorAll #getElementsBy～ #createElement #setAttribute #appendChild #click #window.onload #addEventListener

2023-10-05

【初級編DAY13】JavaScriptの基本文法を学ぼう③-02,03

JavaScript WEB制作デイトラ

【初級編DAY13】JavaScriptの基本文法を学ぼう③-02,03 オブジェクトとくりかえし文について学びます。【初級編DAY13】JavaScriptの基本文法を学ぼう③-02,03 オブジェクト内の一部の要素を取り出すブジェクト内の一部の要素の書き換え配列の中でオブジェク…

#オブジェクト #for #forEach #forof

2023-10-03

【初級編DAY13】JavaScriptの基本文法を学ぼう③-01

JavaScript WEB制作デイトラ

【初級編DAY13】JavaScriptの基本文法を学ぼう③-01 DAY12 tips1 配列について学んでいきましょう！【初級編DAY13】JavaScriptの基本文法を学ぼう③-01 配列（Array）基本記述配列の数（length） index番号 index番号を使った呼び出し index番号を使用して…