もっと見る
閉じる
【セミナー記録】HTML5プロフェッショナル認定試験 レベル1ポイント解説無料セミナー@東京 10/21（日）
10/21（日）東京 浜松町にて行われたHTML5に関してのセミナーに参加してきました！
勝手にですが、WEB系エンジニアは技術力や資格は重視されず「センス」が大事！というイメージを持っていました。
ですので、個人的にはこのような資格合格に向けたセミナーって珍しいんじゃないかと感じます。
（インフラ系は資格とってなんぼの世界なのでこのようなセミナーたくさんありますが。）
感想やポイント、そして学ぶことも多くありましたので、記憶が鮮明なうちに書き留めておきたいと思います。
Contents
セミナー情報
はじめに今回のセミナー情報です。
●主催:LPI Japan
●開催日時:10/21（日）
●セミナー名:HTML5プロフェッショナル認定試験 レベル1ポイント解説無料セミナー@東京
●場所:浜松町 コンベンションホールAP浜松町 B１F
●URL:https://html5exam.jp/news/page2875.html
LPI Jpanという企業は、主にオープンソース系の技術の資格認定を行なっている企業です。
サーバー系エンジニアの登竜門とも言えるLPICという超有名な資格を認定しているのがこちらの企業です。
現在はLPICはなくなってLinuCという資格になっているようですが、LPIC認定されている技術者はそれだけで重宝がられるというエンジニア界の現実もあり、信頼の置ける企業だと思っています。
HTML5プロフェッショナルもLPI Jpanが認定している資格で、このセミナーの講師の方も言っていましたがWEB系の認定資格ってほとんどないので貴重な資格だと思います。
僕は今年の8月にちょっとした興味から旅先の京都で初めてHTML5プロフェッショナルについて知りました。
なぜ参加したか？
HTML5を体系的に学びたい！
わたくし、IT業界歴10数年になります。
書籍での勉強などももちろんしましたが、検索能力が上がるにつれ、お金のかかる書籍は買わずになんでもGoogle先生に聞いて解決する癖がついておりました。
一時期は「オレ、検索能力で飯食ってるぜ！」なんて思ったりもして、これはこれで業務に役に立つ能力なのですが、以前のように書籍を買って1から学ぶという姿勢がいつの間にかなくなっていました。
WEB系の学習をはじめたのはちょうど１年くらい前ですが、「わからないことは自分で調べるのが美学！」精神で進めていた結果、自分が描くソースコードがめちゃくちゃだということに気づきました。
そこで、HTML5を1から体系的に学びたい！と思い、HTML5プロフェッショナル取得を目指し、セミナーに参加したのです。
レスポンシブデザイン
今回のセミナーの内容は事前にホームページ上で告知されていたのですが、レスポンシブデザインとのことでした。
本セミナー自体、資格試験合格のためのセミナーではありますが、レスポンシブデザインといえば、いまや「これがないとWEBデザインができない！」とWEB系エンジニアが口を揃えて言う重要ポイントであり、資格試験対策以上の学びが期待できると思いました。
Ping-tが無料！
Ping-tというのは、10年以上も前からある資格試験対策の有料問題集サイトです。
僕も数々の資格を取得してきましたが、このサイトには大変お世話になりました。
資格試験対策という以上に、洗練された知識が凝縮されているコンテンツで、これが1ヶ月無料で使える特典が本セミナーにはついていたのです！
セミナー自体は無料、かつおみやげ付き！参加しないわけにはいかないです！
セミナー内容
HTML5 レベル1試験について
まずは、HTML5プロフェッショナルの試験範囲についての説明でした。
HTML5プロフェッショナル試験はLevel1試験とLevel2試験があり、
ざっくり言うと、Level1の範囲はHTML5、CSS3、レスポンシブデザイン、APIあたりの話、Level２はより動きのあるWEBページについて、つまりJavaScriptがメインになるとのことです。
レスポンシブWebデザインについて
今や言うまでもないことですが、レスポンシブWebデザインとはスクリーンサイズに応じてレイアウト、デザインが変更されるWebページのデザインです、との説明が。
マルチデバイス対応ページの作成
リセットCSS
・各Webブラウザが持つデフォルトのCSSをリセットするためのCSSです。
・marginやpadding、list-styleなどのスタイルを除去するものが多いようです。
（必要最低限のスタイルを残しつつ共通化するものはノーマライズCSSと呼ばれます。）
・様々なリセットCSSが公開されています。
例）Eric Meyer’s “Reset CSS”2.0、HTML5 Doctor CSS Reset、Yahoo!（YUI３）Reset CSS
可変レイアウト
固定レイアウトに対して、表示領域のサイズに応じてコンテンツやレイアウトが変化するWebサイトの作り方。
・Fluid Grid
表示領域を格子状に区切り、その格子に合わせてコンテンツを配置していく手法をグリッドシステムといいます。
さらに、グリッドシステムをウィンドウサイズなどから相対値にすることで、デバイスに応じたレイアウトにする手法をFluid Gridといいます。
・Fluid Image
画像のサイズも表示領域の大きさの相対値にすることで、画像だけ（相対的に）大きく表示されたりする問題を防ぐのがFluid Image。
以下のようにmax-widthを指定することで親要素のサイズを超えないようにできます。
[使用例]
img { max-width: 100%; }
HTML5.1の画像の取り扱いについて
picture要素、およびimg要素のsrcset属性が追加された。
スマホなどの画面サイズが小さいデバイスでWebページを表示した際に、必要以上の大きな画像を読み込むと遅延などの原因となります。
そのため、適切なサイズの画像をDLすることで高速化をはかります。
[使用例]
<picture>
<source srcset=“largeLogo.png” media=“(min-width: 600px)”>
<img src=“smallLogo.png” alt=“Logo”>
</picture>
使い分けの指針としては、サイズ（解消度）変更ならsrcset属性、内容やレイアウト変更ならpicture要素とします。
メディアクエリ
デバイスの特性（スクリーンの大きさや種類）に応じてCSSを切り替える技術。
CSSを読み込むlink要素のmedia属性または、CSS内で@media規則で指定。
メディアタイプとメディア特性を組み合わせて適用条件を指定。
[メディア属性での指定例]
<link href=“(URL)” rel=“stylesheet” media=“(メディアクエリ)”>
[@media規則での指定例]
@media(メディアクエリ) { body { font-size: 10pt } }
メディアタイプ
| メディアタイプ | 概要 |
| all | 全てのデバイスに適合 |
| 印刷、印刷プレビュー | |
| screen | カラーのコンピュータ画面 |
| speech | スピーチシンセサイザ（読み上げソフト） |
| tty | 固定幅の表示端末 |
| tv | 低解消度なテレビ |
| projection | プロジェクタ |
| handheld | 携帯デバイス |
| braille | 点字ディスプレイ |
| embossed | 点字印刷 |
| aural | 音声出力 |
メディア特性
| 特性 | 概要 |
| width | 表示領域の幅 |
| height | 表示領域の高さ |
| device-width | 出力領域の幅 |
| device-height | 出力領域の高さ |
| orientation | 縦/横表示 |
| aspect-ratio | 表示領域の縦横比 |
| device-aspect-ratio | 出力領域の縦横比 |
| color | 色要素毎のビット数 |
| color-index | 使用可能パレット数 |
| monochrome | モノクロのビット数 |
| resolution | デバイスの解消度 |
| scan | テレビの操作方式 |
| grid | 文字表示/画像表示 |
スマートフォンサイトの最適化
CSSスプライト
複数の小さなアイコンを１つの画像にまとめることで、ファイルサイズを小さくし、ファイルの転送回数を減らす技法。
一般的にbackground-imageとして表示させます。
また、それぞれの画像はbackground-positionとwidth、heightを指定して表示。
http://spritegen.website-performance.orgでCSSスプライト化が可能。
高解像度画面向け対応
iOSデバイスや、android端末などのモバイルデバイスでは、一般的なPCにくらべて高解像度の画面を備えている。（iOSのRetinaディスプレイなど）
高解像度画面においては、縦横2画素で1ピクセルを表現することで文字の表示を滑らかにするなど、実際のピクセル数と論理的なCSSピクセル数が異なることがあります。
[density記載方法]
densityとはCSSピクセルと物理ピクセルの比率(密度)のこと。
@media (-webkit-min-device-pixel-ratio: 2) {
・・・
}
iOSの場合、値が2ならRetinaディスプレイ。 Androidの場合、値は様々。
viewport
モバイル機器などの表示領域のサイズを表す値で、デフォルト値は980px。
Webブラウザは要素をレイアウトする際にviewportを基準にします。
[meta要素でのviewportのinitial-scaleの記載例]
<meeta name=“viewport” content=“width=device-width,initial-scale=1”>
全体的な感想
4-1. HTML5を学んでいる人はとても多い！
今回のセミナーは定員100名でしたが、満席の様子でした。
20代くらいの若者ももちろんいましたが、それ以上に40代以上くらいに見える人が多かったのが意外でした！
40代以上になっても学び始める人が多いというのは、それだけ期待値の高い資格・技術なんだと思います。
4-2. 講師の話し方がうまかった！
僕は大体セミナーに参加すると大体講師の話し方で集中できるか田舎が決まります。
セミナー講師って、結構癖の強い話し方の人なんかもいてそんな時は退屈してしまうんですが、
今回の講師の方は落ち着いた調子で所々で質問を受け付けていたので、かなり頭に入ってきましたね。
4-3. 今後、詳しく学びたいこと
今回のセミナーでの本題ではなかったのですが、質疑応答の中でCSSのcalcの話がでてきました。
これについては後日自分で深掘りしてみようと思いました。
また、JavaScriptのasync、deferについても詳細に説明を受けたのは初めてだったので、自分のサイトで動作検証が必要だと感じました。
そんな感じで、学ぶことの多かったセミナーとなりました！
まとめ
今回でセミナーで感じたことは、本で独学するよりも実際に講義を聴くほうが何倍も技術のイメージがつきやすいなー、ということです。
個人差、向き不向きもあると思いますが今回の主催のLPI Jpanのセミナーは無料ですし受講して大満足でした。
独学での技術習得に煮詰まっている方にはぜひおすすめしたいと思いました！
最後までお読みいただき、ありがとうございました！