2021-01-01から1年間の記事一覧
カフェサイトのコーディング練習 webdesigner-go.com 記述例 - 参考サイト例との違い モバイルファーストで記述 リセットCSSは、独自CSS内に記述 コーディンは、アウトラインのツリー構造を意識しながらマークアップ クラス名は、ほぼ参考ページと同様に設定…
MixItUp - フィルター フィルターをかけることができるjQueryプラグイン www.kunkalabs.com ポラロイド風写真の作り方 HTML文書構造を記述 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>MixItUp - フィルター</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…
slick kenwheeler.github.io [prev][next]ボタンの大きさ・位置は微調整必要 <html lang="ja"> <head> <meta charset="UTF-8"> <title>カルーセルスライダー：slick</title> <link rel="stylesheet" href="css/slick-theme.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/style.css"> </head> …</html>
モーダルウィンドウ コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの Lig…
bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></link>
アコーディオンパネル 縦・横の限られたスペースに複数のコンテンツを繰り返し表示させたいときに利用する HTMLの構造 すべての要素を表示 GoogleMapのiframeは、最後に挿入 class名、id名は適宜追加します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQueryを使ったコーディング演習</title> </meta></meta></head></html>
thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…
イベントが発生した要素を取得 サムネイルをホバーしたとき メイン画像の「src」と「attr」の値を取得して 指定された値に置き換える（スワップイメージ） <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスによる画像置換</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <p><img src="img/00.jpg" alt="" id="mainImg"></p>…</div></body></html>
イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の２種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…
hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が１秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…
HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する（セレクター） 操作する内容（命令） jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…
jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート（ブラウザ依存を気にしなく…
DOM（Document Object Model） JavaScriptでWebページを扱う仕組み WebブラウザがHTMLを読み込むと、レンダリングエンジンという機能が解釈してWebページを表示します Webページの中の各部品を「要素（element）」といい、この要素をJavaScriptで操作します …
random関数 Math.random() 関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します 乱数の発生 「random()」は、「0以上１未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダ…
反復 処理を繰り返す for文 繰り返し文 英語で輪を意味する「loop（ループ）」とも呼ばれます 指定した回数だけ処理を繰り返す（回数が決まった繰り返し） 変数「i」の初期値（「i」は、indexの意） 処理を１回実行するたびに、変数「i」の値をどのように変…
配列とは 配列とは、同じ用途で用いる複数の変数を１つにまとめたもの 配列は要素の集合体 配列は変数の集まりによって構成されます 個々の変数のことを「要素」と呼びます 各要素を識別するために「インデックス」と呼ばれる番号（０から始まる整数値）が割…
Dateオブジェクト - 状況に応じた処理 日付を取得して表示 組み込みオブジェクト 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧…
JavaScriptの条件分岐 if文とは 「if」の文字が表すように「もし〜だったら、〜を実行する」といった条件分岐を行う構文となります if (条件) { //条件がtrueだった場合に実行する処理 } ifの基本ルール if文は、真偽値(true or false)を元に処理の振り分け…
ダイアログボックスを使った記述 ３種類のダイアログボックス 項目コード 警告alert() 確認confirm() 入力prompt() メッセージを表示するダイアログボックス alert( メッセージ ); ユーザーに確認を求めるダイアログボックス confirm( メッセージ ); 変数 = …
式（expression） JavaScriptの式の多くは、 演算子（operator）：演算するもの オペランド（operand）：演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算…
JavaScriptで扱えるデータの種類 変数の型 データ型 primitive型（基本型） object型（参照型） primitive型（基本型） 文字列（String） 数値（Number） 真偽値（Boolean） undefined null 項目項目の意味説明 number数値整数、少数、正負などの数値を扱う …
変数 変化するもの（値が変化する器） 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉（文字列）や数字（数値）を一時的に保存する「箱」 繰り返し使う言葉は「…
JavaScriptの記述 テキストエディター「VS Code」を使用します 書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつ…
プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム（アルゴリズム）」を考えるのは人間 プログラミング言語の種類 コンパイル型（プログラムを実行する前に、機械が読める言語（0と1のデータ群）に翻訳する言語…
