6月18日-HTML5プロフェッショナル認定試験について調べ、学習する-

 

１．今日の目標

 HTML5プロフェッショナル認定試験に向けて勉強を進める。

 

２．結果・感想

 ウェブカツの無料体験入部で学べる部分を学び終えてしまった。本入部に関しては我が家の財務大臣に相談中。

 

【コラム】HTML5プロフェッショナル認定資格を受け・・ - IT資格取得～受験料の節約～

2015年の記事だが、この記事を読んでHTML5プロフェッショナル認定資格という資格があることを知った。早速公式HPを見てみるとHTML5道場という学べるサイトを発見した。下記URLだがリンクの埋め込みができなかったのでそのまま貼付。

https://html5exam.jp/outline/(HTML5プロフェッショナル認定試験のサイトへのリンク)

 

このリンク先の下部にある、学習方法の項目にサンプル問題がある。Webの基礎知識の問題を試しに解いてみた所、解けたのは半分ほどだった。その解説記事がとても分かりやすい内容だった。この資格を取りたいと思い早速ユーザー登録をして試験日を確認すると、試験会場によっては日曜日を除いてほぼ毎日受験できるようだった。最短で明日から。試験料は15000円。挑戦するからには確実に資格取得をしたいので、公式HPから応募できる無料ポスタープレゼントに応募しポスターを自宅の見える所に貼ることにした。選択した画像は以下。

f:id:gfc1300:20190618144606j:plain

HTML5プロフェッショナル認定試験ポスター

 あれ、今回の勉強でbrタグは見た目を整えるために使ってはいけないって書いていたけど思いっきりbrタグを見た目を空間作りで使っていることに気付いた。はてなブログだとどうするのが正解なんだろうか。

 

年のせいか元々の性格なのか。小ネタを挟みたくなってしまう。「ユーザーがこう使えそうだなと思う操作感のことをユーザーインターフェイスという」という文章を書いていた時のことです。操作感を捜査官と誤変換してしまいました。頭の中では妄想が広がり、「捜査官と言えば銭形警部」という妄想から銭形とルパンの追いかけっこが始まりました。

f:id:gfc1300:20190618212856p:plain

銭形とルパン

話は変わるが、昨日書いた記事は大見出し(h3)の下の階層を中見出し(h4)を飛ばして小見出し(h5)で作成した。

programi.hatenablog.com

それに対してこの記事は見出しの下を中見出しで書いている。見た目や見やすさで個人的に好きなのは昨日の記事。今日の記事は<hr>を使ったり<br>で(本当はやっちゃダメらしいけど)空間をあけて個人的に見やすいようにしている。セマンティックを実現するためには中見出しで書くべきだろう。でも見た目的には小見出しで書きたい。この葛藤。調べてみるとグーグル検索のSEOの観点からは問題ない様子。

webtan.impress.co.jp

 

３．学んだことの書き出し

Webサイトやアプリを構成している技術について

 

 日常的に使っているWebサイトやアプリはWebの様々な技術で作られている。WebサイトはHTML+CSS+JavaScriptなどで制作される。アプリはネイティブアプリ、Webアプリ、ハイブリットアプリに分けられる。ネイティブアプリはJavaやobjective-c、swiftなどのプログラムで開発される。WebアプリはHTML+CSS+JavaScriptなどで開発される。ハイブリットアプリはHTML+CSS+JavaScriptなどとCordovaなどのフレームワークを使って開発される。

HTML5は2014年10月28日に勧告(技術の仕様が決まり、規格文書が公式に発表された状態)された。HTML5が出るまではXHTMLが使用されていたが、徐々にHTML5に移行されつつある。必要に応じてXHTMLも学ぶ。

 

Webサイトの仕組みについて

 

Webサイトを見るにはIPアドレスを持っているサーバーからWebサイトのデータを送ってもらう必要がある。IPアドレスは数字の羅列のため、人間にとって見やすいURLを使う。DNS(Domain Name System)サーバーはそのURLをIPアドレスに変換してどこにアクセスすればよいかを教えてくれる。PC、スマホ、タブレットなどブラウザで表示させる側をクライアントサイドと呼び、サーバー側をサーバーサイドと呼ぶ。サーバサイドにWebサイトのデータであるHTMLやCSS、JavaScript、画像などが入っている。

 

HTML、CSS、JavaScriptそれぞれの役割について

 

HTML:文章構造→テキストを表示、画像を表示、指定した場所に移動(ページをまたぐリンク、ページの任意の場所に移動するなど)

CSS:視覚表現

JavaScript:振る舞い

 

HTMLの書き方について(html要素、head要素、body要素、meta要素、img要素、a要素、br要素)

 

HTMLを記述するには要素を使用する。要素には開始タグと終了タグがあるものと、終了タグがない空要素がある。開始タグ内には属性＝値を書く。html要素内にはhead要素とbody要素を書く。

head要素にはブラウザの表示枠には表示されない検索エンジンやブラウザなどへの様々な情報を記述する。body要素にはブラウザの表示枠に目に見える形で表示される文書全体を記述する。meta要素は文書に関する情報(メタデータ)を指定する時に使用し、charset属性は文書の文字のデジタルデータの羅列を変換するエンコーディングという処理の方法を指定する。正しくない文字コードを使用すると文字化けを起こす。img要素のsrc属性は画像の引用先を相対パスや絶対パスで指定する。alt属性はその画像の説明をする。a(anchor)要素は別のhtmlファイルに移動したり、ページの任意の場所に移動する時に使用する。 br要素は改行するために使用する。あくまで改行することのために使い、空間をあけるために使用するものではない。

https://html5exam.jp/measures/dojo_1_01.html

 

セマンティックWebについて

 

目的別に要素を使い分け、検索エンジンにWebサイトの部分ごとの意味を解釈させることで、情報の収集や加工をしやすくしていくような考えをセマンティックWebという。

 

cssについて(セレクタ、プロパティ、値)

 

CSS(カスケーディングスタイルシート)は拡張子がcssのファイルを作り、その中に記述してhead要素内でlink要素を使ってcssファイルを参照するのが基本。直接HTMLファイルにstyle要素をつかって記述したり、要素に対してstyle属性でスタイル指定もできるがメンテナンス性が悪いので外部ファイルを参照するのが基本。

CSSはセレクタ{プロパティ:値;}で構成されている。

セレクタ:どこにCSSをかけるのかを指定。セレクタで使用できるのは要素名や要素に対して分類名をつけるclass属性や固有の識別子をつけるid属性などが使用できる。

プロパティ:効果の種類を指定

値:指定したプロパティの値を指定

class属性は同一文書内で複数回使用可能。id属性は一回のみ。

CSSはバージョン2.1までは勧告されているがCSS3以降はモジュール(機能の規格)ごとに勧告されており、モジュールによって策定状況が異なる。ブラウザごとに先行して対応しているプロパティがある。ベンダープレフィックスを使用することでそのプロパティを使用できる。ブラウザごとのプロパティの利用可否は以下を参照。

Can I use... Support tables for HTML5, CSS3, etc

 

ブラウザごとのスタイルの差の解決方法について(ユーザーエージェントスタイルシート、reset.css、normarize.css)

 

各ブラウザにはデフォルトで設定されたCSSが反映されている。デフォルトのCSSをユーザーエージェントスタイルシートと呼ぶ。ブラウザごとに微妙に数値が違う。それを解決する主なものがreset.cssとnormarize.css。

reset.cssとは数値をリセットするもので、要素に対してCSSを書いているのが特徴。リセットしてCSSを書くのでコード記述の効率が悪いというデメリットがある。新しい要素が増えない限りバージョンアップされるリスクが少ない。

normarize.cssとは、ユーザーエージェントスタイルシートの値をある一定の値に調整したもの。デフォルトのCSSを活かせて無駄なCSSを書く必要が少ないのが特徴で、reset.cssよりパフォーマンスが良い。ユーザーエージェントスタイルシートに対して調整をかけるのでブラウザの持つデフォルトのCSSが変更したり新しいブラウザが出てくると差し替えが必要になる可能性がある。

 

CSS設計手法について(OOCSS、SMACSS、BEM、FLOCSS)

 

OOCSS:構造と見た目の定義されたセットを組み合わせる設計手法

SMACSS:それぞれのスタイルを役割ごとのカテゴリに分けて管理する設計手法

BEM:該当箇所の役割とその影響範囲が分かりやすい命名ルールを定めた設計手法

FLOCSS:OOCSS、SMACSS、BEM、またSuitCSSから影響を受けている設計手法。役割によって名前やファイル構成のルールが決められている。それぞれの場所や役割が理解しやすく、不要なCSSを捨てやすいという特徴がある。

 

CSS設計をサポートするCSSプリプロセッサについて

 

CSSプリプロセッサとはCSSの記述を楽にしてくれるツールのこと。Sass、LESS、Stylusなど様々な種類がある。CSSプリプロセッサを使えば必ずしも良いCSSが書ける訳ではないので注意。

https://html5exam.jp/measures/dojo_1_02.html

 

音声と動画について(audio要素、video要素)

 

音声はaudio要素を使用し、属性によっていくつかの制御ができる。音声も動画もモバイル環境では自動再生されない。スマホの契約が定額でない場合、動画などのデータ容量が大きいものが自動再生されるとユーザーの意図とは関係なく課金が発生する。そういった配慮から自動再生できないようになっている。

<audio src="音楽ファイルのパス" controls autoplay loop></audio>

src属性:値にあるパスで音声ファイルを参照する

autoplay属性:ページが読み込まれた際、自動で再生を開始する。

loop属性:繰り返し再生する

controls属性:コンテンツを制御するインターフェイス(再生・停止ボタン、再生箇所の移動、音量調整)を表示する

 ブラウザやブラウザのバージョンによってサポートしている音声ファイルの拡張子が異なる。対応するブラウザに合わせて、用意する音声ファイルを複数用意する。

<audio controls autoplay loop>

<source src="音楽ファイルのパス.mp3" type="audio/mp3">

<source src="音楽ファイルのパス.webm" type="audio/webm">

</audio>

 

動画はvide要素を使用する。音声のaudio要素と同じ用途で使用する属性が多い。(src、autoplay、loop、controls)

poster属性:再生しなくてもどのような内容か分かる動画の1フレーム

controlsのインターフェイスには画面を拡大するボタンがある

<video controls autoplay loop poster="1フレーム画像のパス>

<source src="動画ファイルのパス.mp4" type="video/mp4">

<source src="動画ファイルのパス.webm type="video/webm">

<source src="動画ファイルのパス.ogg" type="video/ogg">

</video>

 

CSSでの要素の動的な制御について

 

 CSS3では要素に対して動的な制御ができるようになった。制御できるのは回転・拡大・縮小・変形など。Webサイトにはリンクボタンが設置されていることがあるが見た目やマウスカーソルを重ねた時にクリックできそうだなと操作感がユーザーに伝わると使いやすさが増す。ユーザーの操作感のことをユーザーインターフェース、使いやすさのことをユーザービリティーという。

 :hoverは疑似クラス。疑似クラスは疑似的にクラスを扱う。他にも要素の前後に疑似的に要素を作り出す「疑似要素」がある。疑似クラスは:(コロン1つ)、疑似要素は::(コロン2つ)。CSS3から疑似クラスと疑似要素でコロンの記述が変更になった。ブラウザではコロン１つでもエラーにならない。

 疑似クラス一覧
  • :active
  • :checked
  • :default
  • :defined
  • :desabled
  • :drop
  • :empty
  • :enabled
  • :first
  • :first-child
  • :focus
  • :focus-visible
  • :focus-within
  • :host
  • :host()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :matches()
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited

developer.mozilla.org

 疑似要素一覧
  • ::after
  • ::before
  • ::cue
  • ::first-letter
  • ::first-line
  • ::selection
  • ::slotted()

 (上の5つはコロン１つでも動く)

developer.mozilla.org

qiita.com

https://html5exam.jp/measures/dojo_1_03.html

 

HTML5とJavaScript(JavaScriptの参照方法、コメント)

 

JavaScriptはHTML5の要素が持つ機能をより引き出すことができるプログラム言語。CSSと同様に外部ファイルを参照して利用する。参照する場合はHTMLを先に読み込ませるためにbody終了タグの直前で参照、記述する。

<script src="JSファイルのパス"></script>

</body>

JavaScriptを使えばWeb要素の動画の再生をコントローラーのボタンを押して再生するのではなくbutton要素で再生ボタンを作るなどができる。JavaScriptと似た名前でJavaがあるが別物。略す時はJSやジャバスクと略されることが多い。

 JavaScriptのコメントは2種類の記述方法がある。//一行だけのコメントという記述方法と/*コメント(複数行可)*/という記述方法。

 

動画の再生と一時停止の制御について 

 

button要素にonClick属性を使用する。onClick属性は要素がクリックされた際に処理を発生させることができる。このクリックなど動作や状態の変化を表すものをイベントと呼ぶ。クリックイベントが発生した際に、関数を使って処理を実行させることができる。JavaScript内で;は処理の終わりを意味する。リンク先の「動画の再生と一時停止の制御をしてみよう」という見出しにある「クリックイベントが発生した時に関数を使って動画の再生処理を実行させる」サンプルファイルの説明がとても分かりやすい。重複している処理の記述は変数を使って短く書けるようにする。変数の宣言は,で区切ると連続して書ける。document.getElementById('id名').命令();で任意のid属性の値の要素を指定しそのidに対して命令を与えられる。

document.getElementById('id名').play();再生する

document.getElementById('id名').pause();一時停止する

document.getElementById('id名').innerHTMl();文字を出力する

 

メソッドについてはW3CのWebサイトに情報がまとまっている。全部英語だった。解読し甲斐があるな。

www.w3.org

.addEventLister('イベント名',関数名,falseかtrue);

指定したものに状態の変化があったら設定した関数を実行する。イベントの伝播を上の階層にする場合はtrue、必要なければfalseにする。

https://html5exam.jp/measures/dojo_1_04.html

 

４．明日の課題

 引き続きHTML5プロフェッショナル認定試験について学ぶ。

 

５．参考URL

 

 

６．今後やりたいこと・高めたいスキル・優先順位

HTML5プロフェッショナル認定資格の取得、基本情報技術者資格の取得、簿記2級の取得、ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)