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

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

就労移行支援事業所でHTML5を学ぶ②(入れ子構造ほか)(第3回)

就労移行支援事業所にはじめて通うことになったminminです。

 

横浜市の新横浜にある、きれいな事業所で今日も頑張ろう。

オンライン授業のschooを使ってhtml5を今日もやっていこう。

 

今日の講座は第2回目、

「HTML入門 入れ子構造を学ぶ」

というテーマ。

目次はこんな感じ

 
  • 【実践】メニューをリストタグで作る
  • 00:38
 
  • いろんなグローバルナビを見てみよう: パターン1
  • 02:57
 
  • いろんなグローバルナビを見てみよう: パターン2
  • 01:59
 
  • schoo WEB-campusのWebサイトで使われているulを見てみよう
  • 05:54
 
  • 2種類の箇条書き、ulとolの解説
  • 01:11
 
  • 順不同リスト「ul」について
  • 01:49
 
  • 順序リスト「ol」について
  • 00:55
 
  • リストタグ作成でやってはいけないこと
  • 06:35
 
  • 定義リストを作る
  • 00:05
 
  • 定義リストを作る: dl, dt, ddタグの解説
  • 02:06
 
  • 定義リストを作る: dfnの解説
  • 04:27
 
  • 表組みを作る
  • 02:35
 
  • 【実践】表組みを作る


入れ子構造でセットになるタグを勉強していきました。ulとliタグはしょっちゅう使いそう。定義リストはなんかピンと来なかったですが、システム関係の知り合いが口癖で「定義する」「定義は?」みたいなことをよく口走るを思い出してしまいました。

面白かったのは表組み。
tr、th、tdタグは最初はとっつきにくいが、どんな表を作りたいかをイメージして組み合わせていくと結構あっさりできました。

先生は、テーブル設定は難しいと思う人が多くて、ドリームウェイバーで?デザインモードで表を書く簡単な方法があるけど、しっかりhtmlで作れる方が良いと話してたので、あっさりできてなんか嬉しいかも。といっても、難しい表はまだ作っていないし、きれいに見える表ができるのかが今後の課題だなあ。

 

勢いあまってhtml5の第3回も受講してしまいました。

第3回のテーマは

「HTML入門 属性と要素」

なんか難しそうなテーマ名でした。

目次はこんな感じ。

 
  • 開始タグと終了タグ
  • 00:28
 
  • 開始タグと終了タグ: 終了タグのないタグ<br>
  • 01:26
 
  • 開始タグと終了タグ: 終了タグのないタグ<hr>
  • 02:52
 
  • 開始タグと終了タグ: 終了タグのないタグにcssは当たるのか?
  • 01:37
 
  • 属性と要素
  • 04:34
 
  • 【質問】imgタグ内のheight属性とwidth属性はHTML5で廃止されたか
  • 06:26
 
  • グローバル属性
  • 00:21
 
  • グローバル属性: 文字の流れる方向を決める dir
  • 02:56
 
  • グローバル属性: 実はどこでも使える lang
  • 01:06
 
  • グローバル属性: 実はどこでも使える title
  • 01:55
 
  • グローバル属性: tabindex
  • 02:45
 
  • グローバル属性: accesskey属性
  • 08:59 
  • map要素の属性: img要素の中にリンクを指定
  • 00:57
 
  • map要素の属性: map要素とarea要素
  • 08:03

 

改行タグbrをデザインをきれいに見せるために使っては絶対にいけないというのは勉強になりました。文脈上必要な時のみ。
htmlは機械が文書構造を理解するために使う言語で、人の目でみた見た目を意識したデザインはcss3が担当するのでという説明がしっくりきました。
同じ理由からhrタグ、水平線もああそうかと納得しました。

セマンティックコーテイングになって、見た目に関係したタグはhtml4まではあったそうですが、html5からは全廃されたとのこと。昔に学んで慣れた人は大変だなあと思いつつ、WEB技術は日進月歩で進化しているから、日々勉強しないダメなんだろうなあ。

 

 f:id:minmin999:20161222094959p:plain