https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > サイト構造

サイト構造


サイト構造の基本的なルールです。

「構造図」ボタンをクリックすると参考構造図を参照できます。


サイト構造


ページ拡張子
各ページは「html」・「php」ファイルで作成
※「php」で作成する際は、「htaccess」にて「php使用の設定」が必要 htaccess参照

ディレクトリ分けサイト構造
下層ページはディレクトリ構造にする

構造
例)PCサイト下層の「aboutページ」
/about/index.html  ※URLは /about/(indexなし)
/about.html

スマートフォンサイトは、root直下に「/sm/」ディレクトリを置きその中に展開

共有パーツを「_common」ディレクトリに格納
「_common」ディレクトリに共通パーツを格納し、各ページでインクルード
スマートフォンサイト(/sm/)直下にも「_common」ディレクトリ(スマホ用)を置く
_common設置PHPインクルード


【サイト構造図】
(内)は設置・命名など任意で自由に、それ以外は必須(赤字は必須&名称変更禁止)

root/
	├index.html または index.php
	│
	├_common/					←共通ディレクトリ
	│├css/
	││└(common.css)
	││
	│├image/
	││├keyV/icon/			←keyVプラグイン利用の際は、keyVのicon画像込
	││├(gnavi/)				←例)グローバルナビゲーションの画像など
	││├(header/)
	││├(footer/)
	││├(bg/)
	││├(ico/)
	││└(btn/)
	││
	│├js/
	││├(common.js)
	││├jquery-1.11.3.min.js.gz		←meta.html記述のVer.と同じバージョンのもの
	││└jquery-2.1.4.min.js.gz		←meta.html記述のVer.と同じバージョンのもの
	││
	│├php/
	││└ua_switch.php
	││
	│└tag/
	│	├top.html
	│	├meta_fix.html
	│	├meta.html
	│	├gtm.html				←GTMコード
	│	├(header.html)
	│	├(side.html)
	│	└(footer.html)
	│
	│
	├(top/)					←(TOPページ用)※_commonディレクトリ内に、トップページ用と分かる名前を付けて入れてもOK
	│├image/					←TOPページの画像
	│├css/
	││└main.css
	│├js/
	││└top_original.js
	│└tag/					←TOPページのheader.htmlなど
	│
	│
	├page1/					←個々ページそれぞれのディレクトリ
	│├index.html または index.php
	│├(css/)(ページ毎のCSS)
	│└(image/)(ページ毎の画像)
	│
	├page2/					←個々ページそれぞれのディレクトリ
	│
	├page3/					←個々ページそれぞれのディレクトリ
	│
	└sm/						←スマートフォンディレクトリ
	  ├_common/
	  │├css/
	  │├image/
	  ││└keyV/
	  ││
	  │├(js/)					←PCサイトと同じJSを使用の際は、PCサイトの_common参照も○
	  │└tag/
	 │	├(top.html)		←PCサイトと同じtop.htmlを使用の際は、PCサイトの_common参照も○
	 │	├meta_fix.html
	  │	├meta.html
	  │	├(header.html)
	  │	├(side.html)
	  │	└(footer.html)
	  │
	  ├page1/
	  │
	  ├page2/
	  │
	  └page3/


ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会