close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 Junit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修を聞いてみた 会社規模 (100~300名) IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 トレ担 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン 会社規模 (~50名) DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 会社規模 (~99名) Wireshark パケットキャプチャ 管理職研修 部下育成 ワークあり 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 会社規模 (~25名) テスト技法 組織規模 51名~99名 組織規模:~199名 [組織規模]199名まで 組織規模 199名まで 組織規模199名まで 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上

HTML 5 / CSS 3 で学ぶ Web の入門と新技術 研修コースに参加してみた

今回参加した研修コースは HTML5/CSS3で学ぶWebの入門と新技術 です。

参加する前はいろいろなタグを紹介するだけかなぁと思っていたのですが、このコースはサンプルコードを見る、動かしてみる、を繰り返し行い、実際に自分で書く時間を減らしながら書き方がわかる、不思議な達成感のあるコースでした。

また改めて、HTMLの歴史、HTML5/CSS3/JavaScriptで出来るようになったことがわかり、いまのWeb標準で行われていること、例えば同期通信、オフラインストレージなど、かいつまんでわかりました。

 

では、どんなコースだったのかレポートします!!

想定している受講者

  • Web開発の基本を理解している方

受講目標

  • HTMLの歴史とHTML5の特徴を知る
  • HTML5で導入された新技術を知る
  • CSS3の特徴を知る

講師紹介

プログラミングカテゴリではおなじみの 米山 学 さんです。

 

米山 学

 

ちなみに、講師紹介にもあるとおり、冬のスペインで登山するのが大好きな米山さんなので、冬は日本を離れがちなのです。

 

HTML

まずはザックリ、HTMLの概要や歴史を紹介いただきました。

  • W3C が標準仕様を策定している
    • 最も大きな団体
  • 最新版は 5.2
    • December, 2017 Release
    • 5.3 が準備中
  • Recommendation (勧告) というのが正式な仕様のリリース
    • 他にも Workingdraft などがある
  • WHATWG という団体も標準仕様を決めている
    • ブラウザベンダが作った (Firefox/Safari/Opera)

 

歴史的経緯

  • 前のバージョンはHTML 4
    • 1999年にリリースされたもの実は W3C が次にリリースしようとしていたものは XHTML
      • 仕様が複雑かつ巨大
    • XHTMLを嫌がった WHATWG が HTML5 を提案
    • Chrome が WHATWG に入って、HTML 5 が正式仕様になった
    • 現在は W3C と WHATWG は協調してやっている
  • W3C がやっていること
    • いわゆる html タグ <> の仕様を作っている
  • WHATWG がやっていること
    • Living Standard を作っている
      • HTML のような静的なページではなく動的なページの仕様
      • Webアプリケーションの基盤
    • 実は HTML5 はWebアプリケーションに対応するための様々な技術が含まれている
      • CSS や JavaScript も入っている

 

私は W3C がHTML、WHATWG がブラウザと理解しました!

 

一方で、HTMLレンダリングエンジンはどうなっているのだろうと、ググってみると、こんな感じでした。

  • Gecko (Firefox など) // Netscapeが源流
  • WebKit (Safari など) // Unix系のレンダリングエンジンKHTMLをフォーク
    • Blink (chromium, chrome, Operaなど)

こちらもそれぞれ特徴があって面白そうです。最近ではMSがEdgeHTMLの開発を停止し、chromium ベースにすると発表したので、事実上、3つの実装しか無くなったようです。

こちらはこちらで、Rust, wasm など最近は面白いトピックもあるので、いつかコースで聞きたいなぁ。

 

ちなみに “WHATWG” ってなんて呼ぶんだろうと思っていると、 「わっとだぶりゅじー」で良さそうです。

 

HTML5に入った新技術

下のWebページを見ながら、それぞれ解説いただきました。

HTML5 – ウェブデベロッパーガイド | MDN

 

  • 合計8個の技術が入っている
  • SEMANTICS: (訳: 意味論)
    • 文書が持つ意味をハッキリさせる
    • 機械でもわかるようにする
      • たとえば Googlebot のようなクローラ
      • 色や強調など見栄えは評価しなくなった
        • ex. HTML4にあった <b>…</b> のような装飾
        • 一応レンダリングされる
  • OFFLINE / STORAGE
    • モバイルのようにオフラインになってもローカルに保存する仕組みを強化
  • DEVICES ACCESS
    • PCと違ってモバイルにはカメラやセンサーなどもついている
    • GPSなどにも対応
  • CONNECTIVITY
    • 接続を速くする
    • 接続しなくても表示できる
    • 双方向バインディング
    • リクエストとレスポンスだけでなく繋がった状態を保持する
  • MULTIMEDIA
    • 音楽や動画の再生
    • 専用ソフトが無くても再生できる
  • GRAPHICS AND EFFECTS
    • 3D など
  • PERFORMANCE AND INTEGRATION
    • 処理性能を上げる仕組みの実装
  • STYLING
    • CSS3
    • 従来は全く別だったものをくっつけた
    • ページの見栄えは CSS であつらえる
    • CSS からJavaScriptを呼び出してアニメーションすることもできる

 

セマンティクスの話題で、たしかに人間からすれば、この記事はよい、この記事は悪い、は判断できますが、機械からはわからないので、だから目次、h2などヘッダなどをちゃんと書くようにSEO対策で言われるようになったのか、と今さら合点しました。(いまさら…)

 

ちなみに今回リファレンスとして使った MDN が質・網羅性において、どれも一番とのことでした。

 

HTML5/CSS3 を試してみよう

ここからは実際にブラウザとサンプルコードを見ながら、動かしてみました。

このレポートではその中でいくつか紹介します。

 

MultiMedia

  • <audio></audio>
    • controls という属性がないとコントローラーが表示されない
    • 自作もできる

 

 

 

Form

  • 入力フォーム
    • 数量 / 日付 / インクリメンタルサーチ (入力補完) /
    • placeholder を使うと validatecheck が出来る
      • email / URL / 電話番号など
      • タグで出来る (!!)

 

 

WebSocket

 

  • Web では通常、HTTP というプロトコルを使っている
  • 必ずクライアントからリクエストしないとレスポンスを返せない
  • このままでは同期通信ができない
    • 例えば、チャットが作れない
    • 誰かが発言してもサーバから配信できない
    • 例えば株価情報もリクエストが無いので更新できない
  • これを解消するのがWebSocket
    • 双方向で通信できる
  • デモンストレーションするにはサーバとサーバプログラムが必要なので node.js と express を使う
    • node.js を使うと、apache などが無くても WebServer を立てられる (!!)

 

使ったファイルは米山さんにOKいただき GitHub に配置しましたので、ぜひ試してみてください。

 

07_WebSocket

 

 

他にも WebWorker でマルチスレッドを実験してみたり、WebStrage を試してみながら、コードをみて、とても楽しい時間でした。

CSS3

続いて、CSS3もコードを見ながらブラウザで表現を確認しました。

 

  • 基本の使い方
    • styleタグで囲んで、要素を指定します

 

 

  • Border
    • 角丸を作る

 

  • Button
    • 画像を使わずボタンが作れる

 

 

 

  • flex-layout
    • 簡単にレイアウトが組めるようになった

 

 

  • Web フォント
    • 従来はクライアントにフォントが無いと出来なかった
  • サーバから配信したフォントを表示させられる
    • Google fonts が使える
    • <link href="https://fonts.googleapis.com/css?family=Ravi+Prakash" rel="stylesheet">
    • こんな感じで指定する

 

HTML5 と CSS3 を組み合わせて書く

今度はHTML5とCSS3を組み合わせて、どんなステップを踏むのか、ステップごとのサンプルコードを見て、動かしてみます。

 

  1. まずタグでページの構造化を行う
  2. HTML5 で コンテントモデル を追加 // 文書の構造化
    • <nav></nav>
    • <header></header>
    • <section></section>
    • <article></article>
    • <aside></aside>
    • <footer></footer>
    • などなど
  3. CSS を適用して見栄えを調整
    • <p class="hoge"></p> で定義をつくる
    • .hoge {} で指定する
  4. レイアウトや色をつける
    • <nav></nav> などを <div></div> タグで括ってやる
  5. (cssフレームワークをあてる)
    • (今回はBootstrapをあててみます)
  6. 1. (レスポンシブにする)
    • CSS3の @media クエリを使う

 

すべてのステップを経ると、↓のようになりました。

 

 

このサンプルページを確認したところで、このコースは修了しました。

まとめ

このコースではHTML5/CSS3で変わったところを中心に、実装と動きを確かめてみました。

思わず、WebSocketの動きやWebStorageなどの仕組みなどをJavaScriptも含めて確認でき、まさしくLivingStandardがわかるコースでした。

HTMLのタグを学ぶんだろうなぁ、という予想を、良い意味で裏切られたので、HTMLはもちろんブラウザ周りの今の標準を知りたい方にはとてもオススメです!

 

 

label SE カレッジの無料見学、資料請求などお問い合わせはこちらから!!


SEカレッジについて

label SEカレッジを詳しく知りたいという方はこちらから !!

特集・キャンペーン

よくある質問集

タグ一覧

参加してみた研修参加レポートJavaLinux基礎セキュリティプログラミングプロジェクトマネジメント基本情報技術者オブジェクト指向PythonネットワークAISQL基礎プログラミング基礎ヒューマンスキル資格コミュニケーションIoTアルゴリズムエンジニアデータベースJavaScriptLinux入門マネジメントC# 基礎テーブル設計仮想化技術ソフトウェアテストプログラミング入門SQL応用パケット解析ビジネスマナーPMBOK®jQueryLinux応用ビジネス文書ファイアウォールコンテナシェルスクリプトデータサイエンスデザインパターン教育研修担当者向け問題解決技法工数見積ER図障害対応プレゼンテーションテック用語RDBMSDockerIT研修制度を聞いてみたデータベース基礎LAN構築AWSWindowsサーバー基礎SEカレッジ導入事例テスト自動化DNS簿記情報処理資格Raspberry Pi要求定義ロジカルライティング新人研修サーバサイドJavaPマークVLAN単体テストトレンドネットワーク入門Javaプログラミング基礎インフラエンジニアアンガーマネジメントアジャイルプロジェクトマネージャベンダーコントロールプロトコルコーチングIT基礎GoF品質管理Javaプログラミング応用データサイエンティストC# 応用ロジカルコミュニケーションロジカルシンキング財務データベース設計ヘルスケアExcel営業知識マルチスレッドプログラミングCloudインフラ実機演習CCNATCP/IPテストケース決断力法律知識Modern JavaScriptLVSプロジェクト管理機械学習応用情報技術者WBSActive DirectoryCSS3サーバー構築パフォーマンスチューニング試験対策CentOS7フレームワークリファクタリングZabbixITILルーティングSQLインジェクション新人育成UIスクラムネットワーク構築インデックス設計図解術非エンジニア向け情報漏えい見える化ITパスポートHTML5HTML/CSSRDBJavaScript基礎クラウドOSPFVPNデータベースセキュリティ物理設計(データベース)Python入門統計学Deep Learning微分・積分ソフトウェアテスト基礎Vue.js片付け術サイバー攻撃UI/UX犯罪心理学正規化理論Webアプリケーション開発管理職研修JavaEEDHCP会社規模99名まで経営改善CentOSLAMP環境ロードバランサーBGPエンゲージメントマネジメントセキュリティ入門プロジェクト失敗事例システム開発データベース障害セルフマネジメントOS・システム基盤PDCAトラブルシューティングDBA中級Windowsサーバー応用業務効率化リスク管理マーケティングクリティカル・シンキングプロダクトマネージャLPIC-1ブロックチェーンデータベース応用Junit会社の仕組み法改定UXCisco情報セキュリティマネジメント内定者研修サーバーサイドJavascript基本コマンド要件定義コマンド冗長化Windows次世代高度IT人材UMLPHPウォーターフォールモデルM5Stackネットワーク管理顧客ヒアリング関数型プログラミングDevSecOps仮想通過IPAインターネットルーティング基礎IT人材マウスで学ぶMVC基礎プロダクトマネジメント論理設計IPアドレスITサービスマネジメントテスト手法CCENT塗り絵開発環境構築表計算ソフト栄養学HTTP会社規模199名までMachine Learningプロジェクト計画リーダーシップ論理設計(データベース)HTTP/2.0サーバーOSI参照モデルPMO失敗から学ぶWeb API財務諸表レビュー情報システム部門向けGit自己分析GO言語ビジネスインダストリインタビュー技法OJTインターネットルーティング応用会社規模49名まで業務知識/業界知識ソフトウェアテスト応用教養Wireshark会話術継続的インテグレーション (CI)インバスケットRIP冗長化入門LaravelWebSocketC-CENT自動構築Node.js新人教育画像認識チームビルディング令和時代パケットキャプチャテスト技法並列処理PMP®Apacheシステム設計バージョン管理スタティックルートモダンJS (Modern JavaScript) 基礎概念設計(データベース)インフラ監視ニューラルネットワークWebWorkerSelenidechefコンピュータ数学サーバーダウンnpmやり直し数学Infrastructure as CodeチャットポットRESTful APIHaskellスクリプト言語PDUEC2継続的インテグレーション(CI)GitHubバッファオーバーフローハンズオンプライベートクラウドgulpフロントエンド超上流工程目標設定4Bizリーダブルコード会社規模300名以上アプリ開発Go言語 (golang)LightsailネゴシエーションDoS攻撃IT資格Chainer数字力基本設計財務会計アセンブラキャリア形成タイムマネジメントビルドツールつながる工場内部設計見積手法OpenStackデータマイニングリスクコントロールMicrosoft Azureエディタ負荷分散共創AI人材FinTechBootstrapコンピュータ基礎ワークライフバランスシンギュラリティモチベーション労働関連法基本用語プロジェクトリーダー

過去の記事