読者です 読者をやめる 読者になる 読者になる

就労移行支援事業所でWEBデザインをゼロから学んでみた!

新横浜の就労移行支援事業所でWEBデザイン、PhotoshopやIllustratorといったソフトの使い方からHTML5/CSS3/jQuery、スマートフォンサイト用のコーディング方法、ワイヤーフレーム・デザインカンプの作り方までをゼロから一通り学んだ過程を記録しておきたくて。

就労移行支援事業所でHTML5を学ぶ③(アンカータグ・metaタグほか)(第4回)

HTML

就労移行支援事業所に通うminminです。

 

新横浜にある事業所で今日も頑張って勉強しよう。

schooを使ったhtml5の講座も全5回のうち、3回まで終了。

残り2回を今日終わらせることができるかどうか・・・

 

さて今日の第4回のテーマ

「HTML入門 アンカーリンクの指定法」

目次はこんな感じです。

 
 
 
 
 
 
  • 外部リンクとページ内リンク: 外部リンクについて
  • 00:40
 
  • 外部リンクとページ内リンク: ページ内リンクについて
  • 10:44
 
  • 【問い掛け】aタグに内包できるタグは何でしょうか?
  • 04:21
 
  • カテゴリーとコンテンツモデル
  • 02:29
 
  • カテゴリーとコンテンツモデル: W3Cのガイドページを見てみよう
  • 03:54

 

HTMLがハイパーテキストマークアップラングエッジの略で、まさにリンクで飛ばして、ハイパーリンクたらしめているタグ、aタグ。タグ自体は至って簡単だなあ。昔はインライン要素とブロックレベル要素に分かれていて、aタグはインライン要素なのでブロックレベル要素は内包することができなかったが、html5に変わって基本的になんでも内包できるようになったとのこと。便利になったんだなあ・・・

 

また今日も勢い余って最終回の第5回も受講してしまいました。

第5回のテーマは

「HTML入門 headタグに記述する物」

目次はこんな感じです。

 
  • 本題に入る前に: metaタグとlinkタグについて
  • 03:18
 
  • metaタグ: metaタグとは
  • 00:59
 
  • metaタグ: metaタグの属性について
  • 01:24
 
  • metaタグ: http-equiv 属性について
  • 02:52
 
  • metaタグ: default-styleについて
  • 01:53
 
  • metaタグ: refresh 属性について
  • 04:11
 
  • metaタグ: charset 属性について
  • 09:26
 
  • metaタグ: name 属性について
  • 05:56
 
  • metaタグ: その他のmetaタグについて
  • 09:28
 
  • metaタグ: property 属性について
  • 03:01
 
  • linkタグ: linkタグの属性と属性値について
  • 00:44
 
  • linkタグ: favicon添付について
  • 00:44
 
  • linkタグ: webクリップアイコン添付について
  • 00:43
 
  • カテゴリーとコンテツモデル
  • 05:36

 

head内なので目に見えないところなのですが、その記事を特徴づけるのにとても重要だと分かりました。

特にmetaタグ。http-equivでdefault-styleからスタイルシートを指定したり、refreshも良く見るなあと。ただ最近はhtaccesssを使うことのほうが主流ということでした。

meta nameのdescrptionがSEOでは凄く重要というのも勉強になりました。
ちなみに、グーグルでは検索エンジン最適化スターターガイドというのがあって、グーグルがこんなものまで作っているのかと驚き。descriptionがいかに大事か分かりました。 

f:id:minmin999:20161222090214p:plain

 

 これでとりあえずhtml5の5回講座は終了しました。トータル5時間も途中動画を止めて検索して調べたり、ゆっくりエディタでコードを打ったりして時間的にはもっとかかっているのですが、事業所のスタッフさんにもあまり質問する必要もなく、サクサクいけました。

エディタのATOMを使ってコードを書くのも少し慣れてきたし、あとはサイトを作りながら学んでいけばもっと理解が深まりスキルが高まるなあと。

次回からはCSS3で実際デザインに関係していく内容。さてどうなることか・・・