今回からは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のもたらす効果を重ね合わせる（カスケードする）ことができる。^{[注釈 1]}

勉強方法

要素編と同じになりますがまずは慣れることが大事なので

下記サイトのCSS入門、CSS3入門をやってみました。

■ドットインストール

https://dotinstall.com/

入門編が終わったところである程度ＣＳＳを実装出来るようになりました。

その後、テキストを読み進めてみました。

ＣＳＳで出来ることは？

今回の試験範囲を勉強しただけでＣＳＳで実現できることはこれだけありました。

　①文字に関する装飾（フォント、文字の大きさ、色など）

　②マウスクリック、カーソルインなどの操作に対してCSSを適用する

　③背景の色変え

　④レイアウトの変更（幅、高さの指定、表示位置の指定、設定など）

　⑤テキストのレイアウト設定（上線、下線、影、文字の表示方向の設定など）

　⑥ボックス（余白、枠線、曲線、影、非表示設定など）

　⑦フレキシブルボックスレイアウト（新聞の記事のような表示を可能とする）

　⑧アニメーション（物体を動かしたり色を変えたり）

CSSを実装してみた

実は↑の見出しも今回からＣＳＳで実装して変えてみました。

はてなブログの場合は　

デザイン　＞　カスタマイズ　を選択してデザインCSS欄に

CSSを追記するとブログ内の全ての記事に反映されます。

f:id:peaceWalker:20180223014116j:plain

※赤枠内を修正しています。

＜実装内容＞

h4{

background: #FFEFD3;　　　　　/*背景色*/
border-left: solid 5px #444444;　　/*左線*/
border-bottom: solid 3px #888888;/*下線*/
padding: 0.4em 0.5em;　　　　　/*文字の上下左右の余白*/
color: #494949;　　　　　　　　/*文字色*/
}

見出しに使用している h4要素に対して、

上記のスタイルを反映するといった内容です。

CSSでは見た目を変えるだけでなく下記の様に

アニメーションを付けることも出来ます。

下記の「touch me」にカーソルを乗せてみてください。