これからWeb制作のためにコーディングをはじめたい！という方向けに、超ざっくり基礎知識をまとめていきたいと思います😉
コーディングの流れ
様々あると思いますが、大体下記の流れで進めます。
- 枠組み（構造）化
- 画像やアイコン等パーツの準備
- HTML・CSSの調整
コーディング前の基礎知識
上記の制作を進める前に、知っておきたい基礎知識です。
SEO
巷でよく聞くSEOは「検索エンジン最適化（Search Engine Optimization）」の意味を持ちます。
Google等の検索結果で自分のサイトを上位に表示させ、見てもらいたい人に適切に情報を届けるための対策になります。
サイトを作っても見られないと意味がないので、ここはざっくりでも理解しておく必要があります。
コーディング時に意識するところが基本となります。
meta系の適切な使用や、規約に準拠したマークアップを心がけます。
該当箇所-HTML
- head内 meta、主にtitle・keyword・description
下記が基本的なHTMLの構造で、上部の<head>部分が該当箇所です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="検索時のキーワード（コンマ区切り）">
<meta name="description" content="検索結果に表示されるサイトの説明文">
<title>検索結果・ブラウザタブに表示されるサイトタイトル</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>検索画面での表示結果の精度を高める場合はテキスト内容の試行錯誤も必要となります。
とはいえ近年はページの内容がより重視されているようです。
おろそかにしてしまうと最悪ペナルティを受けて検索結果から除外されてしまう場合もあるとはいえ、きちんとした内容をふつうにコーディングすれば問題ないかと思われます。
外部から依頼を受けてコーディングする場合は、指定のキーワード等があるか確認しておくと安心です。
OGPといって、SNS向けの表示用の設定をmeta内に記述する場合もあります。
最新HTML・CSS準拠
HTMLやCSSは時代と共に新しい仕様が追加されています。
最新でなくてもページは表示できますが、基本的には最新準拠とします。別の人が更新する場合「なぜHTML4？？？」と思われたりする
現在のHTMLの主流はHTML5が廃止されてからの「HTML Living Standard」となります。
HTML5を触ったことがあればさほど差はないと思います。
2010年代以前からだと、DOCTYPE宣言等が大きく変わっていたり、<section>タグ等新しい仕様が追加されていますので注意です。
同様にCSSもバージョンアップが行われていますので気を付けておきましょう。
正しいマークアップ
サイトには人間向けにコンテンツ内容を記述すると同時に、検索エンジンに使われているロボット（robot）向けに「ここに何があるか」といったことを記述する必要があり、これはSEO対策の一環にもなります。
具体的には<header><main><section>といったタグを使ってコンテンツを切り分けたり、見出しの順序やタグを適切に使う等のマークアップ作業があります。
該当箇所-HTML
- body内
用語
小ネタですがよく使われる専門用語です。
- FV
ファーストビュー、ページを開いたとき1画面に表示される部分です。ぱっと見られるこの部分でサイトの印象が決まるとされる最重要部分です。
FVの画像やイラスト部分はMV（メインビジュアル）、キービジュアル等と呼ばれます。 - ハンバーガーメニュー
スマホサイト等でよく右上にある、タップで開く三本線のメニューボタンのことです。
横から見たハンバーガーのようなのでこう呼ばれます。 - パンくずリスト
headerやナビの下にある、「ホーム＞ブログ＞記事タイトル」のような、現在のページの場所を示すリストです。
ヘンゼルとグレーテルがパンくずを落として道順を残すお話からです。 - コメントアウト
コードを＜！-- --＞（※全て半角）で囲むことでページに表示させないようにします。
メモ書き等でよく使われます。
枠組み（構造）化
前準備で知識を詰め込んだところで、ここからは制作側での実践です。
先ほどの基本構造のbody内をセクショニングしてみます。
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<h1></h1>
<p></p>
<section>
<h2></h2>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
</section>
</section>
</main>
<aside>
<ul>
<li></li>
<li></li>
</ul>
</aside>
<footer>
</footer>
</body>今回はよくありそうなセクショニングですが、実際はデザインに合わせて枠組みを決めていくことになります。
navは入れ子にできない、section内には見出しがいる等、地味に制約があるのでちまちま調べながらがんばりましょう！
迷ったらとりあえずdiv
