2020-09-01から1ヶ月間の記事一覧
メソッド 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…
