H2O Space. HTML Coding Rule.

2,485 views
2,371 views

Published on

H2O Space.が、社内およびパートナーさんと共有している HTMLコーディングルールです。時代に合わせてカスタマイズしておりますが、参考になれば!

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,485
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

H2O Space. HTML Coding Rule.

  1. 1. H2O Space.HTML/CSS rev.001 2010.12.24 H2O Space. HTML/CSS _ 3 PNG8 JPEG GIF HTML HTML5 XHTML JavaScript body ID class CSS reset.css 1 0 3 !important
  2. 2. URLhttp://bit.ly/h2o_coding_rule _ CSS _ _entry_img _extend_css 2 _shared img/, css/, js × images/, stylesheet/, javascript/ HTML my_image × myImage, MyImageUNIX _ - 3
  3. 3. img_company001.gif, img_company012.jpg × img_company1.gif, img_company_one.gif 3 001 002 ttl_main.png ico_arrow.gif × main_title.gif company_image.jpg ttl_ ico_ 3 5 ttl_ bg_ line_ ico_ img_ PNG8 JPEG GIF PNG8JPEG IE6 PNG GIFHTML<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><meta name="keywords" content=" , " />
  4. 4. <meta name="description" content=" Web " /><title> [H2O Space.] | Web </title><link rel=”stylesheet” href=”base.css” /><!--[if IE]><script type="text/javascript"src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><header><h1> </h1></header><!-- --><div id=”area1”><p> </p><!-- /area1 --></div><footer class="clearfix">…</footer><script type=”text/javascript” src=”index.js”></script></body></html>HTML5 XHTMLHTML HTML5 IE html5.js HTML5 HTML4 XHTMLHTML5JavaScript body
  5. 5. JavaScript bodyHTML Dreamweaver ● Cmd(Ctrl) + A ● Shift+Tab<div><!-- /area1 --></div> ● Dreamweaver ● ID class × <!-- #area1 --> <!-- .box -->ID class id="areaMain" class="boxColumn" × id="area_main" class="box_column"ID class 2 id="caution" class="marginWide" × id="fontRed" class="margin50px"
  6. 6. ● Left, Right, Center ● Top, Bottom ● noMargin noCSS@charset "UTF8";/*** * */#wrap { width: 950px; margin: 10px 0; padding: 0 10px; color: #333;}/*** * */.noMargin { margin: 0;}.center { text-align: center;}reset.css Yahoo! UI Library reset.csshttp://developer.yahoo.com/yui/reset/ 1.class1 { ...×.class1
  7. 7. {...CSS 1 float: left × float:left float : left :[ ]0 margin: 0 × margin: 0px 0 color: #f00 × color: #FF0000 000000 ff0000 000 f003 margin: 0 20px 20px; × margin-top: 0; margin-left: 20px; margin-right: 20px...margin, padding 3margin: 0;margin-bottom: 10px;!important!important ID Web
  8. 8. #column1 { × .box .colum .right #column1ID class ID

×