HTML, CSSを利用し、web制作を行うには、これまでに学んだことに加え、効率的に実装するための知識やその他の発展的なスキルが求められます。
今回は、HTML, CSSとセットで学ぶべきことと学習後に学ぶと良いことを紹介していきたいと思います。
Webサイトの公開方法
Webサイトは、インターネット上に公開して多くの人に見てもらうことで完成になります。
Webサイトを公開するためには、大きく分けて以下の2つが必要です。
- サーバー
- ドメイン
ドメインとサーバーは、以下の記事でも解説しているので、併せてご覧ください。
https://zero-plus.io/media/html-css/how-to-make-web-site/
サーバーを用意する
Webサイトをインターネット上に公開するにはサーバーが必要です。サーバーは自分で作ることもできますが、ハードルが高いため「レンタルサーバー」と呼ばれるサーバー貸し出しサービスを使用するのが一般的です。
大手・有名どころでは、以下のようなレンタルサーバーのサービスがあります。
- 「エックスサーバー」
- 「ロリポップ！」
- 「さくらインターネット」
レンタルサーバー会社や契約プランの違いによって、利用するサーバーのパフォーマンスやサービスの有無が変わります。自分やクライアントの使用目的にあったレンタルサーバーのサービスを選択します。
ドメインを用意する
自分のサイトを公開するにあたり、ドメイン（Webサイトの住所）を用意する必要があります。ドメインは、 レンタルサーバーでサーバーをレンタルすると自動的に付帯するものがありますが、自身で独自のドメインを取得することもできます。
独自ドメインには権威性があります。企業やお店のサイト、ポートフォリオサイトなどの大事なサイトは独自ドメインにするのがおすすめです。
独自ドメインの取得できるドメインサービスには、次のようなものがあります。
- お名前.com
- ムームードメイン
- Star Domain
検索エンジン最適化（SEO）
SEOとは「Search Engine Optimization ＝ 検索エンジン最適化」という意味です。
SEO対策とは、検索エンジンに対して「このサイトは検索された時に上位表示をするのに最適だ」と認識させるために、Webサイトの構成などの調整を行うことです。
検索エンジン（GoogleやYahoo!等）で検索をかけると、
- 広告枠（先頭に「広告」と表示されている検索結果）
- 自然検索
の順で検索結果が表示されます。
SEO対策をしっかり行うことで「2．自然検索」の上位にサイトを表示させることができます。
低コストで、中長期的な集客を見込めるというメリットがあるため、多くの企業や店舗などはSEO対策をしっかりしたいと考えています。
そのため、SEO対策に理解がある制作者は需要が高いです。SEOの内部対策は知識さえあれば、お金をかけずに行えます。
実際に内部対策をする際に必要なことをご紹介します。
HTMLのタグの置き方(マークアップ)
マークアップの方法ひとつでも、SEOの強さは変わります。
見出しであれば見出し用のタグ、リストならばリスト用のタグを使用しましょう。
「適切なタグを適切な箇所に使用する」だけでも、十分なSEO対策になります。
タイトルの設定
SEO対策を行うために、Webサイトのタイトルの設定も行います。
<title>ZeroPlus - フリーランス特化型プログラミングスクール -</title>
headタグ内の「titleタグ」に記述したテキストが、検索された際に表示されるタイトルにもなります。
ユーザーのクリック率の高さもSEOの強さに比例します。
重要なキーワードや、ユーザーに見て欲しい・ユーザーが求めているキーワードほど、タイトルの前に持ってくるようにしましょう。
ディスクリプションの設定
SEO対策を行うために、ディスクリプションの設定を行いましょう。
<meta name="description" content="フリーランス育成に特化したプログラミングスクールです。プログラミング初心者でも万全なサポート体制のもと、案件の受注ができます。転職、就職サポートも充実。オンラインコースあり。">content属性の値に入れたテキストは、検索エンジンで検索された際に、Webサイトの説明（ディスクリプション）として表示されます。ユーザーがどのようなワードを検索するのか、何のために検索をするのか、つまり「ユーザーの意図」を汲み取ったうえで設定する必要があります。
デスクリプションの説明は140字以内が推奨されています。140字より多いと、スマホでの検索時に、トリミングされてしまい後半がカットされてしまうことが多いです。
タイトルとディスクリプションを設定した場合、以下のように表示されます。
SEO対策にはゴールも正解もありません。様々な方法を学び、結果を見て調整を繰り返していきましょう。
CSS設計
CSSを書く際には「管理のしやすさ」を意識する必要があります。
何も意識せずにCSSを書くと、次のような状況が起きてしまいます。
- 他の人が読めない、全く理解できない
- HTMLのどこにリンクしているかわからないが、必要かもしれないので消せない
- CSSを1箇所修正するために、複数箇所も同時に修正する必要がある
- スタイルの上書きが多すぎるため、「!important」を使わざるを得ない
そこで必要な考え方が「CSSの設計手法」です。
CSSのメンテナンス性や作業効率を向上させるための、HTMLのclass・idの命名規則、そしてCSSのコードの管理方法がCSSの設計手法として重要です。
CSSの設計手法を学ぶメリットとして、大きく、下記の3つがあげられます。
- メンテナンス性の向上
- 大規模なサイトでも整ったコードで作成が可能
- 複数人でのコーディングが可能
企業やチームでコーディングを行う際に、組織ごとに用いられる設計方法は異なってきます。
その中でも多く使用されている、「BEM」「OOCSS」「SMACSS」の3つを簡単に紹介します。
BEM
BEMは「Block」「Element」「Modifier」の頭文字から名付けられた設計手法です。
「Block」はセクションやコンテナなどの枠組みとなる要素のことです。「Element」はBlockの中の子要素、「Modifier」はBlockとElementを装飾するために使用されます。そして「block__element--modifier」の形でクラス名を指定します。BlockやElementが1単語で表現できない場合は「main-block__p」のように、-（ハイフン）ひとつで単語を繋げて記述します。
BEMは細かくクラス名を指定するため、HTMLの要素を記述しているCSSのコードの箇所を見つけやすく、メンテナンスがしやすいメリットがあります。しかし同時に、クラス名が長くなってしまうデメリットも生じます。
OOCSS
OOCSS（オーオーシーエスエス）は「Object Oriented CSS＝オブジェクト指向CSS」の略語で、「構造と見た目を切り離す」考えをベースとしたCSSの設計手法です。
ここでの「構造」とは、レイアウトを指します。そして「見た目」とは色やフォントサイズなどの、レイアウトに影響のないスタイルを指します。ですから「レイアウトに関係するスタイルと、関係しないスタイルを分けて記述する」考え方が「構造と見た目の分離」となります。
一度使用したスタイルを後から別な箇所で使用することで同じスタイルを指定することができるなど、汎用性に長けた設計手法です。一方で、あるクラスのスタイルを変更することで、サイト全体への影響を及ぼす場合があるため、注意が必要です。
SMACSS
SMACSS（スマックス）は「Scalable and Modular Architecture for CSS」の頭文字を取ったもので、よく使用されるCSS設計手法のひとつです。
SMACSSでは、CSSを下記の5種類に分類した記述をします。
ベース
htmlやbody、inputなど、要素に直接スタイルの指定を行うものを指します。リセットCSSも含まれます。
レイアウト
ページのレイアウトを指定するものです。
モジュール
ボタンやタイポグラフィなどの、コンポーネントのようなパーツを指します。
ステート
状態によって見た目が変化するスタイルを指します。
テーマ
デザイン全体で統一されるべきスタイル(ベースカラーやメインカラーなど)を指します。
多くの場合、上記5つのCSSフォルダを作成し、それぞれにCSSファイルを保存する形をとります。OOCSSと同様、スタイルの再利用性が高い設計手法です。コード量の軽量化ができますが、一方で、厳密な管理をしないと気づいた時には煩雑なコードが出来上がってしまうため注意も必要です。
Sass
Sassとは「Syntactically Awesome StyleSheet」の略で、直訳すると「文法的に素晴らしいスタイルシート」です。CSSをより便利に効率的にするために作られました。
Sassを学ぶメリットについて簡単にご説明します。
作業効率向上につながる
- セレクタやプロパティのネスト（入れ子）により、記述量が減ったり、構造の把握がしやすくなる
- Mixin（ミックスイン）や継承により、一度定義したスタイルを簡単に呼び出す（使い回す）ことができる
メンテナンス性が向上する
- 変数を扱うことができるため、値で管理できる
- 四則演算や関数が扱える
Sassを使用するにあたってデメリットもあるので注意が必要です。
- SassのファイルをCSSファイルとしてブラウザが認識できるように変換する作業が必要
- サイトの依頼・作成・管理・修正に関わる全ての所でSassを導入しているわけではないため、導入がない場合にはSassが使えない
Sassを使用するデメリットよりも、メリットの方が圧倒的に大きいため、気になる方は是非学習をしてみてください。
Webサイトのパフォーマンス
Webサイトにおけるパフォーマンスとは具体的に
- 表示速度
- 可用性
の2点から評価されます。
表示速度とは、WebブラウザでWebページが表示される速度のことです。
2019年の時点では世界的に「表示開始速度が0.5秒、表示完了時間が2秒」が目標値とされています。せめて表示完了時間は3秒以内でないと、7割のユーザーが離れるとまで言われています。
2つ目の可用性は、Webサイトにアクセスした際にエラーや遅延がなくアクセスできる率のことです。表示速度と同様、「年間を通して3％以下のエラー率」が目標値とされています。
パフォーマンスの高いサイトが、いかにユーザーの注意を惹き、ユーザーを引き付けておくことができるかについては、いくつかの事例があります。とあるサイトでは、ユーザーが体感する待ち時間を40％削減したことで、検索エンジンからの通信量やサインアップ数が10％増となりました。
また他のサイトでは、平均のページ読み込み時間を850ミリ秒短縮したことで、
- コンバージョン数(サイトを訪れたユーザーが成果対象となる行動を取った数)がアップ
- ユーザーの訪問1回当たりの閲覧ページ数がアップ
- ユーザーがすぐにサイトを離れる率がダウン
する結果が得られました。
コーディング次第でもパフォーマンスの向上を目指せるため、意識されたコーディングと、されていないコーディングの例を見てみましょう。
例1
別のページで作成したブログサイトのCSSからです。
article .more{
text-align: right;
font-weight: bold;
}セレクタが「article」の中の「.more」と指定されています。
- articleタグを探す
- その中のmoreクラスを探す
- スタイルを適用
の流れだと考えると、そんなにコストのかかるルールセットには見えません。
しかし、ブラウザの探し方は、
- moreクラスを探す
- その親要素がarticleタグであることを確認
- スタイルを適用
です。つまり、右→左の順で照合を行っていきます。
ですから、今回の「.more」は以下のようにシンプルに記述するのがベストです。
.more{
text-align: right;
font-weight: bold;
}
例2
同じCSSから
aside h3 + ul a:hover{
text-decoration: underline;
}同様の考え方をすると
.aside-txt a:hover{
text-decoration: underline;
}と書く方がシンプルですね。
ブラウザが無駄な検索を行わないように、シンプルなセレクタの定義を行うことは、パフォーマンスに大きく影響することがわかりました。
また、CSSのファイル自体のサイズを抑えることも、パフォーマンスの向上につながります。
- 複合セレクタは少なく
- 古いベンダープレフィックスを無くす
- ルールを二重で記述している箇所を見直す
などの対策を行うことができます。
Webパフォーマンスへの意識が高いコーディングが出できるコーダーを目指しましょう。
