HTML / CSS 社内ルール (Eng)

HTML / CSS-House Rules v1.0

Written By Shin ( 2016/07/26 Translated by Nissa ( 2016/11/07

[HTML banned tag]

center, font, blink, strike, s, u, bgsound, marquee, applet, acronym, dir, frame, frameset, noframes, isindex, listing, xmp, noembed, plaintext, rb, basefont, big, spacer, tt, hr

[Eliminate the tag when there is no text]

Try to not write with the tag that does not exist. Do know the position and the use of each tag!

BAD example

<div>Hello, this is Accorder.</div>

GOOD Example

<div><p>Hello, this is Accorder.</p></div>

[BLOCK element and INLINE element rules]

  • BLOCK element in BLOCK element is OK.
  • BLOCK element in INLINE element is BAD (except when it is necessary).
  • In INLINE element, DIV is not used We use SPAN.
  • DIV is a BLOCK element. However, do not put DIV element as an INLINE element.

[How to use the BR tag]

   This is an example of the HTML of writing.<br>
   Please If you have any questions!<br>
At the end of the line put <br> tag. If there are two <br>, make a new space to show <br> is used twice!
   Here is an example of the HTML of writing.<br>
   Please If you have any questions!<br><br>

   CSS of writing is in the other pages.<br>
If you want to create two separate paragraphs it is possible to make a new <p> tag for the separation.
   This is an example of the HTML of writing.<br>
   Please ask, if you have any questions!<br>
   css coding is in the other page.<br>

[Example 1 four row of lines in HTML]

In this case, Japanese language is used and it is unified. As long as there is no specific reason this is compatible to use.
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">


Make sure to put #wrapper. Even though it is unnecessary sometimes.
<div id="wrapper">

Here in the coding.


[How to use the directory]

  • /images/: All images are put in here
  • /slides/: all slides are put in here
  • /js/: js · jQuery are stored in here
  • /tpl/: all Smarty’s template is in here.
  • /fonts/: fonts related are all stored here.
  • /css/: all css file is in here.

[Specified PATH]

For absolute path and also relative path, as long as there is no reason, do not write the index.html as it will not fill out the anchor. Using absolute path concept
<a href="/">Home</a>
<a href="/about/">Company</a>
<a href="/about/company.html">Company</a>
<a href="/contact.html">Contact</a>
Using relative path concept
<a href="../">Home</a>
<a href="./">Company</a>
<a href="company.html">Company</a>
<a href="../contact.html">Contact</a>
In relative path concept, file is located in the same previous lower layer, instead ./ Sample.html it can be written only Sample.html without ./ You want to link your page to an external site, it is necessary to put-> rel = “nofollow” target=”_ blank”. It is not required in some cases depending on the contents . This depends on the agreement with the person in charge through consultation.
<a href="../">Home</a>
<a href="./">Company</a>
<a href="company.html">Company</a>
<a href="../contact.html">Contact</a>
<a href="" rel="nofollow" target="_blank">Amazon</a>


Title: Very important | important | less important keyword:Five to seven(Do enter the appropriate keywords although there are no effects on SEO) Description: Depending on the length, the keyword can be good up to 2 times.

[HTML5 tag]

<nav> <section> <article> etc. According to the rule, this can not be used because it may not be compatible for some clients PC.

[The usage and about ALT]

Be sure to type ALT for the image. If image is not loaded, ALT will appear. This is useful for those who have visual impairment.

※ Important

As for example, putting logo image in the tag.
<img src="logo.gif" alt="logo">
People with visual impairment gets information by listening to the sound. If the information received is only “logo”, the person will not understand clearly. To be fair and more precise, it is very important to describe the wording of an image. So, if Accorder’s logo is used then it is, alt=”Accorder Co., Ltd.”.

※ Important 2

    • “!”, “?”, “→” Special characters should not be in image tag. It should either be in background or list tag.
    • If it is really necessary to put in IMG tag, please use alt=”” instead of alt=”arrow”. Unnecessary information of alt will be measured in SEO techniques.

[IMG tag rules]

Basically, you will decide the width, height and alt tags. However, it is absolutely unnecessary to have width and height in image tag (depending on the design)
<img src="logo.gif" width="200" height="45" alt="Accorder Co. Ltd.">
The unit does not fill the page except percentage, %. The units are normally in pixel, so make sure to put the value of the pixel.

[Method of determining the image name]

It basically unifies according to rules. page name_type_description Page name: contact.html -> contact, index.html -> top, company.html->company type: icn: Icon bg: background image img: image bul: Brett photo: photo ※ There will be plenty of images used under the same element. Hence, please do put the image name as the example below … Example) contact_icn_phone.png contact_icn_fax.png contact_bg.png contact_bul_phonenumbers.png

[Format of the image]

jpg: photo (QUALITY: 40% ~ 60%) png: all of the image other than the photo (the banner that contains the photos, saved in jpg) gif: for animation If required support from old browser, png is used not gif. It corresponds the Retina display. Adjust the size to two times bigger and the vertical double-wide. Then for img tags, please adjust the size in css.img tags, or just adjust the size in CSS. For example, if the image is 320×320, then write in 640×640. retina

[How to close the tag]

■ Example of ID
<div id="wrapper">
</div> <-!/#wrapper-->
■ Example of CLASS
<div class="wrapper">
</div> <-!./wrapper-->
If the source code is short, it wont be a problem to know which DIV belongs to which DIV. But if the codes are long and it does not fit in one screen, then comment is needed right next to the closed tag. So that it is easy to be identified.

[Method of determining the ID · CLASS name]

Putting proper name for every class created will give a huge advantage so that you can use in all of the pages

Example of a class used in all pages:

Ex) all_top_menu Ex) all_footer Ex) all_footer_copyright

Example of index.html:

Ex) top_welcome Ex) top_welcome_title Ex) top_content Ex) top_content_news Ex) top_content_blog

Example of contact.html:

Ex) contact_phone Ex) contact_fax Make sure that short forms are not used when coding. Some people may not understand short forms and it can be a waste of time to figure it out. Avoiding short forms help to speed up the efficiency work of coding. Ex) top_ttl → top_title Ex) Top_pt → Top_photo Ex) Wrp_ct → Wrapper_content Even though it is just a class name, please be sure that the name can be predicted by others. So that they can detect where is the class located easily. #footer: The footer ID at? #footer_logo: The logo is in the footer? #footer_logo_text: The text and the logo is a part of the footer? #footer_copyright: The copyright of the footer may be placed outside of the footer_logo?

[CSS writing-orders]

  • background
  • width
  • height
  • margin
  • padding
  • position
  • float
  • display
  • border
  • line
  • letter
  • text
  • font
  • color
※ In particular, background ~ padding, text ~ color are protected like always!

[Always put this on the first line of css file]

@charset "utf-8";
※ Should be saved in UTF-8 format.

[CSS file name]

    • reset.css → reset (default)
    • style.css → basically the main file
    • language.css → foreign language support is required, some of the foreign language is compatible to use.
    • responsive.css → responsive case depending by the scale.

[How to write CSS]

#top .menu .menu_list .logo h1 span strong {…} → BAD This is too long! Put class at the end of strong, if it is impossible to make it short. .title_bold {…} → GOOD {…} → BAD
Heading tag does not specify ID and CLASS.
.top {…} → GOOD

[Js / jQuery destination]

JQuery, just like Bootstrap and the base file except for the file “common.js” which was created from scratch. These files should be placed and renamed in a folder which represent each Js / JQuery.

Example) colorbox

    • js/colorbox/colorbox.css
    • js/colorbox/colorboxSet.js
    • js/colorbox/jquery.colorbox-min.js
    • js/colorbox/jquery.colorbox.js
    • js/colorbox/images/
    • js/colorbox/images/border.png
    • Etc
Do not mix. Even there is only one element of Js, it should be distributed in a different folder according to it functions.

[Challenge Course]

※ This is not compulsory, but can be very useful and good.
      • Do not use Float
      • If there are two or more values of Margin and padding, please do summarize instead of using Margin-top
      • For Color code, make sure it is in all uppercase. Instead of #ffcccc, write #FFCCCC. Color code can be written in short form only if there are repetition in letters like #FFCCCC can be written as # FCC
      • In HTML, do not write H1 after H2. This should be in order, H1 H2 H3 H4…
      • If there is a side menu, on the coding, it brings to the next content

Consultations or suggestions are welcome anytime, thank you. Let’s shorten the coding time by complying the efficient rules!


メールアドレスが公開されることはありません。 * が付いている欄は必須項目です