Bootstrapを使用して簡単な問い合わせフォームを作る Bootstrapを使用するとCSSの記述をほぼすることなく、問い合わせフォームを作ることが出来ました！（送信ボタンは機能しませんのでご注意ください） See the Pen JjjvWQL by すず@progateでお勉強はじめ…

JavaScript基本【DOM操作】 DOMとは？ DOMとは、JavaScript等でHTMLの操作を行うこと。 Document Object Modelの略で、ドキュメントをオブジェクトのように扱います。 値を変更したり、色を変えてみたりといった操作が可能になりますので、HTMLの表現の幅が…

www.oreilly.co.jp 読み終わりましたので簡単に感想を書きたいと思います。 読みやすい！ 正直、私のような初学者は翻訳された本というだけでもとっつきにくい上、オライリー本は更に難しく思えてしまうのですが、 そんな私でも、途中で挫折することなくスラ…

Vue Routerについて Vue Routerとは？ Vueを使用してシングルページアプリケーションを作るならほぼ必須の機能。 シングルページアプリケーションで表示させる内容を動的に変化させると、閲覧・操作の履歴が残らないことが多かっ。、 Vue Routerは履歴を持つ…

JavaScript【配列とオブジェクト】 map､filter See the Pen WNNOzyE by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. mapは、配列の中身それぞれに指定された処理を施した新しい配列を生成し返してくれます。 この例では、配列の中身を全て２…

Vue.js【算出プロパティ】 算出プロパティとは？ ↓こちらの記事がとてもわかりやすかった！ qiita.com 常に更新する必要のない値に関してはとても有効なようなので、使用すべきタイミングを見て適切に使っていきたい！ ということで、ちょっと勉強してみます…

Vue.js配列操作 配列に要素を追加 See the Pen VwwbLgJ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 配列から要素を削除 See the Pen bGGWVdW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. v-forの中の(item,index)と…

Vue.js 【イベントハンドリング】 イベントの購読 See the Pen YzzVzNy by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 上記はClickイベントでcounterの値を+1していくプログラムです。 イベント発火時にJavaScriptが動いているのがわかりま…

Vue.js【クラスとスタイルのバインディング】 クラスのバインディング v-bind:classにオブジェクトを渡すと、クラスを動的に切り替えることが可能になります。 See the Pen dyyvpJm by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. 上記の例…

Vue.js【コンポーネントについて】 処理をコンポーネント化する＝部品化する、という考えで良いのかな？ 他の場所でも使いまわしできるように処理をコンポーネント化するために、今日は勉強していきます。 コンポーネントのグローバル化 See the Pen BaapBdp…

思いっきり今の勉強内容から脱線してるのですが。 数日前、急にTwitterBotってどうやって作られてるんだろう？と疑問に感じたので調べてました。 …っていうのは半分建前で。私のオタクアカウントで推しに毎朝挨拶してるのですが、その返事が欲しかったんです…

JavaScript基本【コールバック関数】 コールバック関数とは？ 関数の引数に関数を渡すことができます。 これを、コールバック関数と呼びます。 See the Pen NWWRKKw by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. これは、call関数の引数に…

JavaScript基本【配列の操作】 pushメソッド pushメソッドを使用することで、配列に値を追加することができます。 See the Pen zYYBVdZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. forEachメソッド See the Pen abbZgVw by すず@progate…

JavaScript基本【複数のファイル操作＆npmパッケージの使い方】 複数のファイル操作 １つのjsファイルに全ての処理を詰め込んでしまうと、膨大で保守性の悪いものになってしまう可能性があります。 そこで、複数ファイルに分けてjsファイルを管理する必要が…

JavaScript基本【オブジェクト】 See the Pen LYYZbdx by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. オブジェクトは、複数の値をまとめて管理するために使用します。 配列は値を並べて管理するのに比べ、オブジェクトは値にプロパティと呼…

Vue.jsに触れてみる② v-onディレクティブでイベントを発生させる See the Pen eYYzzzd by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. ボタンをクリックすることで文字を反転させることができます。 ちなみにここで、Javascriptのアロー関数…

Vue.jsの基礎 Vueを使うことで、htmlの要素を操作することができます。 jp.vuejs.org こちらのチュートリアルを進めていきます。 値を表示する See the Pen eYYZbOV by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen. また、値を更新することも…

CSSでグラデーションが簡単にできた shapy.app ↑で作りたいグラデを作る(語彙力) コピーするところがあるのでコピーする。 backgroundプロパティに貼り付ける。 グラデになる（すごい） See the Pen PooZVvg by すず@progateでお勉強はじめました (@hpsuzuca…

JavaScriptアロー関数の書き方 JavaScript基本【関数】 - SuzuBlog 前回の記事と同じ内容のものをアロー関数に書き換えます。 引数なし const hello = ()=>{ console.log(`Hello,World!`); } hello(); 引数１つ const hello = (name)=>{ console.log(`Hello,…

JavaScriptの基本的な関数の書き方 引数なし const hello = function(){ console.log(`Hello,World!`); } hello(); 引数１つ const hello = function(name){ console.log(`Hello,${name}!`); } hello('World'); hello('Japan'); 引数複数 const add = functi…

HTML&CSS【Flexboxについて】 Flexboxとは？ CSS3から追加されたレイアウトモジュール。 float等で指定していた要素の様々な並びをより少ないコードで実現することが可能になる。 めちゃくちゃ便利なのでめちゃくちゃに活用していくべきだと感じた！！！！！…

レガシーコードからの脱却 仕事帰りにヨドバシのプログラミング本眺めてモチベあげよう～と思ったら、 最近話題に上がってる本を見つけたので買ってきました！ 通勤時間長いので、その時間で少しずつ読み進めていけたらいいなー！と思ってます。

JavaScript基本の基本 自分用なので詳しいことは書いてません。例のみ 基本出力 console.log(`Hello,World!!`); 変数、定数 //変数 let num = 123; //定数？(再代入できない変数) const str = `Suzu`; if文 let num = 200; if(100 === num){ console.log('nu…

Bootstrap eng-entrance.com を読んでいて、結局Bootstrapの使い方ってどんなのだ？と思ったので 参考になりそうなサイトをメモ techacademy.jp webst8.com www.atmarkit.co.jp qiita.com まずはこのあたりかな…？ 基礎を学んだあとであれば、便利なものをど…

チートシート グーグルでよく「〇〇 チートシート」と検索するのですが、 こういうのを作成してくれる方がいるからすぐに知りたい情報を引き出せてとても便利ですね。 いつか完全自分仕様のチートシートを作ってみたいなっていう願望はアリ。 webliker.info …

HTML＆CSS③ レスポンシブデザインに対応するための基礎知識 メディアクエリとは？ ブラウザの画面サイズに応じてCSSのスタイルを適用できる手法 メディアクエリの書き方 @media(条件){…} 条件を満たしているときのみそのスタイルが適用される。 条件には、ma…

HTML&CSS② ～HTML～ <header></header>と<footer></footer> ヘッダーとフッターはクラスが予め用意してある。 CSSで使うときは「.」が不要。 ～CSS~ 背景画像を指定…background-image background-image : url(xxx.png); 背景画像の大きさを指定…background-size contain…縦横比を崩したり画像を…

HTML&CSS① 学んだことを忘れないようにメモメモ ～HTML～ 見出し…<h1>～<h6> 見出しは<h1></h1>～<h6></h6>までの要素を使用する。 ※ブロック要素 段落…<p> 段落は<p></p>要素を使用する。 ※ブロック要素 コメント… コメントはを使用する。 リンク…<a> <a href="URL">表示させたいテキスト</a> ※インライン要素 画像表</a></p></h6></h1>…

webの勉強(HTML,CSS)を始めたけれど、全然覚えられないのでアウトプットするためのブログという名の備忘録