広告
完成したサンプルサイトのCSSファイル（base.css・table.css・form.css・base_sp.css・table_sp.css・print.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; /*センタリング*/
}
@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; /*セルのボーダー*/
}
@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%にする*/
}
@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; /*内容の区切りをグレーの点線表示にする*/
}
@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; /*セルのボーダー*/
}
@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; /*画像を左寄せにする*/
}
まとめ
- 書き写すことも学習方法のひとつ
- プロパティの値を変えて表示テストをしてみても良い（数値を変えたり、blockをinlineにしてみるなど）
- 意味が分からない箇所があれば、インターネットで検索してみると良い
広告
