Webクリエイター能力認定試験:合格までの体験談(その6)

Webクリエイター能力認定試験 Webクリエイター能力認定試験

この記事では、私がWebクリエイター能力認定試験(エキスパート)に合格するまでの勉強過程を残します。

私が現在受講しているのは、職業訓練センターでの合計10回(30h)の講座です。

最終的にWebクリエイター能力認定試験を取得するための勉強です。

  • なぜWebクリエイター能力認定試験を勉強することにしたのか?
  • 私の経歴・資格
  • なぜ、Webクリエイター能力認定試験を独学でやらないのか?

こちらついては下記の記事をご覧ください。

Webクリエイター能力認定試験:合格までの体験談(その1)
私がWebクリエイター能力認定試験(エキスパート)に合格するまでの勉強過程を残します。 私が現在受講しているのは、職業訓練センターでの合計10回(30h)の講座です。 最終的にWebクリエイター能力認定試験を取得するための勉強です。

【6日目】Webクリエイター能力認定試験講座

よくわかるHTML5&CSS3 ウェブサイト構築の基本と実践 (FOM出版のみどりの本) [ 富士通エフ・オー・エム ]
を153ページ(第7章)〜193ページまでやりました。(第9章・STEP2までが完了)

今回の講義内容は、Webページの動作検証(基本テキストを読むだけ)・表の作成・サイドメニューの作成でした。

中でも表の作成やサイドメニューの作成は、Webサイトの見やすさを重視するときには身につけておきたい内容でしたので、とても参考になりました。

サイドメニュー

上記は、汚いメモですがサイドメニュー作成の考え方はなるほどと感じました。

手順的には、まずはメインの部分にサイドメニューの元を作り(aside・ul・liで作成)、それを後から配置を変更して横に持っていくとのことでした。

【6日目】学び

  • metaタグはWebサイトには表示されない。(キーワード・サイト説明を検索エンジンに教えるもの)
  • 「こちら」というリンク元名は使わない。使うなら「リンク先の見出し名」とする。
  • 検証は色々なブラウザ(主にSafari・Chrome)で行っておく。(もちろんスマホ画面も)
  • 表を作成する際のborder=1(html側)は仮の線。(CSS側で線のスタイルを作る)
  • 表の罫線は、今どき1本が主流(border-collapseプロパティを使うのが主流!)

metaタグに記載した内容は、Webサイトで表示されないということを今更知りました。
WordPressを使ってるとここらへんの知識が曖昧なので勉強になりました。

自分が今まで作っていた表がなんかダサいなと思ってたのですが、罫線が2本だったからと気づかされました。
この収穫は大きかったです。

【6日目】難しいと感じた箇所

よくわかるHTML5&CSS3 ウェブサイト構築の基本と実践 (FOM出版のみどりの本) [ 富士通エフ・オー・エム ]
の174ページ(表を構成する要素)です。

表を作る際に使うタグの「table・tr・th・td」がいまだに慣れません。

表の完成イメージをしながらhtmlを書くことで逆にこんがらがってくるんですよね。

慣れの問題かと思いますが。。。

Webクリエイター能力認定試験講座はこんな人におすすめ

社内で簡単なマニュアルをHTMLで作る方にもおすすめですね。

知ってると知っていないとでは、周りの目も変わってくるかと思います。

サラッとHTML&CSSでマニュアルを作れたらカッコイイです!

Webクリエイター能力認定試験講座の感想

今回、自分の作る表がダサい理由がわかって本当に良い回となりました。

表の罫線は1本これが本当に大事です。

HTMLのtableタグ(border=1)でやろうもんなら本当にダサいです・・・

でもこのダサい表の作り方は、HTML&CSSリファレンスの本に書いてあったんですよね。
(危ない危ない。)

あとはサイドメニュー作成の流れを知れたのも大きな収穫でした。

WordPressを使ってるとサイドメニューは自動で作ってくれるので、どうやって作られているのか知ることができて知識が深まりました。