年に二、三回、初学者向けのHTML・CSS講座の講師をしています。対象は社会人ですから、生徒のほとんどは新人研修の一環で派遣されてきたか、企業のウェブ担をすることになった人たちです。
短い日程では、最低限のウェブサイトを作成するところまでを教えるまでが精一杯ですから、2019年の時点で学んでほしいこと、知ってほしいことを資料にまとめて終了後に渡しました。
許可を頂いたので、その資料の内容を記事として公開します。
理解しやすい表現を優先しているので、もやもやを感じる方もいるかもしれません。その場合はぜひ、補足記事などを書いて教えてくださるとありがたいです。
わかりやすいCSS設計
divでモジュール化しよう
ウェブサイトはページ内で、ナビゲーション、リスト、記事、写真ギャラリーなどの、多くの部品に分かれています。
HTML・CSSコーディングでは、これらの部品を「モジュール」と定義して、部品ごとにdivで囲んでクラス名をつける手法が主流となっています。
この手法で制作すると、二回目以降のサイト制作で部品を切り離して使いまわしたり、修正や間違いがあったときに編集しやすくなります。
<div class="sample">
<h2 class="sample-title">サンプルモジュールのタイトルです</h2>
<div class="sample-contents">
<p>サンプルモジュールの本文です</p>
<p>サンプルモジュールの本文です</p>
</div><!-- /.sample-contents -->
<p class="sample-link"><a href="more.html">詳しくはこちら</a></p>
</div><!-- /.sample -->classの付け方
このとき、ほぼすべてのモジュールは「id」ではなく「class」で管理するのが望ましいとされています。idで定義したCSSは優先度が高くなり、編集や上書きがしにくくなるためです。
また「モジュール名＋ハイフン＋パーツ名」と、ハイフンつなぎで記述するのが一般的です。
※大規模サイトでは、アンダーバーを含む高度な記述が採用されることもあります（BEMと呼ばれています）。
以下の例の通り、階層もできるだけ浅くして定義するのが、最近の主流となっています。
.sample {
...
}
.sample-title {
...
}
.sample-contents {
...
}
.sample-contents p {
...
}
.sample-link {
...
}
.sample-link a {
...
}見出しは要素名で定義しない
「.sample-title」クラスに注目してください。「.sample h2」と書いてもよいはずですが、クラスを作成しています。
これはマークアップの都合や他のサイトへの使い回しで、見出しがh2要素ではなくなったときに、修正が発生しないようにしているのです。
見出しレベルはコンテンツによって変動するので、見出しは要素名で定義しない方が柔軟な設計ができます。
モバイル対応
なぜモバイルに対応する必要があるのか？
スマートフォンが登場した2008年以降、スマートフォンでウェブサイトへ訪問する割合は非常に高くなっています。
幅が狭いモバイル端末での読みやすさに配慮するのはもちろんのことですが、検索エンジン最大手のGoogleが、「モバイル端末に対応していないと判断したウェブサイトの検索結果での評価を下げる※」ことを公表しているため、2019年現在では、ほぼすべてのウェブサイトのモバイル対応が必須となっています。
※デスクトップ専用サイトとして判定するため、モバイル環境においての順位判定に影響する、という意味です。モバイル対応さえしていればコンテンツがめちゃくちゃでも良い、という意味ではありません。
モバイル対応ではないと判定される主な基準
- モバイル端末の画面幅でコンテンツが画面からはみ出す
- リンクボタンのクリックできる範囲が小さい
- リンクボタン同士が近すぎる
- 表示速度が遅い
最低限行いたいこと
「ウィンドウの幅を縮めたときに、下にスクロールバーが出ないよう制作する」のが最低限の対応となります。
以下の工夫で、コーディングの知識が浅くてもモバイル対応は可能です。
- widthではなく、max-widthで幅を指定する
- 画像に「max-width: 100%;」「height: auto;」を指定する（画面サイズに合わせて伸縮するようになります）
- table等の、幅の扱いが難しい要素の使用を避ける
レスポンシブウェブデザインとは
表示している端末に応じてレイアウトを変更させるウェブデザインの手法は、「レスポンシブウェブデザイン（RWD）」と呼ばれています。
画面サイズを条件として適用するCSSを変更する「メディアクエリ」という手法を活用します。
メディアクエリの使い方
これは、画面サイズが768ピクセル（タブレット縦持ち）以上のときに、見出しのサイズを24ピクセル、かつ中央寄せにする例です。
スマートフォンでは基本値の18ピクセルとなります。
※一般にはfont-sizeの単位はem・remを使用することが多いですが、初学者には概念の理解が難しいので、サンプルはピクセルとしています
h2 {
font-size: 18px;
}
@media (min-width: 768px) {
h2 {
font-size: 24px;
text-align: center;
}
}モバイルファースト
上の例の通り、スマートフォンのCSSを定義してから、タブレットのとき、デスクトップのとき、と上書きしていく方が制作がしやすいです。また、シンプルな画面から作りはじめることで、無駄のない設計ができます。
この考え方は「モバイルファースト」と呼ばれています。
古いデザインのサイトが減っている理由
15年ほど前まで、ページ全体のレイアウトはtable要素（巨大な表）や、フレームセットと呼ばれる、画面を分割する技術で作られていました。古いブラウザがCSSを正しく解釈できなかったため、安定して表示できるこれらの技術は広く普及していました。
table要素で作ったサイトは幅が固定されているので、小さな画面で適切に表示できません。このためここ数年はリニューアルが盛んに行われ、それに伴って、古いデザインのサイトは消えつつあります。
俳優の阿部寛さんのウェブサイトは、当時の技術で作られたHTMLを現在も更新し続けており、「貴重な技術遺産」と呼ばれています。興味がある人はソースコードをのぞいてみてください。
http://abehiroshi.la.coocan.jp/
エディタ
Sublime Text公式サイト
ウェブ制作向けのエディタ
講座では、今後の講座との関係で「統合開発環境」と呼ばれるアプリケーションを使用することがあります。ですが、ウェブ制作のみを行っている技術者は、もっとシンプルな「テキストエディタ」と呼ばれるアプリケーションを使用しています。
テキストエディタと統合開発環境の違い
動作が軽い
機能が少ないため起動が早く、動作が軽いです。
コード編集を補助する機能
コードを早く編集することに特化したアプリケーションなので、同じ単語を選択して一度に編集したり、画面を文字単位ではなく長方形に選択したりできます。
テンプレート機能がない
どのプログラム言語のファイルを作成するのかを選ぶと、自動でひな形を作成する機能はありません。ある程度コーディングに慣れている必要があります。
内部サーバーを作る機能がない
プログラムをその場で実行するための、内部サーバーを立ち上げる機能がありません。
※拡張機能を追加するとできるようになるエディタもあります
代表的なエディタ
ウェブ制作者が使用している代表的なエディタです。初心者にとっては、各エディタの違いはあまりありません。どれも無償で提供されているので、好みで選んでください。
Sublime Text
https://www.sublimetext.com/
コーディング向けエディタの先駆けとなったアプリです。便利な機能を早い段階から備え、愛用者の間では「恋するエディタ」とまで呼ばれています。有志が作成した拡張機能も多いです。
Atom
https://atom.io/
コード共有サービス「GitHub」が提供するエディタです。「ハックできるエディタ」と呼ばれ、CSSやJavaScriptなどの、ウェブ制作者が知っている技術でカスタマイズできます。
外観を細かく変更でき、視覚、色覚に障害がある人にも向いています。
Brackets
http://brackets.io/
画像加工ソフト「PhotoShop」を販売しているAdobeが提供するエディタです。ファイルを更新するとChromeが自動的に更新されるライブプレビュー、カラーコードを書くとその場で色を確認できるなど、デザインを同時に扱う人に優しい機能があります。
日本語のガイドブックは札幌のエンジニアが書いています。Kindleで無料で読むことができます。
https://www.amazon.co.jp/dp/B019SPFHX2/ref=cm_sw_r_tw_dp_U_x_Aj1SCb3QGFG0M
ウェブフォント
Google Fonts公式サイト
CSSの「フォント」の授業で、font-familyで使用できるのは、OSに入っているフォントだけと説明しました。
ですが近年では、サーバー内に設置したフォントファイルを読み込んで利用できる「ウェブフォント」という技術が開発されています。
自分でフォントファイルをサーバーに設置する方法もありますが、ここでは簡単に利用できるフォントサービスを通した使い方を紹介します。
ウェブフォントの利点
- OSを問わず同じフォントを表示することができる
- 文章をコピーできる
- 画面を拡大してもぼやけない
- CSSで色や大きさを調整できる
- 簡単に修正できる（画像ロゴだとHTMLでは修正できません）
代表的なフォントサービス
Google Fonts
https://fonts.google.com/
やや表示が遅いですが、無料で使用できます。学習におすすめです。
FONTPLUS
https://webfont.fontplus.jp/
ソフトバンクが提供しています。多彩なフォント会社の文字を提供しており、ブラウザ上での試し書きもできます。
Adobe Fonts
https://fonts.adobe.com/?locale=ja-JP
Adobeが提供しています。PhotoShopなどの同社のパッケージを契約していると同時に使用できます。
TypeSquare
http://typesquare.com/special/
モリサワが提供しています。人気が高いモリサワのフォントをほぼ全て利用できます。
ウェブフォントの使い方
head要素にタグを貼り付ける
サービス側が提供しているコード（scriptタグ）を、head要素内に貼り付けます。全ページに貼り付けてください。
また、サービスに記載されている、使用することにしたフォントの正確な名前をコピーしておいてください。
CSSにフォント名を書く
フォント名を、font-familyプロパティでCSSに記述します。
以下の例では、h1要素とh2要素が「筑紫Aオールド明朝」になります。万一フォントが読み込めなかったときのために、OS用のフォントも記述しておきましょう。
h1, h2 {
font-family: "FOT-筑紫Aオールド明朝 Pr6N B", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}学習のコツ
技術書選び
HTMLとCSSの技術書は、初学者のうちは一冊は読んでおくことをお勧めします。
Amazonで「HTML CSS」と検索したときに、三年以内に出版されて評価が高い本は、どれも間違いはありません。
※ウェブ制作者は嘘のレビューを書きません。正しい情報を提供することの大切さを仕事を通して知っているからです。
レビューには「まったくの初心者向け」か「ある程度HTMLとCSSが書ける人向け」かが書かれていますから、よく読んで自分に合いそうな本を選びましょう。
コピペと写経
まず、便利そうなHTMLやCSSのサンプルを見つけたら、どんどん自分のサイトにコピー・ペーストしましょう。効果や役割を理解できたら、属性値などを手で書き直してみてください。
正しいコードを書いていくうちに、早くて正しいコーディングが身についていきます。
また、よほど急ぐ仕事でない限りは、次に作るサイトに使い回すことを想定してコードを書きましょう。
SNSの活用
手軽な情報収集には、やはりTwitterがおすすめです。「ウェブデザイナー」「コーダー」「フロントエンドエンジニア」などをプロフィールに記載している、フォロワーが数百人以上の人たちをフォローしてみましょう。
皆さん普段は雑談が多いですが、たまに有名な技術者のブログ記事や、勉強会の様子をツイートすることがあります。それらをたどって、ブログの著者や、勉強会の主催者をフォローして、さらに正しい情報を集めていきましょう。
情報を得るだけではなく、自分自身も学習したこと、読んだ記事をメモ代わりにどんどんアウトプットしていくようにしましょう。
ウェブ系の勉強会へ行こう
「初心者向け」と書いてある勉強会や、講師がたくさん出演するセミナーイベントを見つけたら、参加してみましょう。
もしかすると内容が難しすぎるかもしれません。それでも、新しい目標を得たり、高い技術を持つ人との出会いにつながるかもしれません。
参加する際は、以下に注意しましょう。
メモを取る
紙でもノートパソコンでもいいので書き残しましょう。
Twitterのハッシュタグをチェックする
スマホがあれば。アカウントがなくても見られます。参加者や他の講師が「副音声」として、便利な補足情報や自分の仕事での使い方をツイートしていることがあります。
スーツではなく平服で参加する
スーツの人はちょっと話しかけづらいのです。懇親会のときも移動しづらいです。
名刺を持参する
どんな仕事をしているかの情報交換を忘れずに！
地方勉強会
東京から遠くても、活発な勉強会がある地域は多いです。地元の大きな都市で勉強会がないか調べてみてください。
札幌では「SaCSS（サックス）」というウェブ系の勉強会が、長年に渡って開催されています。先日、10周年を迎えました。
札幌で最前線で活躍するウェブ制作者に気軽に会うことができるので、北海道の方はウェブ制作に慣れてきたらぜひ参加してみてください。
https://sacss.net/
まとめ
資料の内容は以上です。
ウェブ制作では「キーワード」を知るだけで、その言葉で検索して解決できることは多いです。この資料で太字になっている箇所がそのキーワードです。検索するときは、必ず検索オプションで「一年以内」でも調べてください。新しい情報が出ている可能性もあります。
jQueryは！？と思った人が多いかもしれません。jQueryについては以下の理由で割愛しました。
- 会社勤務であれば、当面先輩が担当することになる
- JavaScriptのクエリセレクタとの境界が曖昧になってきている
- HTMLとCSSを学習すると自然にたどり着く
私が独学でウェブ制作を学習した2003年頃は、正しい技術書も少なく、SNSもブログも存在しておらず、ずいぶん苦労した記憶があります。
この記事が、なにから手を付けてよいかわからなくなった初学者の助けになれば幸いです。
