［CSS3］ トランジション / アニメーション / トランスフォーム トランジション（transition） 動かすために:hoverなどのきっかけが必要 実行後に元のプロパティ値に戻る 比較的簡単な記述で動かす事が可能 アニメーション（animation） transitionより細か…

［CSS］ レスポンシブウェブデザインの練習 ruby要素 / 縦書き ［作成例］

［CSS］レスポンシブウェブデザイン スマートフォンに最適化する（ex 『Google Mobile-Friendly Website』） レスポンシブウェブデザインpcとpsをひとつのファイルで管理する 動的な配信.htaccesspcとpsで別々のデータを用意するpcとpsで自動的に互換性をも…

［jQuery］ アニメーションの基本的な考え方 現在（CSS）→ミリ秒後（jQueryでDOMの操作） show(),hide()メソッド・display(block/none)の操作・現状（初期値()）からdisplay(block/none)に向かってアニメーション animate()メソッド・独自のパラメータ（仮引…

［jQuery］ jQueryを使う必然性は？ 狭い画面のなかで多くのコンテンツを見せる 見る側が積極的に情報を手に入れたいと思えるように面白みを与える ［作成例］ カルーセルパネル モーダルウィンドウ ［Today's viewpoint］ ランディングページはリピーター用…

［jQuery］ 日本語で説明できるようイメージしながら勉強する 書き換えをしながら覚える 様々な書き方を検証する 実行速度を意識する セレクタの使い方を工夫する・セレクタは、固有名詞、具体的に指定する・セレクタは、シンプルに書くex）次の書き方は同義…

［jQuery］アコーディオンメニュー jQueryを記述するその前に… jQueryはHTML、CSS、jQueryの3点セット プログラム外で制御できるものはプログラム外に記述する 可変しないものはCSSに記述する 可変するものはjQueryで指定する 仕様（スペック）＝モノの動か…

［viewpoint］SEOを知る Google SearchConsole Google SearchConsoleに登録することから始まる 検索エンジンがページを呼び込みにきているかどうか確認する 使用する機能 クロールエラー クロールの統計情報 robots.txtテスター サイトマップを追加する 新規…

［Flash］ 画像処理 コーディング オブジェクト指向（ブラウザのデータを軽くする） ・ライブラリ（オブジェクト） ・ステージ（インスタンス） ActionScriptでthisはステージを指す（神様の視点）。thisはいろいろな環境のなかで使い回しができる jQueryでt…

［jQuery］ jQueryの習得で大事なことは結果を想像すること 値を取得する 取得した値をメソッドで実行 prepend / append / before / after attr()：属性に値を設定、または設定されている値を取得する return false：clickイベントを実行した後にリンク先に…

［jQuery］jQueryを知る jQueryの主な特長 JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート（ブラウザ依存を気にしなくてよい） jQueryのバ…

［JavaScript］ Styleオブジェクト 要素の style 属性に相当するオブジェクトを返す ［作成例 その１］ var 変数(id名を取得) = document.getElementById(''); ［作成例 その２］ ［作成例 その３］ デジタル時計を表示する ［Today's viewpoint］ JavaScrip…

［JavaScript］ DOM（Document Object Model） HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能 XSS（Cross Site Scripting）脆弱性 攻撃者…

［JavaScript］ Locationオブジェクト WebページのURLを情報としてもつオブジェクト hrefプロパティの値に別のWebページのURLを入力する ［作成例］ setTimeoutメソッド あらかじめ指定した時間後に、指定した処理を行わせる 一定時間ごとに同じ処理を繰り返…

［JavaScript］ Dateオブジェクト 日付、あいさつを表示する（if文・配列オブジェクトを使う） ［作成例］ Dateオブジェクト 数値演算に便利なメソッドやプロパティが利用できるオブジェクト Math . メソッド名（引数１, 引数２, ・・・） Math.random()：０…

［JavaScript］ function文を使って関数を定義する ［作成例 その１］ ［作成例 その２］ ［作成例 その３］ parseIntを使って文字列を数値にする ［作成例 その４］ 変数のスコープ（有効範囲）を確認してみる 関数の中で使われた値は関数の外に出すことが…

［HTML5］ HTML5のOutline構造を正しく記述する 『HTML 5 Outliner』 https://gsnedders.html5.org/outliner/ 『HTML5 Outliner』 Chromeの拡張機能を利用 HTML5 h(見出し) + p(段落) ［作成例］ ［CSS］ 配色理論を理解する ・可読性を考える × 背景色が濃…

［JavaScript］ プログラミング思考を学ぶ プログラムはコンピューターが計算しやすいように書く（効率性 ［作成例 その１］ 1～100までの合計をダイアログボックスに表示させる 入力した数字までの合計を求めて表示させなさい。 ［作成例 その２］ 入力した…

[JavaScript] プログラムとは？ メモリ（RAM：RandomAccessMemory）で起こっていること 順次 分岐 反復（ループ） ＊配列：変数のルール 1. 配列（Array） レコードに記録されたものを取り出す ［作成例］ .length：配列が保持する要素の数を表す 2. 二次元…

［HTML5 / CSS］ 『Progate』 『CODEPREP』を使って復習する 忘れているもの、見落とし…などをまとめる ・transition : 滑らかに変化させる属性( width, height など) linear 秒数(s) ; linear：速度は変わらない ease:：ゆっくり始まりゆっくり終わる ease-…

［JavaScript］ onMouseOver/onMouseOutとswapを使用してみる ［作成例］

［JavaScript］ 課題：3の倍数を判別するプログラムを記述しなさい ボタンを押したら実行するように設定 初期値：var if(){ } else { } 出力：〜は、3の倍数です。〜は、3の倍数ではありません。 ＊memo 遭遇したエラー missing ) after argument list. 原因…

［HTML / CSS］ ワークフローの再確認 1. ディレクトリ・パス（大前提として、PCを正しく管理できるか？） フォルダ名・ファイル名（日本語禁止！）の管理をできているか？ レギュレーション（ガイドライン）に従う （レギュレーション：ある一定のルールに…

［Today's viewpoint］ タイピングの練習は毎日１５分 ［JavaScript］ JavaScriptの要点 順次 分岐（if,switch） 反復（while,for） ［Illustrator］ Illustratorの練習は毎日６０分。初心者はトレースをひたすら練習する Illustratorの要点 選択 描画 選択 …

[JavaScript] JavaScriptの基礎復習 基本的なメソッドの使い方を覚える windows.document（ブラウザーに文字を表示させる） JavaScriptで文字列を表示するには、「window.document.write( )」を使う 表示したい文字列をシングルコートではさむ 「window.」は…

［HTML5］ HTML5でdivタグにidではなくclassを指定する必然性 idはタグにひとつしか割り当てられない j-Qureyを書く際、idを指定して命令をかける CSSを書く際には、classを指定して命令をかける （使用例 クラス名がふたつある場合）div class="box one"div…

caption：テーブルの表題 border-collapse：重なっている線が１本線に見える rowspan="2" colspan="2"

［JavaScript］ JavaScriptのワークフロー 記述ルール 演算 出力 JavaScriptの基本構文 （１）document.write( 変数 ); 変数で指定した文字列を表示する （出力） ブラウザに表示 コンソールに表示 ダイアログボックスに表示 （２）変数 =prompt('文字列','…

JavaScript / ActionScript / ECMAScript(JavaScriptの標準型) 基本構文 順次 分岐 繰り返し 変数の型 変数の考え方は一次方程式による 命令：x+y=z 初期値：x=0 y=0 出力 トレース文(命令文・トレースメソッド) trace( ); ( );：コンピューターに指示を出す…