INSERT UPDATE DELETE INSERT INSERT INTO shipments(product, price) VALUES ("マフラー", 1500); INSERTを用いることで、テーブルにレコードを挿入することができます。 「INSERT INTO テーブル名 (カラムA, カラムB)」のカラムの値を「VALUES (値1, 値2)…
サブクエリ AS JOIN LEFT JOIN 実行順序 サブクエリ SELECT user FROM players WHERE score > ( SELECT score FROM players WHERE user = "タケシ" ); サブクエリとは、クエリの中に入っているクエリのことです。 実行順序は、「サブクエリ」→「クエリ」です…
DISTINCT 四則演算 SUM関数 AVG関数 COUNT関数 MAX・MIN関数 GROUP BY HAVING DISTINCT SELECT DISTINCT(カラム名) FROM morning; 「DISTINCT(カラム名)」と記述すると、指定したカラムの重複するデータを除くことができます。 四則演算 SELECT category, pr…
データベース SELECT FROM WHERE データ型 比較演算子 LIKE演算子 ワイルドカード NOT演算子 NULL AND演算子 OR演算子 ORDER BY LIMIT SQL（エスキューエル）とは、データベースに送るクエリ（命令）を書くための言語です。拡張子は「.sql」です。 データベ…
概要 入れ子構造 &（アンパサンド） 変数 @mixin @include 引数 関数 import 概要 Sass（サス）とは、CSSをより効率的に書くことのできる言語です。具体的にはCSSより記述を減らしたり、コードを再利用することができます。 SassにはSASS記法とSCSS記法の2種…
git init git add git commit git remote add git push git pull git status git diff git log git log -p Gitとは、ソースコードを始めとするファイルの変更履歴を管理するシステムです。Gitを使うことで共同開発をスムーズに進めることができます。Gitはタ…
touchコマンド catコマンド mkdirコマンド カレントディレクトリ cdコマンド ルートディレクトリ pwdコマンド lsコマンド ホームディレクトリ mvコマンド cpコマンド rmコマンド コマンドラインとは、コマンド（命令）を使うことで、コンピュータに様々なプ…
メソッド pushメソッド forEachメソッド findメソッド filterメソッド mapメソッド コールバック関数 直接定義 メソッド メソッドとは、オブジェクトに関連付けられた関数のことです。 以下、配列を操作するメソッドについてアウトプットしていきます。 push…
ファイルの分割 エクスポート インポート デフォルトエクスポート 名前付きエクスポート 相対パス パッケージ ファイルの分割 ファイルを分割する際は、それぞれのファイルを関連付け、値を渡す必要があります。 エクスポート export default クラス名; 「ex…
クラス インスタンス コンストラクタ this 引数 メソッド 継承 オーバーライド クラス クラスとは、設計図の役割をします。オブジェクトを効率良く量産するために予め設計図を用意して、それをもとにデータ生成をしていくことができます。 class User {} ク…
関数 アロー関数 引数 複数の引数 戻り値 スコープ 関数 const 定数名 = function() { // まとめたい処理 }; 関数とは複数の処理をまとめたものです。上記の式で関数を定義します。 定義した処理内容は、定数に代入されています。 関数は定義しただけでは実…
配列 インデックス番号 要素の更新 配列とfor文 lengthメソッド オブジェクト 要素の更新 オブジェクトを要素に持つ配列 undefined 配列 ["値1", "値2", "値3"] [10, 20, 30, 40, 50] 配列は複数の値をまとめて管理できます。それぞれの値を要素と呼びます。…
while文 無限ループ for文 計算式の省略 実践 繰り返し処理とは、同じ内容を繰り返し行う処理です。 同じ処理のコードを毎回記述せずにまとめることができます。 while文 while (条件式) { // 処理 } 繰り返し処理を行うためにはwhile文を使います。 条件式…
if文 真偽値 比較演算子 else else if 論理演算子 switch文 default 条件分岐とは、ある条件が成り立つときだけ実行するプログラムのことです。 「もし〇〇なら〇〇を行う」という処理です if文 if (条件式) { // 処理 } 条件分岐にはif文を使います。if(条…
概要 プログラムの実行 console.log コメントアウト 数値と計算 四則演算 剰余 文字列の連結 変数 代入演算子 再代入 自己代入演算子 命名規則 定数 テンプレートリテラル 概要 JavaScriptは、ブラウザに動きを付けたり、画面を更新せずにサーバーと通信した…
display: flex; flex: auto; flex-wrap: wrap; flex-direction flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-content justify-content: flex-start; justify-content: flex-end; ju…
レスポンシブデザイン メディアクエリ（Media Queries） @media ブレイクポイント viewport box-sizing: border-box; display: none; fioatの解除 実践 asanokai.html style.css responsive.css ブラウザ（結果） レスポンシブデザイン レスポンシブデザイン…
ランディングページ 新たに登場したプロパティ background-image background-size margin: 0 auto; opacity letter-spacing display border-radius text-decoration text-align transition line-height font-weight position position(2) z-index box-shadow…
ランディングページ ブラウザ GIF HTML CSS 構成 解説 ランディングページ ランディングページとは、サイトを訪問したユーザーが一番最初に目にするWebページです。実際に作ったので記述をご確認下さい。 （記述はProgateを参考にしています） ブラウザ GIF …
メイン作成 span要素 お問い合わせフォーム input要素 textarea要素 type属性 value属性 前回に引き続き、今回はWebページのメイン部分の作成を行います。 ヘッダー・フッターの記述はこちらの記事をご覧ください。 morning-output.hatenablog.com ▼ブラウザ…
ヘッダー作成 list-style float フッター作成 ボックスモデル border padding margin まずは完成形のコードとブラウザ画像をご参照下さい。 ▼HTML <html> <head> <meta charset="UTF-8"> <title>朝活アウトプット</title> <link rel="stylesheet" href="style2.css"> </head> <body> <header> <div class="header-logo">朝活 -Asakatsu-</div> </header></body></html>
HTMLのレイアウト div要素 header要素 footer要素 レイアウト構造 入れ子構造 親要素と子要素 ブロックレベル要素 インライン要素 HTMLのレイアウト HTMLはhead要素とbody要素で成り立っています。 レイアウトはbody要素内で構成します。 ▼HTML <html> <head> <meta charset="UTF-8"> <title>朝活アウ</title></meta></head></html>…
HTMLの構造 DOCTYRE宣言 html要素 head要素 body要素 head要素に記述する内容 meta要素 title要素 CSSの読み込み body要素に記述する内容 HTMLの構造 HTMLには、決められた型があります。 html要素の中にhead要素とbody要素の2つを記述します。 <html> <head> </head> <body> </body> </html> DOC…
概要 記述に必要な知識 プロパティ color font-size font-family background-color width、height class 補足 コメントアウト 概要 CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLの要素を装飾するためのスタイルシー…
概要 タグ 要素 h要素 p要素 a要素 img要素 li要素 補足 コメントアウト 概要 HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、 Hyper Textが「テキストを超えた」という意味で、Markup Languageがマークアップ…
