2021.04.01

Webデザイナー向けHTML/CSS勉強会まとめ#1

: みのむし

こんにちは！Webデザイナーのみのむしです。
1年半ほど前から主にWebデザイナー向けにフロントエンドエンジニアの方からHTML/CSSの勉強会を開いていただいているのですが、せっかくなので学んだ内容を振り返っていきたいと思います。

▼勉強会の内容は以下の通りです。

参考ページのトレース・完成目指して、週に2回5分ほど作業をし作成を進める
→作業環境 https://codepen.io/
参考ページのhtml/css を考えて各自で書く
各自URLをChatWorkに投稿し、フロントエンドエンジニアのNさんがチェック
間違った記述やこちらの質問があった場合はNさんからレビュー有り

トレースするサイトはレスポンシブ有りか無しか選べたのですが、自ら難易度を上げて「レスポンシブ有り」にしました。
Webサイトめぐりをしていてもほとんどがレスポンシブ対応になっているのでこれを機にフレキシブルレイアウトの構造に強くなれればなと・・・！（願望）

INDEX

初期設定が肝心
情報構造・HTMLタグを知る
Chromeデベロッパーツールは便利
レスポンシブコーディング
おわりに

初期設定が肝心

これはデザイナーも共通して言えるのですが、フォントやテーマカラーの初めの設定がめちゃくちゃ大事です。
コーディング時はbodyタグに指定するCSSが重要になります。

▼こちらがNさんから教えてもらった初期設定

【font-family】
Win,Mac用に複数指定されているか
【color】
ページの基本文字色になっているか
→CSSで都度指定を減らすため
【font-size】
ページ内でもっとも多く使用するだろうフォントサイズになっているか
→CSSで都度指定を減らすため
【line-height】
ページ内文字の基本のline-heightを指定しているか
→こちらもCSSで都度指定を減らすためなのですが、デザイン時から基本line-heightまできっちり決めて進めることがあまりないため（反省）新規でページ制作などする際はline-heightまで計算してなるべくコーディング担当者の負担を減らさねばと思いました。

上記の4つがページのbody(html)タグに必要としている情報になるため、Webデザイナーはこれらの土台の設定を初めにカチッと決めておかないと後からズレが出てきたり破綻してしまったりに繋がります。
少し時間がかかってしまっても良いので、このような初期設定は固めておきたいですね。

情報構造・HTMLタグを知る

Nさん「コーダーはデザインを見たときに、h1,h2,p,sectionなどの情報構造はどうしよう、、と考えます」

とのことで、デザイナーも「ここが大見出しで、小見出しで、ここまでが一つのセクションで、、」と考えながら制作する必要があります。

そのためにはある程度のHTMLタグを知っておかねばです。
ヘッダーには”headerタグ”、ナビゲーションには”navタグ”、といったように、要素に適応したタグを使用することが推奨されているそうで、そのようなタグを理解しているだけでもデザイン時における裏側想像力アップに少し繋がりそうですね。

▼ここらへんはWebデザイナーも知っておくべきであろうhtmlタグ

body	文書の内容を表す。この中に書かれたものがブラウザに表示される。
head	HTMl文書のヘッダ部分。説明文やタイトルなどを記述。スタイルシート(CSS)のリンクもこちらに記述して読み込ませる。
meta	言語や説明文など、ページの情報。
title	ページタイトル。ブラウザのタブやブックマークしたときのページタイトルとして表示される。
h1～h6	見出しタグ。最も重要な大見出しにh1タグ、小見出しをh2タグ、次の小見出しをh3タグ…というように、数字の順に記述。
header	ページ上部にある要素。ロゴやページタイトルなどをまとめる。
main	ページのメインコンテンツ部分を表す。
footer	ページ下部にある要素。利用規約・プライバシーポリシー、コピーライトなどをまとめる。
p	段落を指定するためのタグ。
img	画像を表示。src属性で表示させたい画像を指定、alt属性で画像を説明するテキストを記載。
a	リンクの指定に利用される。href属性でリンク先を指定。
section	一つのセクションであることを示す。
div	特に意味を持たない。一つのグループとして使用できるタグ。便利。
span	特に意味を持たない。CSSで一部分装飾するときに使用。便利。

Chromeデベロッパーツールは便利

Webページのトレース時にとても便利なChromeのデベロッパーツール。
こちらは、Google Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML・CSS構成や表示などを確認できるスグレモノです。
私もデザイン時に「このサイトのこのフォントサイズにこの文字間、ちょうど読みやすくて良いな〜」みたいな時に使用していました。
なんとこのデベロッパーツール、ホバー時のテキストの色などもわかるとのこと・・・！

▼この宮崎クリエイターズブログ、トップページの「デザイン」「コーディング」などのメニューをホバーすると色がそれぞれ変わるのですが（気づいてました？＾＾）
ぱっと見ではメニューのホバー時の色の情報がわからないですよね・・・

そこで、デベロッパーツールのスタイルエリアの上部にある「:hov」をクリック。
すると「force element state」という要素がフォーカスされたの時のスタイルが出現します。
そこでさらに「hover」にチェックを入れると、ホバー時の色など指定された内容がわかるという仕組みになっております。

これって意外と知られてないんじゃないかなぁと思い、今回のまとめに入れてみました。
ホバーアクションのバリエーションを知れるだけでもデザイナーにとってはけっこうな収穫ですよね。

レスポンシブコーディング

bodyタグに初期設定をし、ページ全体の構成を頭に入れつつ、スタイルがわからなくなった時はChromeのデベロッパーツールで確認し、、と、私にしては順調にコーディングを進め、無事PCページを綺麗に表示させることに成功しました。
しかし今回はレスポンシブ有りコースのため、モバイル向けのコーディングも必要です。

レスポンシブコーディングをするにあたり、新たに知った言葉が「メディアクエリ」と「ブレイクポイント」です。
メディアクエリとはデバイスや画面環境に応じて適用するスタイルを切り替えたい時に使用する機能で、そのスタイルが切り替わる境目をブレイクポイントといいます。

こちらの画像で言うと、「画面サイズが768pxより小さい場合(モバイル向け)に以下のスタイルを適用してね！」「ブレイクポイントは768pxだよ！」ということになります。

これで、画面のサイズが767pxまではモバイル向けの表示、768px以上でPC版の表示に切り替えられたので思った以上に簡単だなと感じました。
(※今回人生初のレスポンシブコーディングということもあり、and や not、only といった論理演算子を用いた複雑なメディアクエリを使用せず、全てのデバイスに適用するようall と and を省略した記述を採用しています。)

あと、HTMLは何も変更しなくてOKというのも初めての発見でした。