みなさんこんにちは。ぼんちゃんです。
事前受講6日目です。
段々と内容が難しくなり、あたふたしております…
それでは今日も行ってみましょう！
色々立て込みすぎて投稿が遅れてしまいました。
進捗
これまでに
Lesson0〜Lesson6(課題未提出)
まで進んでいます。
※事前受講中は課題提出ができません。
今日やったこと Lesson7
Lesson7(webページのレイアウト)のまとめ
webページは大きく分けて「ヘッダー」「コンテンツ」「フッター」の3つの要素でできています。
代表的なレイアウトとして、1カラム、2カラム、3カラムがあります。
カラムとは、縦方向の列ののこと。
レイアウトを説明する時に、カラムという単語をよく使います。
1カラムは1列に並んでいるレイアウトのこと。
2カラムはコンテンツが2列.3カラムは3列に並んでいます。
それぞれのレイアウトについて
1カラム
個人ページやコーポレイトサイトに使用されます。
<特徴>
情報量を絞ることができる。
ダイナミックな表現が可能。
最近は1カラムが主流になっている。
2カラム
ブログ、メディア系などに使用されます。
1カラムにメイン記事を、2カラム目にランキングなど、記載。情報量が多い時に使用。
<特徴>
様々なページにアクセスしやすい。
3カラム
情報量が多い時に使用します。
左右にサブカラム、中央にメインカラムを配置。
フルスクリーンカラム
画面いっぱいに要素を展開させるレイアウトのこと。
1カラムと相性がいいです。
1カラムとフルスクリーンカラムの組み合わせの相性が良く、最近の流行りです。
例えば、
ページの最初はフルスクリーンで、ページを進めると1カラムになる。
視線誘導
画面を眺める人の視線を誘導すること。
視線誘導を意識することで、ユーザビリティの優れたwebページになります。
z型
視線の方向がz型に流れていく
チラシや雑誌で使用される。
内容をしっかり伝えたい時に使用される。
F型
視線の方向がF型に流れていく
ニュースサイトなどで使用される。
コンテンツ量が多い時に使用される。
グーテンベルグダイアグラム
視線の方向が左下から右下に流れていく。
テキストの比重が大きいものに使用される。
flexbox とは
最近のwebレイアウトの主流のプロパティ。
floatより簡単で、柔軟なレイアウトが可能。
flexboxはコンテナ(親要素)とアイテム(子要素)
に分けられる
flexboxの使い方
HTMLの親要素にdisplay: flex;を指定する。
各要素にプロパティを指定する。
プロパティに関しては今回は、省略。
下のサイトがわかりやすかったのでよければ！
感想
これまで、何も意識せずにwebサイトを見てたなあと。
これからサイトを見るときはどういうレイアウトなのかを意識して見ようと思います。
今、iPhoneからwebサイトを見ているが、ほとんどが1カラム。視線誘導はF型が多いのかなと！
これは、画面の大きさと、スマホの使い方からこういうレイアウトになっているんだと思います。
次はiPadでサイトを見てみよう。
ちなみに、flexboxって何がそんなに画期的なの？と思っております…
僕には正直まだ凄さ、便利さがわからない。
これからコードを書いてみて、どれだけ便利か確認しよう。
次のレッスンからいよいよコーディング！
不安しかないけれど、前には進んでる。
いよいよ、11日から講座が本格的にスタート！楽しみだけど、不安の連続。
何が不安って、本当にwebデザイナーと名乗れるようになるのかですね。
それに伴って転職できるのか、フリーランスとして仕事をとっていけるのかなど、挙げたしたらきりがありません。
こういうとき、変な余計なことまで考えてしまいます。これまで本当に自分は何かを成し遂げたことがあったのかなとか、この仕事もやりたくなくなったらどうしようとか、考えなくてもいいことを考えてしまいます。
今は一緒に頑張る仲間がほしいですね！
上も下もなく、お互い励まし合うそんな関係の仲間が欲しいです。
そんな不安を抱えた方、一緒にwebデザイナーを目指してくれる方は是非メッセージをください！^ ^
