スタイルシートとHTMLのベース構成

スタイルシート(sample.css)

上から順に上書きされるので、先に各メディア共通のものを記述し、後にタブレットやスマートフォン用のものを記述します。分岐となる画面サイズや分け方は、内容によりますが、ここでは、480px以下をスマートフォン、481～1024pxをタブレット、それ以上をパソコンとし、３つに分けています。
リンク／タップターゲットは、画像や文字も含めて、タブレットやスマートフォンでは、リンクとリンクの間は、親指でタップできるスペース(32px以上)が必要です。(パソコン画面では空きすぎになるため、分岐しています) また、リンク用画像は48px以上必要です。
画像は、大きな画像がタブレットやスマートフォンではみ出さないよう、伸縮設定します。
idやclass名は、自由に設定できます。
クラスタの優先順位：id ＞ class ＞タイプ(タグ)
メモやコメントは、/* と */ の間に入れます。

/* ベース */ body{ background-color: #fff; /* 背景色 */ color: #000; /* 文字色 */ line-height:150%; /* 行高 */ }
/* 本体 */: div#all{ width:95%; /* 横幅 */ margin:0 auto; /* 余白 */ text-align:center; /* 位置 */ }

/* 構成 */

/* ナビ */ div#navi{ margin-top:15px; margin-bottom:15px; /* 上下の余白 */ text-align:left; /* 位置 */ }
/* ヘッダー */ div#header{ margin-top:25px; margin-bottom:15px; /* 上下の余白 */ white-space:nowrap; /* 改行なし */ }
/* お知らせやページの説明など */ div#info{ margin-top:15px; margin-bottom:15px } /* 上下の余白 */
/* メニューリンクなど */ div#menu{ margin-top:15px; margin-bottom:15px } /* 上下の余白 */
/* 本文 */ div#main{ margin-top:25px; margin-bottom:15px; /* 上下の余白 */ text-align:left; /* 位置 */ }
/* フッター */ div#footer{ margin-top:25px; margin-bottom:25px } /* 上下の余白 */
/* 著作権など */ address{ margin-top:25px; margin-bottom:35px; /* 上下の余白 */ color:#666; /* 文字色 */ font-size:smaller; /* 文字サイズ */ }

/* デザイン */

/* リンク文字 */: /* 下線を付けない */
a { text-decoration: none }; /* 未訪問 */
a:link{ color: #00f }; /* 訪問済 */
a:visited{ color: #003399 }; /* ポイント */
a:hover{ color: #ff0000; text-decoration: underline }; /* 訪問中 */
a:active{ color: #ff0000 }; /* PC用リンク周囲 */
a.smt{ margin:8px }
/* PC用リンクに合わせる余白 */ .space { margin:8px }
/* 画像 */
img{ border:none; max-width:100%; height:auto; width /***/:auto }
/* dlとulの余白 */ dl,ul{ margin:16px }
/* dtの余白 */ dt{ margin-top:11px; margin-left:16px }
/* ddの余白 */ dd{ margin-top:8px; margin-left:25px }
/* li のデザイン */ li{ list-style-type:square: margin-top:11px }
/* 大タイトル文字 */ h3{ color:#00f }
/* 中タイトル文字 */ .tlm{ background-color:#cff; color:#039 }
/* 小タイトル文字 */ .tls{ color:#39f; font-weight:bold }
/* テーブル */ table{ margin-top:5px; margin-bottom:25px; border-collapse:collapse; } td{ padding:16px; border:1px #39f dotted; }
/* 部分的な適用 */ .mark{ color: #f00 } /* 文字色を変える */ .nbr{ white-space:nowrap } /* 改行なし */
/* 分岐用 */: .sbr{ display:none } /* 表示しない */

/* タブレット */

@media screen and (min-width:481px) and ( max-width:1024px) {: div#all{ width:100%; margin:0 auto }; a.smt{ margin:16px }; .space { margin:16px }; dd { margin-left:16px }; td{ padding:11px }
}

/* スマートフォン */

@media screen and ( max-width:480px) {: div#all{ width:100%; margin:0 auto }; a.smt{ margin:16px }; .space { margin:16px }; dd { margin-left:16px }; td { padding:8px }; .sbr { display:block } /* 改行する */
}

上では、全体を中央配置にしていますが、左寄せの方が多い場合は、div#all を text-align:left に変更し、場所に応じて text-align:center を入れて下さい。
※テーブルの場合は、下記オプションをご覧下さい。

オプション

◇テーブルを中央に配置する: .ct{ text-align:center }
.ct table{ margin-left:auto; margin-right:auto }; html：テーブルを<div class="ct"></div>で囲む
◇テーブルの横幅を付ける: table{ width:85% }
◇背景に画像を使用する(body{}など使いたい場所に): 画像ファイル：background-image:url(ファイルのURL);; 開始位置(左上以外の場合)：background-position:right(left/center) bottom(top);; 並べ方
敷き詰め：background-repeat:repeat;
縦１列：background-repeat:repeat-y;
横１列：background-repeat:repeat-x;
固定：background-repeat:no-repeat;; スクロールで動かないよう固定する場合：
background-attachment:fixed;
◇テキストや画像などの上下位置(td{}など使いたい場所に): 上：vertical-align:top
中：vertical-align:middle
下：vertical-align:bottom
◇罫線(hrタグ): hr{
border: none;
border-bottom:1px #ccc dotted;
height:1px;
color:#ffffff;
margin:35px 0;
margin-left:auto; margin-right:auto
padding:0;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Language" content="ja"> <meta name="description" content="ページの概要(100字内)"> <meta name="keywords" content="キーワード1,キーワード2,・・・(５、６個まで)" lang="ja"> <title>ページのタイトル</title> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <link rel="stylesheet" media="all" type="text/css" href="sample.css" /> </head>
<body>: <div id="all">
<div id="navi">ナビ</div>
<div id="header">ヘッダー(タイトル文字やバナー画像など)</div>
<div id="info">お知らせやページの説明など</div>
<div id="menu">リンクメニューなど</div>
<div id="main">本文</div>
<div id="footer">フッター(トップへもどるなど)</div>
<address>著作権など</address>
</div>
</body>
</html>

<head>～</head>に入れるオプション

JavaScriptを使う: <meta http-equiv="Content-Script-Type" content="text/javascript">; 外部スクリプトファイルを読み込む場合は以下をプラス; <script language="javascript" src="***.js"></script>
ブラウザ用のページアイコン: <link rel="shortcut icon" href="～.ico">
RSSファイル: <link rel="alternate" type="application/rss+xml" title="RSS" href="～(index.rdfなど)">
SEO効果をつける: <link rel="prev" href="***.htm(前のページ)">; <link rel="next" href="***.htm(次のページ)">
指定秒後にページを自動更新する: <meta http-equiv="refresh" content="数">
指定秒後に指定ページへ飛ばす: <meta http-equiv="refresh" content="数;url=http://～">
検索エンジンを拒否する: <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">