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

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

就労移行支援事業所でCSS3を学ぶ①(概論・文字デザイン)(第5回)

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

 

さすがに12月は寒いですが、今通っている新横浜の事業所は眺望がほんと綺麗です。

空気が冷たいとやっぱり良く見えますね。

 

1時間、WEBデザインの授業を受講しているのも大変な集中力が必要で、とても一気にやり切れる感じではありません。

途中で外の景色を見たりして休憩しながらやっています。

ちなみに眺望はこんな感じですよ〜。

 f:id:minmin999:20161222191830j:plain

さて、こんな景色をながめながら早速勉強開始!

HTML5入門が終わって、今日から新しくCSS3入門がスタート

今回も引き続き、オンライン授業のschoo、スク―を使って受講開始。

今回受ける授業はこちら

HTMLでも授業を担当されていた田中晶子先生が引き続きCSSを教えてくれる。田中先生は結構親身で、途中で脱線したりうまく操作が反映されないなど、ハプニングもありますが、毎回1時間の長い講座で、なんとなくそんなゆるーい感じが入ると気が休まるかも。

 

全6回とHTML入門よりは1回多いけど、気合いれてやっていこう。

第1回のテーマはこちら

「CSS入門 CSSとは何か?」

目次はこんな感じ。

 
  • サイトの見た目担当がcss
  • 00:24
 
  • サイトの見た目担当がcss: 【実演】 CODEPENというWebサイトで実際のcssを見てみよう
  • 07:54
 
  • 【問い掛け】サイトの見た目担当がcssだとすると、htmlの役割は?
  • 01:53
 
  • サイトの見た目担当がcss: htmlとcssの役割の違い
  • 01:28
 
  • サイトの見た目担当がcss: htmlについて
  • 01:34
 
  • 簡単なhtmlを書いてみよう
  • 07:06
 
  • cssの書き方
  • 02:01
 
  • 【実践】cssの書き方: cssの3つの記述方法
  • 11:37
 
    • Webについて学ぶ方法: オススメの参考書などというものはない

 

htmlを前回押さえられていたので、それを踏まえてのCSSだから理解がしやすい授業でした。

勢いあまって、第2回も引き続き受講しました。

今回のテーマはこちら。

「CSS入門 文字デザインのすべて」

目次はこんな感じ

 
  • フォントファミリー
  • 04:09
 
  • フォントファミリー: serif体とsan-serif体について
  • 02:35
 
  • フォントファミリー: フォントファミリーの指定で⼀番大切な事
  • 06:45
 
  • フォントファミリー: MacとWindowのフォント一覧
  • 03:02
 
  • フォントファミリー: OSごとの標準フォントの紹介
  • 07:00
 
  • 美しい文字をデザインしよう
  • 02:11
 
 
  • Google web fonts: 【実践】Google web fontsを使って実際にcssで指定していきましょう

 

フォントの種類もいろいろあって、OSによって対応できるものとか、できないかものとかがあり、複雑。でもその文字によってサイトの雰囲気がガラッと変わってしまうのでとても重要ですね。

グーグルウェブフォントも紹介してもらいましたが、便利な機能だと思いました。

f:id:minmin999:20161221164339p:plain