いずべママ実際に講座の生徒になった私が、Fammのママ向けWebデザイン講座の授業内容や自主学習のリアルをお伝えしたいと思います。
ちなみに当記事を書いたのは、第1回の授業が終わって19日が経過したところです。
Fammのママ向けWebデザイン講座を受講するかどうか悩んでいる方は、ぜひこの記事や関連記事を読んで、自分が受講する姿を想像してみて欲しいです。
Fammのwebデザイン講座の第3回目の授業を終えての感想
だんだん難しくなってきました。
みんなで一斉にCSSのコード入力を行うのですが、入力すべき箇所を見つけるところで遅れをとってしまうと、入力自体も遅くなって焦ってしまいます。先に先生が入力して見せるのですが、コードが全く覚えられてなくて（汗）、何入れたらよかったっけ・・・ってなってフリーズしがちでした。
CSSのコードとその短縮版（入力する時は短縮コードを入れると予測変換できます）をまとめておく必要があると思いました。
Fammのwebデザイン講座の第3回目の授業内容
授業はZOOMです。15分前から接続可能です。（第1回のみ30分前から可）
最初に事務局の方が、今回使用する「Visual Studio Code」が起動できているかと、「Live Share」用のアドレスが準備できているかの確認がありました。「Live Share」を行うことで講師側でも生徒の「Visual Studio Code」画面を見ることができるようになります。(本来は共同編集する際に使う機能です)
講師がzoomにログインできたら、「Live Share」用のアドレスをチャットで送りました。
しかし、先に第3回のファイルを「Visual Studio Code」で開いておく必要があり、私は前回の第2回のファイルのまま送ってしまったので、再度アドレスを送り直しになりました。次回から気をつけたいと思います。
第3回目の授業は次のような内容でした。
①Viewportについて
表示をスマートフォンなどの画面の幅に合わせるようにする設定のこと。
Head内にviewportの設定を書く必要がある。
②リセットCSSについて
元々ブラウザにCSSが入っているので、HTMLだけ作っても、それなりに表示はされている。
でも、自分でCSSを作りたい時はそれが邪魔になっちゃうから「リセットCSS」を入れることによって一度更地にしておく。
誰かが作ったものが既にあるので、それを入れるだけ。種類はたくさんあるので用途に合わせて使用する。
③ウェブページ作成時のフォントについて
フォントは3種類ある。
①標準フォント（おまかせフォント）を使う
PCごとに表示するフォントが変わってしまうが、MacやWindows等デバイスが標準としているフォントで表示させる方法。
②画像にして埋めちゃう
料亭のサイトの縦書きで手書きのお品書きは画像にしちゃえ。
③ウェブフォントを使う
googleフォント等から指定する。サイトの訪問者は知らない内にフォントをダウンロードさせられることになるが、指定通りのフォントで表示させることができる。
通信回線速度によっては表示に時間がかかる可能性がある。ダウンロードされるまでの間の数秒間、違うフォントで表示されたりする。
表示にかかる時間が3秒を超えると60％の人が離脱すると言われているので、表示速度も大切。
④「Google Chromeデベロッパーツール」の説明
VSCodeの右下にある「Go Live」をクリックすると、ブラウザで出来上がりを確認できます。この画面で「F12」と「fn」を押すと、デベロッパーツールが開きます。
デベロッパーツールを使用する時の注意点
- html画面で「Go Live」を押すこと。（CSS画面を開いて押すとうまくいかない）
- デベロッパーツール画面上でのCSS等の変更はVSCodeに反映されない。ただのお試し。
- 表示画面サイズは変更できる。最小サイズを基準にすべし。現在はiphoneSE（横幅375）
⑤「Visual Studio Code」を使って、実際にCSSを作る
講師が用意したhtmlファイルとCSSファイルは未完成になっていて、入力したい文章は入っていますが、司令がコメントで入っています。その司令に合わせて、作っていきます。
前回同様、少し講師が作成したら、次に生徒が同じように操作してみる。の繰り返しです。
今回もLive Shareで講師が画面を確認できるので、出来た時に手を挙げなくてもいいシステムでした。
クラスをつける作業はhtmlファイルにも入力が必要でしたので、htmlファイルも触りました。
CSSファイル入力時に予測変換を活用する
入力コードを入れて、tabキー（数字の1の下の→｜ボタン）を押すことで、予測変換してくれます。
今回の授業で使ったのは、以下の通り。
| やりたいこと | 入力コード | できあがりコード | 注意点 |
| 背景を塗る | bgc | background-color: #色; | |
| 文字の色 | color: #色; | ||
| 上下40px、左右20pxの余白を開ける | p40-20 | padding: 40px 20px; | 数字が3つの時は、上→左右→下の余白を意味する |
| 下の余白（margin-bottom）を20px | mb20 | margin-bottom: 20px; | |
| 全方向に余白（中央揃え） | m:a | margin: auto; | block要素かつ横幅(width)の指定が必要 |
| 文字のサイズ18px | fz18 | font-size: 18px; | |
| テキスト中央ぞろえ | tac | text-align: center; | |
| 画像を丸く | bdrs50p | border-radius: 50%; | 正方形の画像でないと円にならない 20pxとかで角円にもできる |
| inlineをblockに変更 | db | display:block; | <a>の横幅を変更したい時等に使用 |
| クラス名(例:access)をつける | div.access | div class=”access” | 終了コードの</div>も同時にできるので切り取って使う |
⑥同じ名前の要素には名前（クラス）をつける
特に<div>はたくさん使うので、名前をつけて区別する必要がある。
同じ苗字の人がいたらファーストネームで呼び分けるはず。そのファーストネームをつけてあげる作業。CSSファイルではなく、HTMLファイルで名前をつけてあげる。
HTMLファイルで「div.」まで入力すると、予測変換できる。
CSSでそのファーストネーム（クラス）を使う時は、「.名前」と前にドットを付けて区別する。
⑦paddingとmarginの違い
HTMLの開始タグ〜終了タグまでを「要素」と呼ぶ。
HTMLタグを確認して、
親要素と子要素の間の余白→padding
子要素同士（兄弟関係）の余白→margin
と使い分ける。
⑧HTMLの表示型 blockとinlineの違い
タグごとにどちらに属するかが決まっている。
| block | inline | |
| タグの種類 | ほとんどのタグ | <a>等一部のタグ |
| 改行 | 文末で勝手に改行される | 改行されないので、文章に入れ込むことができる |
| 余白(margin) | 上下左右に余白ができる | 左右のみに余白ができる |
| 余白(padding) | 上下左右に余白ができる | 上下左右に余白ができる |
| 横幅(width) | 指定可能。指定しないと100％の扱いになる | 指定不可（要素の端から端まで） |
inlineのものの横幅を変更したい場合は、blockに変更する必要がある。
cssファイルに （入力コードdb→）display:block; を入れればblockに変更できる。
⑨課題の説明
今回の課題の説明がありました。
前回の課題で作成したワイヤーフレームを使って、デザインカンプを作成して提出します。Photoshop、Adobe XD、Figmaが使用できます。
グリッド内に作ることや、余白は均等にとること、丁寧につくることがポイントとのこと。
Fammのwebデザイン講座の第3回目の課題について
オリジナルウェブサイトのデザインカンプを作成して提出
スマートフォン向けとPC向けの2つのデザインカンプを作成します。
Photoshop、Adobe XD、Figmaのどれかを使用します。
Fammのwebデザイン講座の第3週目に私がした自習内容について
いずべママ実際に私がやった学習や、時間の都合上できなかったけどやりたかった学習についてお伝えします。
第3回講座の復習
復習用動画（デベロッパーツールの使い方、blockとinlineの補足）を観たり、授業で作ったCSSを見て上記の予測変換の表を作りました。
デザインカンプ作成のための素材集め
ウェブサイト用の写真画像等を集める必要があり、素材サイトを検索しました。
無料のサイトもたくさんありますが、有料のサイトは写真の質も高く、種類も豊富です。無料サイトをたくさん検索するのは時間がかかってしまうので、できればサクっと見つけたいですよね。
なんと「shutter stock」については、無料トライアルを使えば1ヶ月間で10枚まで無料で画像をダウンロードできます。ただし、1ヶ月を経過すると年間契約プランに移行してしまうので、早めに10枚ダウンロードして解約しちゃいましょう。
Canvaも写真等の素材がたくさんあります。無料でも利用できます。
私はインスタ用に有料契約（Canva pro)を使っているので、こちらからも写真素材をダウンロードしました。まだあまりうまく使えないけど、AIが希望の写真を作ってくれる機能もあります。
第3週目の平均学習時間について
第3回目講座〜第4回目講座前日までの7日間の平均学習時間は・・・
3.86時間でした。
前週よりは減りましたが、目標1日3時間なので、それ以上はできていました。
Fammのwebデザイン講座 受講生の過ごし方・講座全体の感想・受講料無料キャンペーンについて
＼こちらの記事に書いてます／
いずべママ今後も実際に授業を受けてみた感想や私の学習内容等も投稿予定ですので、受講を検討している方は是非、引き続き見てくださいね。
＼続きの記事はこちら／
コメント