Web制作手順まとめ

【このページの目的】

Web制作のやり方に、どの行動を行えばいいんだっけ？という、『迷い』をなくすため。順番を記載しているが、それらは常に行ったり来たりする。

【目次】

⓪　実績、ポートフォリオを作成する。
①　営業を行い、案件を受ける。
②　要件定義、デザイン仕様確認
③　デザインから、ワイヤーフレーム作成
　　タグ名、クラス名を命名検討
④　CSSコーディング
⑤（アニメーションコーディング？→まだJSに手を出していない）
⑤　開発ツールにて確認・実機テスト

◆参考サイト

②　HTMLで、マークアップ　　　　　　　　　

◆最小単位の要素たちに、タグ名を確定する。
・h1 を決める。→最上位の見出し、そのコンテンツの主題
・h2~6 で、階層構造をつくる
・ul（ol）、dlの要素
・table、figure、address、formなどの特殊要素
・それ以外は、ほとんどを段落要素<p>に入れる

◆上記の要素たちを、役割でグルーピングする。
・全ページ共通なものを、<header>、<footer>とし、上記以外を<main>で囲う
・ナビゲーションバーを<nav>で囲う
・一般的なセクション構造（見出しとその見出しに伴う情報のかたまり）を<section>で囲う
・独立した記事セクション（それ単体で配信可能な独立した記事コンテンツ）を<article>で囲う
・補足的なセクション（仮にセクションごと削除しても話の本筋には影響がないセクション）を<aside>で囲う

◆必要に応じて、以下のタグや属性をつける。
・<a href=...>で、リンクを付したい部分を囲う
・<strong>で、重要な語句・単語を囲う
・<small>で、「免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目」を表す部分を囲う
・blockquote/cite/q要素（引用文に関わる要素）を囲う
・aタグに属性をつけてあげる。（こちらで詳しく解説）
・alt属性（<img>で囲まれる画像やイラストの代替テキスト）

◆レイアウトを再現するための必要な枠を<div>で囲う

◆命名規則に応じて、class名を確定する。
・原則として見た目ではなく「役割」を表す名称をつける
・複数の固有部品から構成される大きなモジュールの場合、親ブロックの名称を子ブロックの名称にも継承させて、所属を明らかにする
・単品で使用する小さなモジュールの場合、「ボタン（.btn-）」「見出し（.ttl-）」「背景（.bg-）」のように、部品の役割によって特定の接頭辞をつけて管理する

◆最後の最後に、写真とテキストを入れてしまう。やっと笑