FlexibleWebDesign2020cococara

デザインおよび動画制作、周辺知識の理解を深めていく日記から情報発信ツールになるように考…

FlexibleWebDesign2020cococara

デザインおよび動画制作、周辺知識の理解を深めていく日記から情報発信ツールになるように考えております☺️

JavaScript New7 jQuery New6

indexメソッド 変数の$の有無 変数の頭に$を付けるのはjQueryオブジェクトが格納されていることを示す。文字列や数値を格納する時は$を付けない。 e.g.) var slideIndex = $(' li ').index($(' .active ')); prevメソッドとnextメソッド 共通部分の関数化 = ”関数を定義する” ※JavaScriptの関数定義参照 e.g. ) const 定数名 = function () { まとめたい処理 };

FlexibleWeb…

    • JavaScript New6 jQuery New5

      eqメソッド jQueryオブジェクト中eqの引数の数字と同じインデックス番号の要素を取得 e.g.) $(' li ').eq(2).css(' color ', ' red ');

      FlexibleWeb…

      • JavaScript New5 jQuery New4

        jQueryの変数の代入について = jQuery処理の高速化&見やすい e.g.) $('div').css('color', 'red'); $('div').html('jQuery'); $('div').fadeOut( ); 何度もjQueryオブジェクト$('div')を使うのを避ける! var $div = $('div'); = $('div')を$divに代入して使い回す $div.css('color', 'red'); $div.html('jQ

        FlexibleWeb…

        • JavaScript New4 jQuery New3

          addClassメソッド removeClassメソッド ※クラス名の前にdot不要！ hasClassメソッド = 引数に指定したクラスを、オブジェクトが持っているか判定する アロー関数 function() = ()=> getMax関数 =3つの整数を引数の最大値を戻り値 ※明日、オブジェクトを変数に代入するところを復習！！

          FlexibleWeb…

        JavaScript New7 jQuery New6

        FlexibleWebDesign2020cococara

          JavaScript New3 jQuery New2

          配列の中のオブジェクトの値を取り出す = 配列[インデックス番号].プロパティ名 配列.length 「文字列の連結」 「+」記号を用いる 「テンプレートリテラル」 文字列の中で、${定数}、文字列全体をバッククォーテーション（`）で囲む $(document).ready(function(){jQueryの処理}); 省略形 = $(function(){jQueryの処理});

          FlexibleWeb…

          JavaScript New3 jQuery New2

          FlexibleWebDesign2020cococara

          JavaScript New2

          if(条件){(値);} if(){();} else ();} if(){();} else if(){();}else();} 「>」は比較演算子 「a === b」はaとbは等しい 「a !== b」はその逆 「かつ」は「&&」 「または」は「||」 switch文 = ある値によって処理を分岐する場合 switch(条件の値){ 処理 } switch(){case''": (); break; case"": (); break;} while文 = 繰り返し処

          FlexibleWeb…

          JavaScript New2

          FlexibleWebDesign2020cococara

          JavaScript New1

          余りの計算「%」 console.log(9 % 2); 1 変数とは・・ データ（値）の入れ物（箱）です。箱についている名前が「変数名」であり、箱の中に実際の値（文字列や数値など）が入っています。 letで定義 プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味 変数はクォーテーションで囲みません 変数を使うメリット3つ ◉同じ値を繰り返

          FlexibleWeb…

          JavaScript New1

          FlexibleWebDesign2020cococara

          jQuery new1

          $('セレクタ').メソッド(引数); ❶$=jQueryだよ ❷('セレクタ')=何を ❶+❷=jQueryのオブジェクトを作成 ❸.メソッド(引数)=どうするか イベント $('セレクタ').イベント名(function(){ }); = $('セレクタ').イベント名(function(){ $('セレクタ').メソッド(引数); }); CSSメソッド $('セレクタ').css('プロパティ名', '値'); HTMLメソッド $('セレクタ').text(

          FlexibleWeb…

          jQuery new1

          FlexibleWebDesign2020cococara

          復習と整理と追加4・・

          transition-duration プロパティ 変化が始まって終わるまでの時間を指定できるプロパティです。 transition-property プロパティ 変化を適用するプロパティを指定できるプロパティです。 transition-timing-function プロパティ 変化の度合いを指定できるプロパティです。 transition-delay プロパティ 変化が始まる時間を指定します。 transitionプロパティ・・ プロパティをまとめて指定できるショー

          FlexibleWeb…

          復習と整理と追加4・・

          FlexibleWebDesign2020cococara

          復習と整理と追加3・・

          コンサルとアドバイザリー・・ コンサル：特定の問題にたいしてソリューションを提供。専門的知識。自社ソリューション。短期的、限定的。 アドバイザリー：会社やチームなどの組織そのものに対するアドバイス。戦略的。相手に合わせたアドバイス。長期的。 復習・・ IT ICT IoT ITは「情報技術」を意味しており、コンピューターやインターネットなどを総称する言葉。 IT(Information and Technology)とICT(Information and Communic

          FlexibleWeb…

          復習と整理と追加3・・

          FlexibleWebDesign2020cococara

          復習と整理と追加2・・

          UIデザイン・・ ユーザがWebサイト・アプリをスムーズに使えるようにすること。 webデザイナー（ビジュアルデザイナー）は「装飾美」を、UIデザイナーは「機能美」をより重視する傾向。 ユーザーが考えなくても、それが何か分かるようにする。 -クリック（タップ）できることを明確にする -クリック（タップ）した後の挙動をユーザの想像どおりにする -どこに情報があるのかをわかりやすくする -ユーザがサイトのどこにいるかを明確にする -分かりやすい言葉を使う（言葉の意味を補足する

          FlexibleWeb…

          復習と整理と追加2・・

          FlexibleWebDesign2020cococara

          仮想サイト作成8・・

          ベンダープレフィックス・・ -ms-や-webkit-は、ベンダープレフィックスと呼ばれる、CSSのプロパティの拡張機能をさまざまなブラウザに実装するために付け加えられる接頭辞。 記述したプロパティが拡張機能であることを、各ブラウザに示すために使われる。 e.g) div { transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } Ref: Au

          FlexibleWeb…

          仮想サイト作成8・・

          FlexibleWebDesign2020cococara

          仮想サイト作成7・・

          z-index・・ z-indexは要素の重なりを決めることができるプロパティ position:static以外、relative、absolute、fixedが指定されている要素にしか使えない。 数値が大き方が上になる！ ヘッダーロゴとh1タグ・・ なぜヘッダーロゴにh1タグをつけるのか、不思議だったので調べてみました。 結論：厳密なルールはないようです。。 根拠： - ヘッダーロゴにh1タグを記載するメリットはほとんど無い。 - h1タグが大見出しを意味する以上、やは

          FlexibleWeb…

          仮想サイト作成7・・

          FlexibleWebDesign2020cococara

          復習と整理と追加1・・

          ボトムナビゲーション・・ スマートフォンで見た時に画面の下の方に固定されているメニューのこと。 レスポンシブ 対応では、ハンバーガーメニューが依然多いようですが、最近はボトムナビゲーションにする方がユーザーにストレスを感じさせずによりページの回遊率を高めることができるということで、使う方が増えてきているそう。。 Tips・・ clampプロパティ・・ CSS の関数で、値を上限と下限の間に制限します。 clamp() によって定義された最大値と最小値の間の値を選択するこ

          FlexibleWeb…

          復習と整理と追加1・・

          FlexibleWebDesign2020cococara

          復習/Portfolio1

          トーンカーブ（基礎）・・ 直線を基準として、カーブが直線より上側にあれば明るくなり、下側にあれば暗く変換されるグラフ。 「X軸＝入力画素値（定義域0～255）」 「Y軸＝出力画素値（値域0～255）」 ヒーローイメージ・・ 通常はページの上部、ウェブページのヘッダーセクションに固定された大型のWebバナーイメージ。ホームページにおいて、ページのファーストビューで大胆に配置された画像や動画のこと。 Webサイトの内容と目的を一瞥で理解できるようにしなければならない。 そのため

          FlexibleWeb…

          復習/Portfolio1

          FlexibleWebDesign2020cococara

          仮想サイト作成6・・

          ハニカム構造・・ 英語で「Honeycomb：ハチの巣」という意味で、正六角形または正六角柱を隙間なく並べた構造のこと ハニカム構造は軽くて強度があり、また音や衝撃を吸収できて断熱効果もあるという理由から、現在では飛行機の翼や駅のホームにある落下防止ドア、新幹線、建造物などの構造材料としても幅広く利用されています。 ①軽量性 ②高剛性 ③疲労特性 ④表面平滑性 ⑤衝撃吸収性 ⑥断熱性 ⑦消音特性 黄金比（おうごんひ、英語: golden ratio）・・ 1:1.61803

          FlexibleWeb…

          仮想サイト作成6・・

          FlexibleWebDesign2020cococara