HTML構造設計＆思考

WEB標準とは何か？

簡単にいうとW３Cが定めたコーディング方法です。
このタグはこう記述しなさいとかというものです。

-「でもこれってやる必要あるの？」
-「デザイン通りにコーディングできてレガシー＆モダンブラウザで崩れなければいいんじゃん」

と思う方も多いとおもいます。

しかし標準ベースのHTMLにする事でたくさん得します。
標準ベースのHTMLにすることで、多様な新しい技術を使用する事ができ、さらに多様なソフトウェアやデバイスが解釈しやすくなり、アクセシブルになります。。

なんか難しい感じですがようするに

「人にも機械にも分かりやすく、使いやすくなり、最新技術を使っていろいろできます」

細かくいうといろいろありますが大雑把にいうとこんな感じです。

標準化 ＝ イケてるサイト

常に意識して制作することでサイトの「パフォーマンス」や「SEO対策」などが改善していくと私は考えています。

例：（テーブルに複数ある場合)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table>
  <caption>表の名前</caption>
  <thead>
    <tr>
      <th>表見出し1</th>
      <th>表見出し2</th>
      <th>表見出し3</th>
      <th>表見出し4</th>
    </tr>
  </thead>
 <tbody>
  <tr>
    <td></td>
    <th scope="rowgroup">小見出し</th>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>値</td>
    <th scope=row>孫見出し</th>
    <td>値</td>
    <td>値</td>
  </tr>
  <tr>
    <td>値</td>
    <th scope=row>Tails</th>
    <td>値</td>
    <td>値</td>
  </tr>
</tbody>
</table>


文脈（コンテキスト）を意識したコーディングとは何か？

コーディングをする時はデザインorワイヤーフレームなどをベースに作る事が多いと思います。
その際に以下のように大きく３つに分ける事ができると思います。
ヘッダー、メイン、フッター
さらに細かく見ていくとロゴ、グローバルナビゲーション…などに分ける事ができるます。

文脈（コンテキスト）を考えながらロゴというパーツを見てみましょう。
ちなみに、本サイトはテンプレートで制作しているためあまり参考にしないでもらいたいです。

ロゴとは何か考えてみましょう。
google先生に聞いたところ、「会社名・商品名などの文字を特別にデザインしたもの」と解答してくれました。
ですがこれはサイト全体かしたらなんの文脈もありません。
意味は合っていると思いますが、ロゴはサイトのどのページにも存在し、このサイトはなんのサイトかを表しているもの
だと私は考えます。
かといって「見出し」ではないし、トップページから見たら「見出し」にもなるし。。。。
一つのパーツをとっても文脈を考えるだけでいくつも考えがでて、混乱してしまいます。

じゃあどうするのか？

賛否はあると思いますが私は次のように考えます。

文脈（コンテキスト） =　論理

そのままなのですが、論理通りに設計するのがシンプルで分かりやすいコードではないのでしょうか？
なのでこのロゴというパーツは以下のように考えます。

ロゴ => サイト名 => テキスト

HTML5は各タグの意味が重要です。
なのでこの例ではpタグ書きます。
それでは「ロゴって事わからないじゃん」と思う方もいると思います。

そこはclass属性やrole(WAI-ARIA)属性を使用してこのパーツがなんなのかを機械的に指定すればいいのです。

1
2
3
4
<header class="header" role="banner">
  <p class="logo">サイトロゴ</p>
  ...省略
</header>

この例のように文脈（コンテキスト）を考えてパーツ＆サイトを制作するこてでマークアップがシンプルになり、メンテナンス性が向上します。

WebComponentsを意識した制作

前の項目で文脈（コンテキスト）で以下のように少し触れましたが、

その際に以下のように大きく３つに分ける事ができると思います。
‘ヘッダー’、’メイン’、’フッター’
さらに細かく見ていくと’ロゴ’、’グローバルナビゲーション’…
などに分ける事ができるます。

このようにどんどん細かく各パーツ（部品）に分割して制作していくことで
WebComponentsを意識した制作に近づけるとおもいます。

しかしどのレベルまで分割したらいいのか、など問題が出てくると思います。
その時に役立つのが論理です。

論理が成り立たないパーツ（部品）はパーツ（部品）ではありませんただの装飾です。
そのレベルで意識し制作するの好ましいと私は考えます。


汎用性のあるパーツ（部品）について

汎用性があるパーツ（部品）とは、どんな箇所で使用しても壊れないパーツ（部品）です。
壊れないパーツ（部品）を作るのはほぼ無理に等しいです。

壊れないパーツ（部品）はできませんが、壊れにくくメンテナンスしやすいパーツ（部品）は作ることができます。
そのためにも文脈（コンテキスト）や論理を意識してパーツ（部品）を作るといいと思います。

では実際にどう作るか、
HTMLは複数のパーツが組み合わさった構造体です。

なので汎用性をがあるパーツ（部品）を作れば、
おもちゃのブロックのように組みあわるだけでサイトができてしまいます（理想）。

おもちゃのブロック = 各パーツ

それにはやはり論理が重要になってきます。
論理を意識して制作することで自然と汎用性の高いパーツができあがります。

あくまでWebComponentsの技術ではなくここでは、その考えをもとにした制作方法について書いています。

私は次のように考えます。

WebComponentsを意識した制作 = 論理が成り立つパーツ（部品） ＝ おもちゃのブロック（各パーツ）

WebComponentsを意識した制作をすることでメンテナンスしやすく人にも機械にもわかりやすい、壊れにくいサイトができると考えます。