自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事 吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェ
|
|
|
- つかさ おおふさ
- 7 years ago
- Views:
Transcription
1 OSC 2017 Tokyo / Fall HTML5 プロフェッショナル認定資格レベ ル 1 ポイント解説セミナー 2017 年 9 月 9 日 ( 土 )@OSC 2017 Tokyo / Fall 吉原健株式会社フォーク
2 自己紹介 Web 専門学校を卒業後 2015 年に新卒で株式会社フォーク入社 HTML/CSS/JavaScript を用いた幅広い Web サイト制作業務に従事 吉原健 24 歳 (1992/12/24) 2016 年 12 月に HTML5 プロフェッショナル Lv1 取得 HTML5 プロフェッショナル Lv2 取得に向け学習中 2
3 会社紹介 渋谷 札幌 ( HTML5 アカデミック認定校 ) 従業員数 :161 名 (2017 年 8 月 24 日現在 ) 3 HTML5 プロフェッショナル認定資格 合格者 Lv1: 38 名 Lv2: 5 名 2017 年 8 月 22 日現在 研究開発サイト 4009.jp
4 本日解説する主な内容 1. HTML5プロフェッショナル認定資格とは 2. HTML5になって変わったこと 3. この資格をお勧めする理由 4. 試験概要 5. 試験のポイント 6. 学習方法 受験した感想 4
5 1. HTML5 プロフェッショナル認定資格とは HTML5 プロフェッショナル認定資格とは 5
6 1. HTML5 プロフェッショナル認定資格とは > 概要 HTML5, CSS3, JavaScript など最新のマークアップに関する技術力と知識を 公平かつ厳正に 中立的な立場で認定する認定資格 6
7 1. HTML5 プロフェッショナル認定資格とは > 資格体系 7
8 1. HTML5 プロフェッショナル認定資格とは > Lv.1 の対象職種 Web デザイナー グラフィックデザイナー フロントエンドプログラマー HTML コーダー Web ディレクター Web システム開発者 スマートフォンアプリ開発者 サーバサイドエンジニア HTML コーダー / フロントエンドプログラマーだけではない 8
9 1. HTML5 プロフェッショナル認定資格とは > Lv.1 取得に求められるもの HTML5を使って静的なWebコンテンツを制作することができる ユーザー体験を考慮したWebコンテンツを設計 制作することができる スマートフォンや組み込み機器など ブラウザが利用可能な様々なデバイスに対応したコンテンツ制作ができる HTML5で何ができるのか どういった技術を使うべきかの広範囲の基礎知識を有する 9
10 1. HTML5 プロフェッショナル認定資格とは > 人気のある資格 今後取得したい資格 の項目で No.1!! 今後取得したいベンダーニュートラル資格 で HTML5 プロフェッショナル認定資格 が 1 位 LPIC が 2 位となった 現在必要なスキル分野というだけでなく 今後伸び続けるスキル分野として HTML5 プロフェッショナル認定資格 が高く評価されていることの証といえる 出典 スキル調査 アイティメディア株式会社 10 調査期間 2015/9/ /11/2 有効回答数 1,064 件
11 1. HTML5 プロフェッショナル認定資格とは > Web 資格の中で最も求められている理由 様々な分野で HTML5 が活用されている 多くの技術者が習得したい!! 11
12 2. HTML5 になって変わったこと HTML5 になって変わったこと 12
13 2. HTML5 になって変わったこと > 概要 HTML4.01 では実現が難しかったウェブアプリケーションの構築が容易になり 文書構造を明確に書けるようになった 動画や音声をシンプルに扱えるようになった 新たな属性が増え フォーム周りの機能が強化された 文書構造を表すタグが増え 明確な文書構造を示すことができるようになった 様々な API が追加され 高度な機能を持ったウェブアプリケーションを構築できるようになった など 13
14 2. HTML5 になって変わったこと > DOCTYPE 宣言 HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML5 <!DOCTYPE html> 14
15 2. HTML5 になって変わったこと > 廃止されたタグ 属性 廃止されたタグ ( 抜粋 ) <blink> 文字の点滅 <big> 大きめの文字 <center> テキストや画像等のセンタリング <strike> 取り消し線 廃止された属性 ( 抜粋 ) <h1> - <h6> <img> <table> <input> align longdesc, name, align, border, hspace, vspace summary, width, frame, rules, cellspacing, cellpadding, align, bgcolor align, usemap, ismap 15
16 3. この資格をお勧めする理由 この資格をお勧めする理由 16
17 3. この資格をお勧めする理由 > Web ディレクター Web ディレクター デザイナー サーバサイドエンジニア フロントエンドエンジニア 17
18 3. この資格をお勧めする理由 > Web ディレクター 実現可能になった技術を把握し 顧客に対してより具体的な提案 ができるようになる エンジニアに対して説得力のある提言ができるようになる コミュニケーションが円滑になり スムーズに仕事を進めることができるため 非技術者であってもビジネススキルを向上させることができる 18
19 3. この資格をお勧めする理由 > デザイナー Web ディレクター デザイナー サーバサイドエンジニア フロントエンドエンジニア 19
20 3. この資格をお勧めする理由 > デザイナー レスポンシブ Web デザインにおける実現方法をイメージしながら デザインできる アニメーション等の演出の実装イメージがつく エンジニアの作業を具体的にイメージしながらデザインを検討することができる 演出の実現の可否の判断も可能 20
21 3. この資格をお勧めする理由 > サーバサイドエンジニア Web ディレクター デザイナー サーバサイドエンジニア フロントエンドエンジニア 21
22 3. この資格をお勧めする理由 > サーバサイドエンジニア フロントエンドとの連携が以前より複雑になってきている ( 動的な処理をサーバサイドで担うか JavaScript で担うか等 ) 最適な実装方法を導き出すには サーバサイドの人もフロントエンドの理解が不可欠 22
23 3. この資格をお勧めする理由 > フロントエンドエンジニア Web ディレクター デザイナー サーバサイドエンジニア フロントエンドエンジニア 23
24 3. この資格をお勧めする理由 > フロントエンドエンジニア ネットワークやサーバのWebの基礎知識を身につけることができる 曖昧な理解のまま書いていたコードを 正しい文書構造でマークアップすることができる フロントエンドのことだけではなく 周辺の基礎知識も身につけることができるので 知識の幅が広がる 明確な認識でマークアップすることができる 24
25 3. この資格をお勧めする理由 > まとめ チーム内での共通言語が持て さらに各々の知識の幅を広げることができるため コミュニケーションを図りやすくなる 25
26 4. 試験概要 試験概要 26
27 4. 試験概要 > 概要 試験実施方式 合否結果 試験方式はコンピュータベーストテスト (CBT) ほとんどの問題が選択式 試験終了と同時 所要時間 90 分 ( 機密保持契約とアンケートの時間を含む ) 問題数 合格ライン 約 60 問 約 7 割 受験料 15,000 ( 税別 ) 27
28 4. 試験概要 > 出題範囲 1.1 Webの基礎知識 1.2 CSS 1.3 要素 1.4 レスポンシブWebデザイン 1.5 APIの基礎知識 28
29 4. 試験概要 > 出題範囲改定について (Ver1.0 Ver2.0) 2017 年 3 月 1 日に出題範囲を改定 背景 HTML5 プロフェショナル認定資格 の提供を始めて約 3 年が経過し その間に HTML5 を取り巻く環境が変化した 適用分野の拡大 部分技術の陳腐化 新技術の盛り込み これらの変化に対応する目的で 出題範囲の一部をアップデート 29
30 4. 試験概要 > 出題範囲改定について (Ver1.0 Ver2.0) > 改定内容 レベル1 サーバ関連技術に関する出題が減少 クライアント系のみの仕事をされる方に配慮した内容に改定 HTML5で何が出来るかの知識やWebアプリの知識を問う問題が増加 認定者の対象として Webディレクターをより意識した内容に改定 レベル2 スマートフォン等の携帯デバイスへ対応ができる技術を出題範囲に追加 ネイティブアプリに近い機能を組み込んだ先端のWebアプリケーション開発に対応 セキュリティに関する出題範囲を追加 エンタープライズ利用に対応できるセキュリティモデルの知識を求める内容に改定 30
31 5. 試験のポイント 試験のポイント 31
32 5. 試験のポイント > 出題範囲 1.1 Webの基礎知識 1.2 CSS 1.3 要素 1.4 レスポンシブWebデザイン 1.5 APIの基礎知識 32
33 5. 試験のポイント > 1.1 Web の基礎知識 1.1 Web の基礎知識 範囲 重要度 HTTP, HTTPS プロトコル HTML の書式 Web 関連技術の概要 33
34 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル HTTP, HTTPS プロトコル 34
35 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル > HTTP 通信 HTTP 通信 ブラウザ 1 の情報ほしい!(HTTP リクエスト ) 2 の情報あげる!(HTTP レスポンス ) WEB サーバ ブラウザの開発者ツールで詳細を確認可能です 35
36 5. 試験のポイント > 1.1 Web の基礎知識 > HTTP, HTTPS プロトコル > HTTP, HTTPS の違い HTTP, HTTPS の違い https の s は Secure= 安全な という意味で データを暗号化した状態で通信しています 運営する側としては多少の予算がかかる場合がありますが ユーザーからの信頼性 セキュリティ向上といったメリットがあります 検索エンジンでは https か否かが SEO 評価に影響する動きを見せています そのため 入力フォームなどがない静的なサイトでも SSL を導入するケースが増えてきています 36
37 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 HTML の書式 37
38 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 > DOCTYPE 宣言 DOCTYPE 宣言 文書がどのバージョンの HTML や XHTML で作成されているかを示す記述です HTML5 ではとてもシンプルな書き方になりましたが ルールがあります ルール 基本形は <!DOCTYPE + 1 個以上のスペース + HTML + 0 個以上のスペース + > 大文字 小文字は問わない HTML は含まないといけない 38
39 5. 試験のポイント > 1.1 Web の基礎知識 > HTML の書式 > 文字コードの指定 文字コードの指定 値として utf-8, shift_jis, euc-jp などがあげれられます こちらも大文字小文字は問いません <meta charset="utf-8"> 39
40 5. 試験のポイント > 1.2 CSS 1.2 CSS 範囲 重要度 スタイルシートの基本 CSS デザイン カスケード ( 優先順位 ) 40
41 5. 試験のポイント > 1.2 CSS > スタイルシートの基本 スタイルシートの基本 41
42 5. 試験のポイント > 1.2 CSS > スタイルシートの基本 > セレクタ セレクタ たくさんの種類があります 覚えておく必要はありますが あまり乱用すると見づらくなり 後々修正がしづらくなるので シンプルな表記を心がけて使用しましょう E:nth-child(n) E:nth-of-type(n) E ~ F E > F E + F E[foo] 親要素のn 番目の子要素親要素内の兄弟関係にあるE 要素のn 番目 E 要素の後にあるすべてのF 要素 E 要素の子であるすべてのF 要素 E 要素の直後にあるF 要素 foo 属性を持つE 要素 など 42
43 5. 試験のポイント > 1.2 CSS > スタイルシートの基本 > nth-child と nth-of-type の違い nth-child と nth-of-type の違い div p:nth-child(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> div p:nth-of-type(5){ color : red; } <div> <p>1 つ目の p タグ </p> <p>2 つ目の p タグ </p> <p>3 つ目の p タグ </p> <h6> 間に h6 タグ </h6> <p>4 つ目の p タグ </p> <p>5 つ目の p タグ </p> <p>6 つ目の p タグ </p> </div> 43
44 5. 試験のポイント > 1.2 CSS > CSS デザイン CSS デザイン 44
45 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション アニメーション メリット CSS3 のアニメーションにより 軽くスムーズに動作するアニメーションが導入しやすくなりました 利用シーンも非常に多く スマートフォンのハンバーガーメニューの演出などにも利用できます JavaScript を使わなくても css だけで実装ができる 単純なアニメーションなら JavaScript を利用するより簡単に実装ができる JavaScript を利用したアニメーションと比べ 遜色がないパフォーマンス ( むしろパフォーマンスが優れる場合もある ) 45
46 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > アニメーション実装方法 - transition アニメーション実装方法 - transition 各 transition プロパティの値を設定してアニメーションさせる transition-property transition-duration transition-timing-function transition-delay transition 効果を適用するCSSプロパティ名を指定変化に要する時間を指定イージングを指定変化が始まるまでの時間を指定 46
47 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > アニメーション実装方法 アニメーション実装方法 アニメーションの開始から終了までの任意の経過地点にプロパティを設定できる (animation プロパティで実行 ) div { animation: name 1s ease infinite alternate; name { 0% { width: 50px; } 50% { width: 100px; } 100% { width: 200px; } } 47
48 5. 試験のポイント > 1.2 CSS > CSS デザイン > アニメーション > デモ デモ デモ : CodePen 一例 ).thumbnail > img { transition: opacity 0.4s ease-out; }.thumbnail > img:hover { opacity : 0.8; } JSFiddle や CodePen で実際にコードを書いてみると理解がより深まり 実務へも活かせると思います 48
49 5. 試験のポイント > 1.3 要素 1.3 要素 範囲 重要度 要素と属性の意味 ( セマンティクス ) メディア要素 インタラクティブ要素 49
50 5. 試験のポイント > 1.3 要素 > 要素と属性の意味 ( セマンティクス ) 要素と属性の意味 ( セマンティクス ) 50
51 5. 試験のポイント > 1.3 要素 > 要素と属性の意味 ( セマンティクス ) > セクショニングコンテンツ セクショニングコンテンツ HTML5 から文書構造を明確にするタグが追加されました セクショニングコンテンツはセクションの範囲を定義するコンテンツです <article> <section> <nav> <aside> 内容が単体で完結する 章 節 項のような見出しとそれに関する内容を示す したがって h1 などの見出しが必要 ナビゲーションを示す 余談 補足情報を示す <header>, <footer> はセクショニングコンテンツではありません 51
52 5. 試験のポイント > 1.3 要素 > インタラクティブ要素 インタラクティブ要素 52
53 5. 試験のポイント > 1.3 要素 > インタラクティブ要素 > インタラクティブコンテンツ インタラクティブコンテンツ ユーザーが操作できるコンテンツです <video> 動画を再生する際に使用します 属性によって 自動再生 ループ再生 コントローラーの表示などを制御できます <video controls autoplay poster="image.jpg"> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> <p> 動画を再生するには video タグをサポートしたブラウザが必要です </p> </video> <audio> 音声を再生する際に使用します 記述の仕方は video タグとほぼ一緒です など 53
54 5. 試験のポイント > 1.3 要素 > インタラクティブ要素 > インタラクティブコンテンツ > その他のインタラクティブコンテンツ その他のインタラクティブコンテンツ 日付入力 カラー選択 <input type="date"> <input type="color"> 54 入力候補 デモ : CodePen <input type="text" list="dogs"> <datalist id="dogs"> <option value=" ミニチュア シュナウザー "> <option value=" ミニチュア ダックスフンド "> <option value=" ミニチュア ピンシャー "> </datalist>
55 5. 試験のポイント > 1.4 レスポンシブ Web デザイン 1.4 レスポンシブ Web デザイン 範囲 重要度 マルチデバイス対応ページの作成 メディアクエリ スマートフォンサイト最適化 55
56 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > マルチデバイス対応ページの作成 マルチデバイス対応ページの作成 56
57 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > マルチデバイス対応ページの作成 > フルードグリッド フルードグリッド ページ内の各ブロックを格子状のグリッドにわけ CSS で % 指定を使うことで 閲覧するデバイスの画面サイズによってレイアウトを組み替えるテクニックです これは実務でも非常によく使う習得必須のテクニックです PC タブレットスマートフォン 33% 50% 100%
58 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ メディアクエリ 58
59 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリ メディアクエリ css2 でも大まかなメディア用スタイルを指定することはできましたが スマートフォン タブレットが普及されたことあり 機能が強化されました JavaScript で対応する方法もありますが メディアクエリを使えばシンプルに振り分けられます メディアタイプの一部 all screen tv print すべてのメディア一般的なディスプレイテレビプリンタ 59
60 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリ 〇メリット 1 ソース管理なのでメンテナンスが容易 URL が同一のためリダイレクトの設定が不要 デメリット 様々なデバイスや画面幅に応じた設計をする必要がある 開発工数 および難易度が上がる メリット / デメリットを理解したうえで最適な方法を選択することが重要です とはいえ検索エンジン的にも推奨されているので デメリットを軽減できるよう工夫しながら取り入れていきましょう 60
61 5. 試験のポイント > 1.4 レスポンシブ Web デザイン > メディアクエリ > メディアクエリ ファイルを分割する場合 <link href="css/style.css" rel="stylesheet" media="screen and (max-width: 320px)" > 1 screen and (max-width: 320px){ ブラウザ幅が 320px 以下に適用 screen and (min-width: 321px) and (max-width: 768px){ ブラウザ幅が 321px 以上 768px 以下に適用 screen and (orientation: portrait) { デバイスの向きが縦の場合 screen and (orientation: landscape) { デバイスの向きが横の場合 } 61
62 5. 試験のポイント > 1.5 API の基礎知識 1.5 API の基礎知識 範囲 重要度 マルチメディア グラフィックス系 API 概要 デバイスアクセス系 API 概要 オフライン ストレージ系 API 概要 通信系 API 概要 62
63 5. 試験のポイント > 1.5 API の基礎知識 > マルチメディア グラフィックス系 API 概要 マルチメディア グラフィックス系 API 概要 63
64 5. 試験のポイント > 1.5 API の基礎知識 > マルチメディア グラフィックス系 API 概要 > Canvas Canvas マルチメディア グラフィックス系 API の一つとして Bitmap データを扱うための Canvas API があります <canvas> 要素を html に配置し JavaScript を使用して図形や文字などを描画し 色や影をつけたり回転させたりなどが可能です アニメーションさせることもできますが 実際には Canvas API にそれらの機能はなく JavaScript で描画自体を繰り返して実現させます 64
65 5. 試験のポイント > 1.5 API の基礎知識 > オフライン ストレージ系 API 概要 オフライン ストレージ系 API 概要 65
66 5. 試験のポイント > 1.5 API の基礎知識 > オフライン ストレージ系 API 概要 > オフラインウェブアプリケーション オフラインウェブアプリケーション オフライン状態でもウェブアプリケーションを利用できるようにするため キャッシュマニフェストという仕様が追加されました ブラウザのキャッシュをコントロールし サーバの負荷を軽減したり オフライン時でも動作するウェブアプリケーションを作ることが可能です 66
67 6. 学習方法 受験した感想 学習方法 受験した感想 67
68 6. 学習方法 受験した感想 > 学習方法 教材 LPI-Japan HTML5 認定教材を使用 通勤時間を有効活用 通勤時間の往復 2 時間を有効活用して 短期間で 2 周通読しました 実際に書く JSFiddle や CodePen など ブラウザ上で即座に確認できるサービスを使用し 実際にコードを書いて理解を深めました 68
69 6. 学習方法 受験した感想 > 受験した感想 試験時間は十分にあり 余裕をもって解答することが出来ました 試験本番では 30 分程度時間が余り 残り時間を見直しに使用しました 分からない問題は解答時に問題にチェックを付けておき 後で一気に見直すことができるので あまり最初から 1 問に時間を掛けず テンポよく解答を進めたほうがよいと感じました 見直しの段階で修正した解答が多くあったので 見直しは徹底して行うことが重要だと思います 69
70 最後に 私は専門学校で HTML/CSS の基礎は学んでおりましたが HTML5 や CSS3 の新機能や変更点 Web の基礎知識についての理解が浅いままでした この資格を取得したことで 制作にあたって積極的に発言したり 議論に参加できるようになりました コーディングでは文書構造に対して自信を持てるようになり 実装する手段の幅も広がりました また 実務に直結する知識を身につけることができるため とてもお勧めしたい資格です 70
71 ご質問 71
72 ご清聴ありがとうございました 72
73 Open the Future with HTML5. 73
PowerPoint プレゼンテーション
アカデミック認定校 プロフェッショナル認定資格合格者 Lv1: 27 名 Lv2: 5 名 2017 年 6 月現在 https://www.fork.co.jp/ http://4009.jp/ 2 本日解説する主な内容 3 4 HTML4.01 に比べて複雑な処理が容易になり 文書構造をより明確に書けるようになった 動画や音声をシンプルに扱えるようになった 新たな属性が増え フォーム周りの機能が強化された
サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>
1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4
chapter1 Web デザインへのアプローチ chapter1 Web デザインへのアプローチ 1-1 本書の構成 Web サイト制作の流れ 本書の構成と内容 1-2 Web サイト制作業界の人材像 Web サイト制作に必要な職掌と役割 各職掌の役
Ver.1 2015/12/18 ( 仮称 ) - コンセプトメイキングから運用まで - のご案内 表紙デザイン改訂中 2016 年 ( 前期 後期 )Web デザイナー検定エキスパート出題範囲について 2016 年 3 月の ( 仮称 )- コンセプトメイキングから運用まで - の 発行にともない 2016 年の出題範囲は改訂版の内容から出題いたします 書名 ( 仮称 )- コンセプトメイキングから運用まで
サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT
1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値
PowerPoint プレゼンテーション
HTML5 プロフェッショナル認定試験 レベル 1 ポイント解説セミナー アシアル株式会社 Copyright Asial Corporation. LPI-Japan 2016. All Rights All rights Reserved. reserved. 目次 HTML5 プロフェッショナル認定試験とは 概要 試験範囲 カテゴリ毎の頻出ポイント解説 Webの基礎知識 HTML 要素 CSS3
( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ
1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation
画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/
1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので
<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea
1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが
ホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig
1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し
講師プロフィール 会社概要株式会社ケイ シー シー 講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワーク セキュリティ関連 HTML5 JavaScript などの Web 技術 Java Android iphone コ
HTML5 プロフェッショナル認定試験 レベル 1 ポイント解説無料料セミナー 2015 年年 8 月 株式会社ケイ シー シー 福 田浩之 講師プロフィール 会社概要株式会社ケイ シー シー http://www.kcc.co.jp/ 講師紹介西日本センターユニット IT ラーニングセンター所属 Linux ネットワーク セキュリティ関連 HTML5 JavaScript などの Web 技術 Java
スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
Microsoft PowerPoint - css-3days.ppt [互換モード]
![Microsoft PowerPoint - css-3days.ppt [互換モード]](/thumbs/91/105346015.jpg "Microsoft PowerPoint - css-3days.ppt [互換モード]")
情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,
brieart変換設定画面マニュアル
変換設定画面マニュアル Ver. 1.1 更新日 :2012/11/19 株式会社アイ エヌ ジーシステム Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項 制限事項など 4 ボタン 35 パネル
背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit
1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(
第6回 CSS入門（つづき）
Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 ([email protected]) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )
合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1
合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text
ウェブデザイン技能検定学科試験 3 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが
1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが必須である 第 3 問 画像データであれば 拡張子を.jpeg に変更すれば JPEG 形式のファイル形式となる 第 4 問 擬似要素 :hover
◎phpapi.indd
PHP や HTML の知識がなくても大丈夫 PHP や HTML の基本も学べる FileMaker データベースを Web に公開したい FileMaker を使って動的な Web サイトを作りたい FileMaker しか知らない人が Web アプリケーションを作れるようになる! はじめに まず 本書を手に取ってくださりありがとうございます 本書はある程度 FileMaker Pro の扱いに慣れ
transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動
1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは
Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx
CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の
[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01
![[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01](/thumbs/98/137534901.jpg "[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01")
[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 オリエンテーション 約 40 分 01_ 学習の進め方 02_ リファレンスの紹介 約 09 分 03_
UTF-8への文字コード変更に伴う自作CSSとJavascript修正について
UTF-8 への文字コード変更に伴う自作 CSS と Javascript 修正について Google の推奨により お店ページの文字コードを現在の EUC-JP から UTF-8 へ変更します 文字コードを UTF-8 にすることで 検索結果の順位や数にプラスに働くことが期待できます 今回の文字コードの変更により 店舗さん自身で設置しているスタイルシートや Javascript がある場合 お店ページのレイアウトが崩れる
MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2
1343 アニメーションを連続させる 複数のアニメーションを連続して適用するためには つぎの 2 つの方法があります 1. 複数の連続したアニメーション全体を繰り返さずに 1 回だけ動かしたい場合は 待ち 時間を利用して複数のアニメーションを指定します アニメーション A 0% 100% アニメーション B( 待ち ) アニメーション C( 待ち ) アニメーションB 0% 100% アニメーションC
JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と
JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン
padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で
1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです
1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます 例えば町内会でグループページを作成し運用して
ページ設定や参加メンバーの設定 eコミのデザインを決めるスキンの設定など 一般ユーザー にはできず グループ管理者 / 副管理者 のみができる操作について説明していきます 1 グループ管理者とは ページ設定 ( グループページの設定 ) を行うことができるのがグループ管理者です グループ管理者はパーツのレイアウト変更や グループメンバーの権限設定 メンバーの招待などグループページ内の管理について様々に設定することができます
まう不具合を解消 Windows10 バージョン1803で ディスプレイのサイズを125% 150% にすると STORM VのTOP 画面がズレてしまう不具合を解消しました 6. 動画 + 音声 コンテンツをインポートすると再編集出来なくなる不具合を解消 スライド+ 動画 + 音声 コンテンツをイ
文書番号 :17 製 -ST990602-01 STORM V リリースノート バージョン : 2.3.1 リリース日 : 2018 年 10 月 19 日 新機能 1. コンテンツに使用したPowerPoint ファイルをSTORM V からダウンロード出来るように対応コンテンツ作成に使用したPowerPointファイルをコンテンツ一覧画面からダウンロードできるようになりました 1. 編集画面 の
PowerPoint プレゼンテーション
情報システム基礎演習 B 2016/01/28 (Thurs.) テーマ 4 JavaScript による電卓 Web アプリを作成しましょう 健山智子 ([email protected]) 広島工業大学情報学部知的情報システム学科知的情報可視化戦略研究室 (ival) 講義のアウトライン 2 1. グループの決定 : 1. 5 人での 6 グループ ( ランダム
スライド 1
e 研修 S-LMS+ e ラーニング Simple e-learning Management System Plus 操作説明書 管理者機能 ( 研修コース教材作成管理 (LCMS) 編 ) Learning Content Management System 05 年 月 Ver..7. アーチ株式会社 機能 e 研修管理機能 LOGIN 画面 (PC 環境用 ) 説明 e 研修管理機能 LOGIN
JavaScript 演習 2 1
JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript
MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div
1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color
デジタルブック作成ソフト FLIPPER U製品紹介
クイズ アンケート作成ソフト 単純なテキスト文の 問題では満足できない 概要紹介 本物の教育担当者のための本格派クイズ テスト作成ソフト 東京オフィス 110-0016 東京都台東区台東 4-13-21TOWA SKY BLDG. 3F つくばオフィス 305-0817 茨城県つくば市研究学園 5 丁目 20 番地 2つくばシティア モアビル5F 文書番号 :09 製 -TH040001-13 2017/10/10
はじめにデザイン管理について デザイン管理でできること デザイン管理では ショップの画面レイアウトや ヘッダー フッターなどの HTML 編集を行うことができます また CSS( カスケードスタイルシート ) の編集など 高度なサイトデザイン調整も可能です 以下の端末ごとに デザイン管理が可能です
カゴラボ管理画面操作 設定マニュアル CHAPTER 9 デザイン管理編 カゴラボバージョン 4.1.4 お問い合せはこちらまで カゴラボサポートセンター 0120-713-362 ( 携帯電話からは 0985-23-3362 ) E-mail : [email protected] 受付時間 : 平日 10:00~12:00/13:00~18:00 ( 祝祭日及び弊社休業日を除く ) 提供企業
名称未設定
エキスパート練習問題 1 以下は,Web サイトの閲覧機器に関する問題である.a d の問いに最も適するものを解答群 から選び, 記号で答えよ. a. レスポンシブウェブデザインのしくみを示した図として, 適切なものはどれか. 解答群 ア. イ. ウ. エ. b. レスポンシブウェブデザインの特徴に関する説明として, 適切なものはどれか. 解答群 ア. すべての機器に対して, 共通のURL,HTML,
今日のお話 実装とは? 達成基準と達成方法 実装チェックリストとは? 実装チェックリストの作り方 作成のコツと注意点 まとめ
これから取り組むWebアクセシビリティ 2018 夏 こうすればできる ウェブアクセシビリティ実装のポイントと 実装チェックリストの作り方 2018年8月22日 水曜日 太田 良典 ウェブアクセシビリティ基盤委員会 作業部会4 翻訳 主査 今日のお話 実装とは? 達成基準と達成方法 実装チェックリストとは? 実装チェックリストの作り方 作成のコツと注意点 まとめ 実装とは? 実装 の一般的な定義とアクセシビリティJISにおける
第 8 回の内容 クライアントサイド処理 JavaScript の基礎
第 8 回の内容 クライアントサイド処理 JavaScript の基礎 クライアントサイド処理 クライアントサイド / サーバサイド クライアントサイド サーバサイド Web ブラウザ Web サーバ 動的な Web ページ Web ブラウザ Web サーバ Web ブラウザ Web サーバ リソース生成 描画 描画 リソース生成 再描画 描画 再描画 描画 リソース生成 再描画 動的な Web ページとページ遷移
Delphi/400を使用したWebサービスアプリケーション
尾崎浩司 株式会社ミガロ. システム事業部システム 3 課 Delphi/400 を使用した Web サービスアプリケーションインターネット技術を応用し XML 処理を行うというとたいへん敷居が高く感じる 実は Delphi/400 を用いるとそれらは容易に使用可能である Web サービスとは SOAP と REST SOAP の使用方法 REST の使用方法 最後に 略歴 1973 年 8 月 16
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation
IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践
WEBシステムのセキュリティ技術
WEB システムの セキュリティ技術 棚橋沙弥香 目次 今回は 開発者が気をつけるべきセキュリティ対策として 以下の内容について まとめました SQLインジェクション クロスサイトスクリプティング OSコマンドインジェクション ディレクトリ トラバーサル HTTPヘッダ インジェクション メールヘッダ インジェクション SQL インジェクションとは 1 データベースと連動した Web サイトで データベースへの問い合わせや操作を行うプログラムにパラメータとして
ご利用のブラウザのバージョンによっては 若干項目名が異なる場合があります 予めご了承ください Windows をお使いの場合 [ 表示 ] [ エンコード ] [ 日本語 ( 自動選択 )] を選択 [ 表示 ] [ エンコード ] [Unicode(UTF-8)] を選択 Firefox をご利用
![ご利用のブラウザのバージョンによっては 若干項目名が異なる場合があります 予めご了承ください Windows をお使いの場合 [ 表示 ] [ エンコード ] [ 日本語 ( 自動選択 )] を選択 [ 表示 ] [ エンコード ] [Unicode(UTF-8)] を選択 Firefox をご利用](/thumbs/88/116043220.jpg "ご利用のブラウザのバージョンによっては 若干項目名が異なる場合があります 予めご了承ください Windows をお使いの場合 [ 表示 ] [ エンコード ] [ 日本語 ( 自動選択 )] を選択 [ 表示 ] [ エンコード ] [Unicode(UTF-8)] を選択 Firefox をご利用")
FAQ よくあるご質問 宿泊予約申込 Web サイトについて Q. 1 設定は正しいのですが ログインできません LAN に導入されているファイアーウォール ( ネットワークのセキュリティのための仕組み ) が SSL によるデータ通信を許可していない場合があります その場合はログイン画面を開くことができません 詳しくは 所属機関のネットワーク管理担当部署までお尋ねください また プロキシサーバ経由でアクセスする場合は以下の設定に誤りが無いか
Delphi/400活用！ スマートデバイスアプリケーション開発
吉原泰介 株式会社ミガロ. RAD 事業部技術支援課顧客サポート Delphi/400 活用! スマートデバイスアプリケーション開発拡張性の高い Delphi/400 ならでは jquerymobile を使用し 見栄えのよいスマート画面開発にチャレンジしよう スマートデバイスでの Web アプリケーション活用 Delphi/400 の Web アプリケーション開発 jquerymobile を利用したスマートデバイス開発