求職者支援訓練12月19日開講Webサイト制作科 白描

求職者支援訓練12月19日開講Webサイト制作科補足メモ Web白描

02/23 モバイルファーストで記述 - 復習

モバイルファーストで記述 - 復習 IKEBUKURO COFFEE池袋珈琲 トップ メニュー 店舗 こだわり IKEBUKURO COFFEE ドリップコーヒーの2倍コーヒーを使い、丁寧に入れたアイスコーヒーをご提供しています。 おすすめメニュー カフェラテとスイーツ 好評のカフェ…

02/22 アコーディオンパネル

アコーディオンパネル slideDown / slideUp displayがblockに、noneに変化する途中のアニメーション効果 アルゴリズムフロー 開いているパネルをすべて閉じる タブをクリックするとパネルが開く <script> $(function(){ $('dd').hide(); $('dt').on('click',function</script>…

02/21 実践的なメソッド

hide()・show() hide():表示されている要素を非表示にする show():非表示されている要素を表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery - hid</title></meta></head></html>…

02/20 thisキーワード と readyイベント

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

02/19 イベント

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

02/18 HTML/CSSを操作する

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

02/17 jQueryとは

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

02/16 Photoshop jsxファイルを編集

Photoshop jsxファイルを編集(2019 Mac) Export Layers To Files.jsx レイヤー名をファイル名として書き出すスクリプト jsxファイルの場所 「アプリケーション」→「Adobe Photoshop CC 2019」内の「Presets」(プリセッツ) 「Presets」内「Scripts」(ス…

02/15 モバイルファーストB・C

モバイルファースト スマートフォン→PC Fluid Grid (フルードグリッド) 例B 例C <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン(基本形)</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

02/14 モバイルファーストA

モバイルファースト スマートフォン→PC Fluid Grid (フルードグリッド) 例A @charset "UTF-8"; /* reset ----------------------- */ html,body,h1,p,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul,li { list-style: none; } a { text-decoratio…

02/13 復習 - レスポンシブWebデザイン

モバイルファーストでレスポンシブに モバイルファーストで記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルファーストで記述</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="page-header"> <div class="box boxA">A</div> </header> <main class="main-content"> </main></body></html>

02/12 復習 - Javascript基礎

Bracketsの「en」を「ja」に変更する 「en」を「ja」に変更する Brackets (Win) メニューの「ヘルプ」>「拡張機能のフォルダーを開く」(extensionsフォルダーが開きます) extensions¥user¥brackets-emmet¥node_modules¥emmet¥lib¥snippets.json (C:¥User…

02/11 Math関数を使った計算

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

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

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

02/09 演習問題 consoleに出力・id名の位置に上書き

consoleに出力 console.log() 偶数・奇数の判別 <script> var num = prompt('1以上の半角数字を整数で入力してください。'); var str = ''; if (num%2 === 0) { str = num+ 'は偶数です'; console.log(str); } else { str = num+ 'は奇数です'; console.log(str); } </script>…

02/08 条件分岐 - if文

ifで枝分かれ ユーザーが入力したパスワードが正しかったらこの処理をさせ、間違っていたらこの処理をさせたいなど、ある判定の結果によって処理を枝分かれを作るときに「if」を使います if(判定したいこと) { 判定結果が正しいときにやりたい処理;判定結果…

02/07 DOM とは

DOM(Document Object Model) JavaScriptでWebページを扱う仕組み WebブラウザがHTMLを読み込むと、レンダリングエンジンという機能が解釈してWebページを表示します Webページの中の各部品を「要素(element)」といい、この要素をJavaScriptで操作します …

02/06 演算子とは

式(expression) JavaScriptの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算…

02/05 変数を使った記述

変数を使った記述 変数を使って処理を実行(出力) Consoleで記述 連結演算子 文字列通しを「+」で連結します 連結のどちらかに数値が含まれ場合も、結果かは文字列になります 「+」のときのみで、それ以外は文字列の数字も数値として計算されます ;(セミコ…

02/04 変数とは

変数 変化するもの(値が変化する器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰り返し使う言葉は「…

02/03 JavaScriptの記述とコンソールへ出力

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

02/02 JavaScriptを学ぶ準備

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScript 「ジャヴァ」ではなく、「ジャバスクリプト」です 「Java(ジャヴァ)」は、別の言語なので間違わないようにし…

02/01 flexboxアイテムのプロパティ

flexboxアイテムで指定できるプロパティ order:並び順 .itemA{ order: 4; } .itemB{ order: 1; } .itemC{ order: 3; } .itemD{ order: 2; } flex-grow:伸び率 flexコンテナーの幅に余りがある場合にflexアイテムの伸び率を他のflexアイテムとの相対値(整…

01/31 Flexboxを使ったレイアウト - 実践

Flexboxを使ったレイアウト - 実践 コンテンツ幅(960px)固定値で設定 <html lang="ja"> <head> <meta charset="UTF-8"> <title>池袋珈琲</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet"> <link rel="stylesheet" href="css/sample.css"> …</link></link></meta></head></html>

01/30 習熟度確認試験 - CSS

CSSの記述 class名の付与 レイアウトに必要なブロックに名前をつけてCSSを適用しやすくします <header class="page-header"> <div class="container"> <h1><span class="star">★</span>うちのにゃんこ<span class="star">★</span></h1> <p class="lead">我が家のアイドル、にゃんこ達を紹介します!</p> <nav class="gnav"> <ul> <li><a href="#">我が家のにゃんこ紹介</a></li> <li><a href="#">飼い主紹介</a></li></ul></nav></div></header>

01/29 習熟度確認試験 - 文書構造

習熟度確認試験 以下の完成例のように作りなさい HTMLが正しい文法の記述である 適切なグループ化がされている 外部CSSファイルが適切に読み込まれている 必然性のあるリセットが記述されている レイアウトが完成例のように適切な空きで表示される ナビゲー…

01/28 演習課題 - うちのにゃんこ

演習課題 テキストP.020〜033 <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> </meta></head></html>

01/27 SVGを表示

SVG Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス) XMLベースの、2次元ベクターイメージ用の画像形式の1つ アニメーションやユーザインタラクションもサポートしている SVGの仕様はW3Cによって開発され、オープン標準として勧告され…

01/26 1カラムレイアウト

1カラムレイアウト Responsive Web Design HOME ITEM ABOUT INFO Flexible box のコンセプト flex レイアウトを定義するねらいは、アイテムの幅や高さを、任意のディスプレイデバイスで使用できる領域を最適に埋めるように変更する能力です。 flex コンテナ…

01/25 Flexboxを使ったレイアウト - 基本形

Flexboxを使ったレイアウト - 基本形 %で指定 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったレイアウト</title> <meta name="viewport" content="width=device-width"> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; } html { font-size: 62.5%; } body { background: #FFF; font-s…</meta></meta></head></html>