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

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

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Study > HTMLについて

HTMLについて



HTML文書(デザインはCSS側で)


構造(HTML)とデザイン(CSS)の分離
デザインのみに使用するDIVやspanなど極力使わず、CSS側で指定(汎用性が高まり効率的、修正容易)

例:hX要素の装飾は、なるべくCSSで、「border-bottom:○○;」や「background:○○;」等、hX要素に指定(ID名・クラス名を付け)するなどの他、単なるボーダーは、「hr」にCSS側でサイズやカラーを指定(クラス名を付け)
HTML側で専用に用意されている要素を使用する
HTMLに、DIVやIMG要素を追加してのデザイン書きはなるべく避ける

セマンティックWeb
HTMLで用意されている要素をできるだけ使用してHTMLコーディング(上記「構造(HTML)とデザイン(CSS)の分離」)
 参考WEBページ HTML5におけるDIVタグの使い方を紹介します参照
 クロールコンピュータ等に正しく内容を伝えられ、汎用性に優れ、HTMLがすっきりとし見やすく作業が効率的に

HTML文書にstyle書きできるだけNG
例:<h2 style="border-left: 4px solid #000;">テキスト</h2>←×CSS側で
理由:ページが重くなる
 修正確認する際や汎用する際に、デザインがCSSにまとまっておらず、CSSもHTMLも見ないといけない

各ページタイトルhx部分の「背景画像 + <hx>」テキスト使用
理由:タイトルテキストを変更するだけで、背景の使い回しができる。

 ※ただし、特殊フォントなど、画像でしか表現できない場合を除く


例1)
<HTML側>
<h2>タイトルテキスト</h2>

<CSS側>
#mainBox h2{
	background: url('/_common/image/title.jpg') 0 0 no-repeat;
	margin: ○ ○ ○ ○;
	padding: ○ ○ ○ ○;
}


例2)テキストカラーがページ毎に数種類
<HTML側>
<h2 class="title_red">タイトルテキスト</h2>
<CSS側>
#mainBox h2{
	background: url('/_common/image/title.jpg') 0 0 no-repeat;
	margin: ○ ○ ○ ○;
	padding: ○ ○ ○ ○;
}
.title_red{
	color: #○○○;
}
.title_blue{
	color: #○○○;
}


例3)背景画像がページ毎に数種類
<HTML側>
<h2 class="title_sub">タイトルテキスト</h2>
<CSS側>
#mainBox h2{
	margin: ○ ○ ○ ○;
	padding: ○ ○ ○ ○;
}
.title_main{
	background: url('/_common/image/title_main.jpg') 0 0 no-repeat;
}
.title_sub{
	background: url('/_common/image/title_sub.jpg') 0 0 no-repeat;
}

※ただし、全ページ、別カラーのテキスト・別背景など、
汎用的に背景画像を使えない場合は、
「テキスト込みのタイトル画像img」使用の方が効率的な場合もあります。
					



HTML5


HTML5マーキング
後ほど。。。


参考になったHTML5ページ構成図

 参考WEBページ ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成


ページの先頭へ



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

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