タイマーを使って一定時間ごとに動かす

タイマーを使って一定時間ごとに動かす タイマーを使う setTimeout関数(一定時間後に、指定した処理を1回実行します) setInterval関数(一定時間ごとに、指定した処理を繰り返し実行します、やめるときには、clearInterval関数を実行します) <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を</title></meta></head></html>…

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

ページトップへ移動するアニメーション

ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( window ).scroll( function () { if ( $(this).scrollTop() > 100 ) { top…

デザインワークフロー

Webサイト制作のワークフロー phase フェイズ(フェーズ) システム開発やプロジェクトマネジメントにおいて、プロジェクトの各段階や工程のこと オリエンテーションとヒアリング オリエンテーションは仕事の始まり、クライアントの意向を知るスタートライン…

課題制作のテーマ

制作する目的 企業系 コミュニティ 個人 サービスの提供 商品の販売 クーポン 相談(法律など) 情報の告知 企業の紹介 お店の紹介 製品の紹介 イベントの紹介 イメージを印象づける(ブランディング) 人との交流 ソーシャルネットワークサービス ユーザー…

プランニング

ヒアリング あくまでもなごやかに、おだやかに 相手が話しやすいのは、ホームページのことではないと心得る 相手に考えさせてはいけない 仕事や環境のことを話しながら、ホームページへのヒントをこちらが見つけ出すこと ホームページに盛り込むテーマは、相…

THAI-NAMA

THAI-NAMA THAI-NAMA CONCEPT MENU ACCESS CONTACT 生春巻き THAI-NAMAは タイ風の家庭的な料理をご提供しているお店です。 季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。 NEWS 2018/05/25 夏のメニューを追加しました CONCE…

タブパネル - 実践

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

縦の動き slideDown / slideUp / slideToggle

slideDown / slideUp displayがblockに、noneに変化する途中のアニメーション効果 <html lang="ja"> <head> <meta charset="utf-8"> <title>アコーディオンパネル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

jQuery基礎 - まとめ

jQueryとは Javascriptのライブラリ ライブラリとは、汎用性の高いプログラムを再利用可能な形でまとめたもの jQuery DOMの操作(HTML要素の操作)をよりシンプルに記述可能 ブラウザごとの細かな挙動の違いを吸収 アニメーションに便利な関数を利用可能 Aja…

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…

thisキーワード と readyイベント

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

イベント

イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…

HTML/CSSを操作する

HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する(セレクター) 操作する内容(命令) jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…

セレクタの使い方

最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

はじめてのjQuery

はじめてのjQuery Web制作の現場で使えるjQuery UIデザイン入門 ascii.jp Progate prog-8.com ドットインストール Google jQuery CDN developers.google.com jQuery CDN 3.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2.x snippet:

jQueryとは

jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなく…

DOMを使用したアニメーション

エレメントの位置を変更する DOMを使用したアニメーション エレメントの表示位置を、top(上端)、left(左端)プロパティで設定します エレメントの配置位置を、positionプロパティでデフォルト設定値「static」以外に設定しておく <html lang="ja"> <head> <meta charset="UTF-8"> <title>アニメーション</title> <style> #ca</meta></head></html>…

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

イベントハンドラの設定

HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…

配列の添字を活用する

曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成 曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日~土曜日」を「…

配列はArrayオブジェクト

配列とは リストのこと いくつかの情報を番号と一緒に保管するためのもの 「配列」とは、添字(そえじ)と呼ばれる番号を用いて、1つの変数名で複数のデータをまとめて管理できるようにしたもの 配列 - マンガで分かる JavaScriptプログラミング講座 配列は…

random関数

乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

Math関数を使った計算

Mathとは Mathとは「数学(Mathematics)」の意味 数値演算に便利なメソッドやプロパティが利用できるオブジェクト まえもってインスタンスを生成する必要はありません スタティックメソッド(インスタンスを生成しないで関数のように使用できる) Math . メ…

Dateオブジェクト - 状況に応じた処理

Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される JavaScript の日時は、UTC の 1970 年 1 月 1 日 0 時からのミリ秒としてで計られ…

組み込みオブジェクト

組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》オブジェクト名 説明 Object すべてのオブジェクトの…

求職者支援訓練 フェリカテクニカルアカデミー