【HTML5認定試験Level.1】part4 レスポンシブＷＥＢデザイン
今回はレスポンシブＷＥＢデザインに着手します。
HTML5認定試験の試験範囲は以下の通りです。
- 要素 主にHTMLを構成するタグやタグに設定可能な属性について
- CSS ウェブサイトの見た目を設定するCSSの設定方法など
- レスポンシブWEBデザイン
スマホ、タブレットなど様々なデバイスでのレイアウトの設定方法 - APIの基礎知識
APIを用いて様々なコンテンツ（音楽、動画、位置情報、ブラウザ間の通信）を作成する - Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術
試験範囲としてはそこまで広くありません。
勉強に使用したテキストは以下です。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: Kindle版
- この商品を含むブログを見る
レスポンシブＷＥＢデザインとは
スマホやＰＣで同じサイトを参照したときに
解像度が大きく異なるためデバイスによっては
見にくいレイアウトになってしまいます。
そこで以前は各デバイスのレイアウトに対応するため
ＨＴＭＬファイルを複数用意していました。
しかしながらデバイス毎にＨＴＭＬファイルを作成するのは
工数もかかるしメンテナンスも大変です。
そこで出てきた考え方がレスポンシブＷＥＢデザインです。
HTMLは一つしか作らないがデバイスによっては読み込むＣＳＳファイルを
切り替えたり、画面に表示する画像ファイルも端末の解像度によって
変えるなどあらゆる手法を使ってレイアウトが崩れるのを防ぎます。
実際にやってみた
今回は画像ファイルの読み込みをデバイスによって変えてみます。
下に表示されている画像には何が表示されているでしょうか？
PCからこの記事を読んでいる場合は「PC用画像」という文字列が表示されています。
これはメディアクエリという手法である条件下で
CSSを切り替える技術を使用しています。
実装は以下のようになります。
<style>
/* デフォルトで読み込むCSS */
.hatena-fotolife-pc{ /* PC用画像のclass*/
visibility : visible; /* 表示 */
}
.hatena-fotolife-sp{ /* スマホ用画像のclass*/
visibility : hidden; /* 非表示 */
}
/* 解像度の幅が480px以下の場合に読み込むCSS */
@media screen and (min-width:0px) and (max-width:480px){
.hatena-fotolife-pc{ /* PC用画像のclass*/
visibility : hidden; /* 非表示 */
}
.hatena-fotolife-sp{ /* スマホ用画像のclass*/
visibility : visible; /* 表示 */
}
}
--></style>
処理の内容はコメントを読めば分かると思いますので説明は割愛します。
さいごに
WEBサイトを作成する際には多種多様のデバイスに対応できるよう
すべきということが分かりました。以上です。
【HTML5認定試験Level.1】part3 CSS
今回からはCSSに着手します。
HTML5認定試験の試験範囲は以下の通りです。
- 要素 主にHTMLを構成するタグやタグに設定可能な属性について
- CSS ウェブサイトの見た目を設定するCSSの設定方法など
- レスポンシブWEBデザイン
スマホ、タブレットなど様々なデバイスでのレイアウトの設定方法 - APIの基礎知識
APIを用いて様々なコンテンツ（音楽、動画、位置情報、ブラウザ間の通信）を作成する - Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術
試験範囲だけを見ると序盤のように感じますが
要素とCSSでテキストの2/3以上を占めています。
ここも覚えることが多くしんどかったです。
ちなみに使用したテキストは以下になります。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: Kindle版
- この商品を含むブログを見る
CSSとは
Wikipediaの引用になりますが以下の様に定義されています。
Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
勉強方法
要素編と同じになりますがまずは慣れることが大事なので
下記サイトのCSS入門、CSS3入門をやってみました。
■ドットインストール
入門編が終わったところである程度ＣＳＳを実装出来るようになりました。
その後、テキストを読み進めてみました。
ＣＳＳで出来ることは？
今回の試験範囲を勉強しただけでＣＳＳで実現できることはこれだけありました。
①文字に関する装飾（フォント、文字の大きさ、色など）
②マウスクリック、カーソルインなどの操作に対してCSSを適用する
③背景の色変え
④レイアウトの変更（幅、高さの指定、表示位置の指定、設定など）
⑤テキストのレイアウト設定（上線、下線、影、文字の表示方向の設定など）
⑥ボックス（余白、枠線、曲線、影、非表示設定など）
⑦フレキシブルボックスレイアウト（新聞の記事のような表示を可能とする）
⑧アニメーション（物体を動かしたり色を変えたり）
CSSを実装してみた
実は↑の見出しも今回からＣＳＳで実装して変えてみました。
はてなブログの場合は
デザイン ＞ カスタマイズ を選択してデザインCSS欄に
CSSを追記するとブログ内の全ての記事に反映されます。
※赤枠内を修正しています。
＜実装内容＞
h4{
background: #FFEFD3; /*背景色*/
border-left: solid 5px #444444; /*左線*/
border-bottom: solid 3px #888888;/*下線*/
padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
color: #494949; /*文字色*/
}
見出しに使用している h4要素に対して、
上記のスタイルを反映するといった内容です。
CSSでは見た目を変えるだけでなく下記の様に
アニメーションを付けることも出来ます。
下記の「touch me」にカーソルを乗せてみてください。
サンプル画面
touch me!!
無限の回転
水色のボックスにカーソルを合わせると伸び縮みし色が変わります。
下の目障りなボックスはtransformプロパティで回転と移動を繰り返しています。
さいごに
HTMLやCSSを勉強する上では実際に試す環境が不可欠です。
（これはどの言語を学ぶときもそうですが…）
もしこれから勉強を始める方がいればブログで色々試してみると面白いと思います。
以上です。
【HTML5認定試験Level.1】part2 要素②
前回の記事（part1参照）でドットインストールのｅラーニングを行い
簡単なHTMLが書けるようになりましたので今回から本格的に
HTMLの勉強を開始します。
テキストはpart0でも紹介した以下のテキストを使用しています。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: Kindle版
- この商品を含むブログを見る
本記事では勉強の中身というよりはこういう心構えで勉強した方が良いという
勉強のコツとなる部分をメインとして紹介していきます。
HTMLにおける要素って何？
HTMLの基本的な書式は以下の様になります。
<h1>はじめてのHTML</h1>
<h1>の部分を開始タグ、</h1>の部分は終了タグと呼ばれています。
h1は見出しという意味を持つ要素です。
文書をh1のタグで囲むことにより「はじめてのHTML」という文は
「見出し」の文書であると意味づけされます。
下記の例ではa要素を使用しています。
<a href = "https://www.yahoo.co.jp/" target="_blank">yahooへ移動する</a>
a要素はハイパーリンクのような機能を持っています。
クリックすると属性「href」に設定したURLに移動することができます。
このように文書に対して役割や意味、見た目の表示など様々な意味づけを
するのがHTMLにおける要素です。
要素に対して設定可能な属性もありますので要素と属性を覚えないと
問題を解くのは厳しいように感じました。
要素の覚え方について
テキストをざっとみましたが覚えるべき要素がかなり多いです。（100個以上）
英単語がそのまま要素名になっているケースは覚えやすいですが
（body, head ,section , strong など…）
略語になっているものは暗記しづらいです。
（ ol, ul, tr, th, td など…）
覚えるときは元の英文の意味を意識しながら覚えると良いです。
ol (ordered list ) ：番号付きの箇条書きリスト
ul (unOrdered list ) ：番号なしの箇条書きリスト
tr (tableRow) ：テーブルの横一行のセルを設定する
th (tableHead) ：テーブルのヘッダ行のセルを設定する
td(tableData) ：テーブルのセル一個分のデータを設定する
コンテンツモデルについて
HTML5では新しくコンテンツモデルという概念が生まれました。
全ての要素は何らかのコンテンツモデルにカテゴライズされています。
要素を覚える際にはどのコンテンツモデルに属するかも意識しておきましょう。
メタデータ・コンテンツの要素:
base, link, meta, script, noscript, style, title
フロー・コンテンツ
body要素(<body>～</body>)内で記述されるHTML文書のほとんどの要素
セクショニング・コンテンツ
文書のセクション(節や章などのまとまった区分)を表す要素が属します。
ヘッディング・コンテンツ
セクションの見出しとなる要素が属します。
フレージング・コンテンツ
テキストの要素が属します。
エンベッディッド・コンテンツ
画像や動画などの外部ファイルを文書に埋め込む要素が属します。
インタラクティブ・コンテンツ
ユーザーによる操作に対応する要素が属します。
要素が持つ意味について
HTML5認定試験では要素がどのような意味を持つのか
問いかけてくる問題が出題されます。
例. 広告や補足記事などのように文書のメインコンテンツと関連性が薄く、
切り離せるセクションを構成する要素は次のうちどれか。
・aside要素
・footer要素
・article要素
・section要素
・nav要素
正解はaside要素です。
要素を設定することにより見た目や処理がどのように変わるかだけでなく、
どのような意味合いを持っているのかも覚えておく必要があります。
さいごに
要素と属性だけでもかなり覚えることがあり思ったより勉強が進んでいないです…
WEBエンジニアの方はこれだけの物量を暗記しているのかと本当に尊敬します。
以上です！
【HTML5認定試験Level.1】part1 要素①
今回からはHTML5の勉強を開始します。
前回の記事で試験範囲は以下に分かれるとご説明しました。
- 要素 主にHTMLを構成するタグやタグに設定可能な属性について
- CSS ウェブサイトの見た目を設定するCSSの設定方法など
- レスポンシブWEBデザイン
スマホ、タブレットなど様々なデバイスでのレイアウトの設定方法 - APIの基礎知識
APIを用いて様々なコンテンツ（音楽、動画、位置情報、ブラウザ間の通信）を作成する - Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術
今回勉強するのは要素でHTMLを書く上で最も基本的な部分になります。
しかしながら、筆者は業務でHTMLを書いたことがなく知識もほぼ０に近いです…
まずHTMLとは何なのか？イメージを掴む為に下記サイトで
HTML入門（全24回）を受講しました。
ドットインストール
１本１本の動画が2 ～3 分程度なのでそこまで時間はかかりません。
ただ説明が早いのと理解するために見直したりするので
倍ぐらいの時間はかかると思った方が良いです。
このｅラーニングで良かったところは最初に環境作りの説明があるのと
HTML5の仕様を確認するサイトを教えてくれたところです。
詰まったときに自分で調べることが出来るよう配慮されているのを感じました。
全24回を終えたところで以下のような簡単な画面は作成できるようになりました。
サンプル画面
必須項目が空の状態で確認ボタンを押すと未入力項目について入力を促します。
ちなみに全部入力してボタンを押しても特に何も起きません。
実際に入力したデータを送るにはPHPやjavascriptの処理が必要そうです。
とりあえず今回はｅラーニングを経て簡単な実装が出来るようになりました。
次回はテキスト、ＷＥＢ問題集あたりをやっつけていこうと思います。
【HTML5認定試験Level.1】part0 勉強方法
目次
１．HTML5認定試験ってどんな試験？
いよいよ資格取得に向けて動き出すこととなりました。
HTML5認定試験がどのような人材に向けた資格なのか
公式サイトの文書を転載しています。
上記のスキルと知識を有することの証明になりますとのことです。
興味がある方は下記の公式サイトをご参照ください。
２．試験範囲について
大きく分けて以下の５つにカテゴライズされます。
- 要素 主にHTMLを構成するタグやタグに設定可能な属性について
- CSS ウェブサイトの見た目を設定するCSSの設定方法など
- レスポンシブWEBデザイン
スマホ、タブレットなど様々なデバイスでのレイアウトの設定方法 - APIの基礎知識
APIを用いて様々なコンテンツ（音楽、動画、位置情報、ブラウザ間の通信）を作成する - Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術
上記のカテゴリ順に勉強を進めて行く予定です。
３．勉強方法
大きく分けて以下の３つの手段で勉強を進めていきます。
・対策テキスト・問題集
・ドットインストール（勉強用動画サイト）
・ping-t（同じく勉強用のサイトであるがこちらはWEB問題集を解く）
※試験合格後におすすめの勉強方法を以下にまとめています。
勉強方法を参考にしたい方は下記の記事をご参照ください。
３－１．対策テキスト・問題集
まずは試験範囲の全てをカバーするためテキストを購入。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版 (Mynavi Examination Library)
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (2件) を見る
ざっと読んでみましたが目次欄に各カテゴリの要素が一覧になっているのが
調べ易くて良かったです。ちなみにこんなイメージです↓
全体構造 -- 034p セクション -- 041p リスト -- 071p
html要素 -- 034p h1 ~ h6要素 -- 044p ol要素 --072 p
head要素 -- 035p section要素 -- 045p dt要素 --074p
３－２．ドットインストール（勉強用動画サイト）
HTMLだけでなく様々な勉強が可能なサイトです → https://dotinstall.com/
HTML、CSS、Javascriptは無料で基本的な部分は学習できるのでおすすめです。
動画内でHTMLの実装をガシガシやってますので参考にしつつ自分で色々試すことが出来ます。環境作りから教えてくれるのも初心者には嬉しいです。
３－３．ping-t
こちらも勉強用のサイトになります
上記の通り、LPICやCCNA/CCNP、オラクルマスターなど様々な資格試験をカバーしております。HTML5は有償コンテンツのため課金する必要があります。
ただ、有償な分、こちらのサイトのWEB問題集は評判が良いです。
一度解いた問題は履歴に残っており苦手分野の問題だけ解き直すことも出来ます。
サイトに誘導されるままひたすら問題を解き続ければ苦手分野を克服し
かつ、全体を網羅することも出来そうです。
正解の解説もとても細かく説明されていて理解しやすいです。
私はLPICも受験する予定のため６か月分（4,800円）課金しました。
４．さいごに
上記の勉強方法はこれから実施するため本当に良いやり方かはわかりません。
試行錯誤しつつより良い方法があれば随時アップしたいと思います。以上です。
今後始めたいこと
なんちゃってＳＥを脱却したいと言ったものの何をすべきか？
日本はサイバーセキュリティの人材が不足しているという記事をよく目にします。
コインチェックの仮想通貨流出事件もセキュリティの甘さから起きましたし…
というわけで今後セキュリティのスキルが高い人材は重宝されるはずなので
セキュリティ関連のスキル習得を目指したいと思います！
現状の保有資格
今持っている資格は以下のみです。
・LPIC 101(102は未取得）
取得したい資格
体系的にスキルを習得するなら資格を取るのが手っ取り早いと
思いましたので以下の資格取得を目指します。
・情報処理安全確保支援士（旧セキュリティスペシャリスト）
・HTML5認定試験
情報処理安全確保支援士試験の範囲を調べてみたところ当然なのですが
サイバー犯罪に関する出題が多く、ＷＥＢやサーバに関する前提知識が
必要であると感じました。
筆者はＷＥＢやサーバに関する知識は乏しいのでせっかくだから
HTML5を勉強してみようと考えました。LPICもＷＥＢサーバの知識を
補完するためです。
最後に
当分は資格取得に向けての話なんかが多くなると思います。
色々調べているうちにＣＴＦ（CaptureTheFlag）なんかにも興味が出てきました。
その辺も記事に出来ると良いなぁと思いました。以上です。
自己紹介 ～ 当ブログの趣旨
当ブログはタイトルにあるようになんちゃってＳＥから脱却し
ＩＴプロフェッショナルを目指していく様を書き起こして行きたいと思います。
ここで言うなんちゃってＳＥとはどれぐらいの技量を持つ人を指すのかと言うと
以下に該当する人と考えています。
①自分の得意分野でしか仕事ができない
（ＩＴ全体の知識が乏しいため何か起きた時の勘所が悪い）
②一からコーディングできない、基本コピペをベースにして改修を行う
③最新技術に興味がない
筆者はＳＥ歴８年になるが長年同じプロジェクトにいるため
新しいことを学ぶ機会が無く正直惰性で仕事をしています。
しかも外部ＮＷから切り離されているのでインターネットも普段はできません。
さらに仕事は毎日残業な上、終電ぐらいになることも多いです。
そんな環境で仕事を続けるうちに新しいことを学ぼうとする意欲も無くなり
自己研鑽することもなくなんちゃってＳＥのまま今に至っている状況です。
最近ネットニュースやテレビを見ていると技術の発達が目覚ましく思えます。
そんな中今後の自分がやっていけるか危機感を感じ始めたので新しいことに
チャレンジしてみようと思います！
基本的にはＩＴ関連の記事になるかと思いますがそれ以外も書いていきます。
今後ともよろしくお願いいたします。
