HTML標準（目的別） HTML標準（ABC順） HTML5（旧仕様） HTML4（旧仕様）
CSSプロパティ（目的別） CSSプロパティ（ABC順） CSS3（目的別） CSS3（ABC順）
HTMLの基本 CSSの基本 チュートリアル ウェブ制作TIPS
JavaScript Canvas HTML5 API 特殊文字
優良デザイン WEBカラー WEB画像 イラスト素材
コラム about サイトマップ
トップページ  > ウェブ制作チュートリアル  > CSSソース全文
第29章　HTML・CSSソース全文

★CSSソース全文

CSSソース全文

広告

完成したサンプルサイトのCSSファイル（base.css・table.css・form.css・base_sp.css・table_sp.css・print.css）のソース全文です。

基本スタイル（base.css）のCSSソース全文

CSSソース（base.css）

@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
}
body {
	background-color:#cccccc;	/*ページ全体の背景色*/
	background-image:url("images/bg_body.png");	/*ウェブページ全体の背景画像*/
	font-size:95%;			/* フォントサイズを95%にする */
	font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
	line-height:1.5; 		/* 行の高さを1.5倍にする */
	color:#333333; 			/* 文字色を濃い目のグレーにする */
}
div#pagebody {
	width:1000px; margin:0 auto;	/*内容全体をセンタリング*/
	background-color:#ffffff;	/*内容全体の背景色*/
	background-image:url("images/bg_pagebody.png");	/*コンテンツ全体の背景画像*/
	background-repeat:repeat-y;	/*背景画像を縦方向に繰り返す*/
}

/*============================================
ヘッダ
============================================*/
div#header {
	height:80px;			/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:10px 0px 5px 20px;	/*見出しの位置調整*/
	font-size:18px;			/*フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
}
div#header h1 a {text-decoration:none;} /*リンクの下線を無くす*/
img {border:0;} 			/*画像のボーダーを0にする*/

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:960px; height:50px; 	/*メインメニュー部分の幅と高さ*/
	margin:0px 20px; 		/*上下マージン0px、左右マージン20px*/
}
#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
#menu li a {
	background-color:navy;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:240px; height:35px;	/*幅と高さ*/
	padding:15px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	background-image:url(images/bg_menu1.png);	/*背景画像を指定*/
	background-repeat:no-repeat; 	/*背景画像を繰り返さない*/
}
#menu li a:hover {
	background-color:#000066; 	/*リンクにマウスが乗ったら背景色を変更する*/
	background-image:url(images/bg_menu2.png); /*リンクにマウスが乗ったら背景画像を変更する*/
}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	width:960px; height:360px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:5px 20px;		/*マージン*/
}
#img_subpage {
	width:960px; height:240px;	/*トップページ以外のヘッダ画像の表示サイズを指定*/
	margin:5px 20px;		/*マージン*/
}

/*============================================
サブメニュー（左カラム）
============================================*/
h2 {
	width:160px; height:43px;	/*幅と高さ*/
	padding:17px 0px 0px 100px;	/*パディング*/
	font-size:16px;			/*フォントサイズ*/
	background-image:url(images/bg_h2.png);	/*背景画像*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	background-color:#000033;	/*背景色*/
	color:#ffffff;			/*文字色*/
}
div#submenu {
	width:260px;			/*幅の指定*/
	margin:10px 10px 10px 25px;	/*位置調整*/
	float:left;			/*カラムを左寄せにする*/
}
div#submenu ul li {
	list-style-type:none;		/*リストマーカー無しにする*/
}
div#submenu ul li a {
	display:block;			/*リンク部分をブロック表示にする*/
	height:45px;			/*高さを45pxにする*/
	padding:15px 0px 0px 30px;	/*パディング*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:1px dotted gray;	/*リンク領域の下部にボーダーを付ける*/
	background-image:url(images/bg_submenu.png);	/*リンク領域に背景画像を付ける*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	color:#333333;			/*文字色*/
}
div#submenu ul li:first-child a {
	border-top:1px dotted gray;	/*一番上のリンクに上線を表示*/
}
div#submenu ul li a:hover	{
	text-decoration:underline;	/*リンクにマウスが乗ったら下線を表示*/
}
div#submenu ul li a:before {
	content: url("images/icon_submenu.png");	/*アイコン画像を挿入*/
	margin:0px 10px 0px 0px;	/*マージン*/
	vertical-align:text-top;	/*縦方向の表示位置*/
}

/*============================================
インフォメーション（右カラム）
============================================*/
div#info {
	width:660px;			/*幅の指定*/
	float:left;			/*カラムを左寄せにする*/
	padding:10px 20px 0px 0px;	/*パディング*/
}
h3 {
	font-size:14px;			/*文字サイズ*/
	width:660px;			/*横幅*/
	padding:10px 0px 10px 20px;	/*パディング*/
	background-color:#003399;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}
p {
	width:660px;			/*幅の指定*/
	margin:10px;			/*マージン*/
	text-indent:1em;		/*インデント幅*/
}
.infoimg_index {
	width:200px; height:150px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 20px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}
.infoimg_subpage {
	width:400px; height:300px;	/*画像の表示サイズを指定*/
	margin:0px 20px 20px 0px;	/*マージン*/
	float:left;			/*画像を左寄せにする*/
}
.infoimg_tel {
	display:block;			/*ブロック表示にする*/
	width:400px; height:80px;	/*画像の表示サイズを指定*/
}
hr {
	clear:both;			/*フロート配置をクリアする*/
	width:680px;			/*幅の指定*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}

/*============================================
備考情報
============================================*/
div.remarks {
	margin:0px 10px 10px 10px;
}
h4 {
	color:#000066;
}

/*============================================
フッタ
============================================*/
div#footer {
	clear:both;			/*フロート配置をクリアする*/
	height:40px;			/*高さの指定*/
	padding:10px 0px 0px 0px;	/*パディング*/
	font-size:x-small;		/*フォントサイズを小さくする*/
	text-align:center;		/*センタリング*/
}

テーブルスタイル（table.css）のCSSソース全文

CSSソース（table.css）

@charset "utf-8";

/*============================================
テーブル
============================================*/
table.profile {
	width:680px;			/*テーブル全体の幅*/
	border-collapse:collapse;	/*セル同士の間に隙間を空けない*/
}
table.profile th {
	width:150px;			/*見出しセルの幅*/
	padding:10px;			/*パディング*/
	text-align:center;		/*センター揃えにする*/
	white-space:nowrap;		/*セル内の改行を禁止する*/
	background-color:#ccccee;	/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}
table.profile td {
	padding:10px;			/*パディング*/
	background-color:#eeeeff;	/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}

フォームスタイル（form.css）のCSSソース全文

CSSソース（form.css）

@charset "utf-8";

/***************************************
入力フォーム
***************************************/
#form1 input, #form1 textarea {
	font-size:16px;			/*フォントサイズ*/
	border:1px solid #999999;	/*ボーダー*/
	padding:2px;			/*パディング*/
	border-radius:3px;		/*角丸にする*/
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) inset;	/*影を付ける*/
}
#form1 input:focus, #form1 textarea:focus {
	box-shadow: 0px 0px 5px 2px #ccccee;	/*影を付ける*/
	outline-style:none;		/*アウトライン無しにする*/
}
#form1 p input {
	width:300px; height:40px;	/*幅と高さ*/
	border:0;			/*ボーダー無し*/
}
#form1 p {
	text-align:center;		/*センタリング*/
	text-indent:0;			/*字下げ幅をゼロにする*/
}
input[type="text"] ,input[type="email"] {
	width:70%;			/*横幅を70%にする*/
}

スマホ向け基本スタイル（base_sp.css）のCSSソース全文

CSSソース（base_sp.css）

@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
body {
	width:100%;			/*ページ全体の横幅*/
	background-color:#ffffff;	/*ページ全体の背景色*/
	background-image:none;		/*ウェブページ全体の背景画像を無しにする*/
	font-size:100%;			/* フォントサイズを100%にする */
}
div#pagebody {
	width:100%; margin:0 auto;	/*内容全体をセンタリング*/
	background-image:none;		/*コンテンツ全体の背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
}

/*============================================
ヘッダ
============================================*/
div#header {
	height:46px;			/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:0px;			/*見出しの位置調整*/
}
div#header img {
	width:320px; height:46px;	/*会社ロゴ画像の幅と高さ*/
}

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:100%; 			/*メインメニュー部分の幅*/
	margin:0px; 			/*マージン0px*/
}
#menu li a {
	background-color:#ffffff;	/*背景色*/
	color:blue;			/*文字色*/
	width:90px; height:45px;	/*幅と高さ*/
	padding:15px 0px 0px 60px;	/*パディング*/
	background-image:url(images/icon_menu.png);	/*背景画像を指定*/
	background-repeat:no-repeat; 	/*背景画像を繰り返さない*/
	font-size:120%;			/*文字サイズを120%にする*/
}
#menu li a:hover {
	background-color:#ffffff; 	/*リンクにマウスが乗っても背景色は白のまま*/
	background-image:url(images/icon_menu.png); /*リンクにマウスが乗っても同じ背景画像のまま*/
}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	display:none;			/*トップページのヘッダ画像を非表示にする*/
}
#img_subpage {
	display:none;			/*トップページ以外のヘッダ画像を非表示にする*/
}

/*============================================
サブメニュー
============================================*/
h2 {
	width:100%; height:40px;	/*幅と高さ*/
	padding:15px 0px 0px 10px;	/*パディング*/
	font-size:16px;			/*フォントサイズ*/
	background-image:none;		/*背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	background-color:#000033;	/*背景色*/
	color:#ffffff;			/*文字色*/
	clear:both;			/*フロートをクリアする*/
}
div#submenu {
	width:100%;			/*幅の指定*/
	margin:0px;			/*マージン*/
	float:none;			/*フロートしない*/
}
div#submenu ul li a {
	display:block;			/*リンク部分をブロック表示にする*/
	width:100%; height:40px;	/*幅と高さ*/
	padding:15px 0px 0px 10px;	/*パディング*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:1px dotted gray;	/*リンク領域の下部にボーダーを付ける*/
	background-image:none;		/*リンク領域に背景画像を無しにする*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	background-color:#cccccc;	/*背景色*/
	color:#000000;			/*文字色*/
}

/*============================================
インフォメーション
============================================*/
div#info {
	width:100%;			/*幅の指定*/
	float:none;			/*フロートしない*/
	padding:0px;			/*パディング*/
}
h3 {
	font-size:14px;			/*文字サイズ*/
	width:100%;			/*幅の指定*/
	margin:10px 0px 0px 0px;	/*マージン*/
	padding:10px 0px 10px 10px;	/*パディング*/
	background-color:#003399;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:0px;		/*角丸にしない*/
}
p {
	width:95%;			/*幅の指定*/
	margin:10px;			/*マージン*/
	text-indent:1em;		/*インデント幅*/
}
.infoimg_index {
	display:block;			/*ブロック表示にする*/
	width:300px; height:225px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
	float:none;			/*フロートしない*/
}
.infoimg_subpage {
	display:block;			/*ブロック表示にする*/
	width:300px; height:225px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
	float:none;			/*フロートしない*/
}
.infoimg_tel {
	display:block;			/*ブロック表示にする*/
	width:300px; height:60px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 0px;	/*マージン*/
}
hr {
	clear:both;			/*フロート配置をクリアする*/
	width:100%;			/*幅の指定*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}

スマホ向けテーブルスタイル（table_sp.css）のCSSソース全文

CSSソース（table_sp.css）

@charset "utf-8";

/*============================================
テーブル
============================================*/
table.profile {
	width:100%;			/*テーブル全体の幅*/
	border-collapse:collapse;	/*セル同士の間に隙間を空けない*/
}
table.profile th {
	width:100px;			/*見出しセルの幅*/
	padding:5px;			/*パディング*/
	text-align:center;		/*センター揃えにする*/
	background-color:#ccccee;	/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}
table.profile td {
	padding:5px;			/*パディング*/
	background-color:#eeeeff;	/*セルの背景色*/
	border-bottom:dotted #666666 1px;	/*セルのボーダー*/
}

印刷スタイル（print.css）のCSSソース全文

CSSソース（print.css）

@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
body {
	background-color:#ffffff;	/*ページ全体の背景色*/
	color:#000000; 			/*文字色*/
}
div#pagebody, div#info, p, hr {
	width:100%;			/*幅の指定*/
}

/*============================================
メインメニュー・ヘッダ画像・サブメニュー・フッタ
============================================*/
ul#menu, #img_index, #img_subpage, div#submenu, div#footer {
	display:none; 			/*非表示にする*/
}

/*============================================
インフォメーション（右カラム）
============================================*/
.infoimg_index {
	width:200px; height:150px;	/*画像の表示サイズを指定*/
	margin:0px 0px 20px 20px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}
.infoimg_subpage {
	width:400px; height:300px;	/*画像の表示サイズを指定*/
	margin:0px 20px 20px 0px;	/*マージン*/
	float:left;			/*画像を左寄せにする*/
}

まとめ
  1. 書き写すことも学習方法のひとつ
  2. プロパティの値を変えて表示テストをしてみても良い（数値を変えたり、blockをinlineにしてみるなど）
  3. 意味が分からない箇所があれば、インターネットで検索してみると良い
<前へ 目次へ 次へ>
広告
Sponsors
HTML標準（目的別） HTML標準（ABC順） HTML5（旧仕様） HTML4（旧仕様）
CSSプロパティ（目的別） CSSプロパティ（ABC順） CSS3（目的別） CSS3（ABC順）
HTMLの基本 CSSの基本 チュートリアル ウェブ制作TIPS
JavaScript Canvas HTML5 API 特殊文字
優良デザイン WEBカラー WEB画像 イラスト素材
コラム about サイトマップ
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ