CSSとはフォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を定義するための技術で、使用するにはある程度の事前知識が必要になります。
使用を間違えるとデザインが崩れる場合がございますのでご注意ください。
文字の大きさを変えるには、font-size を用います。
ピクセル単位で指定するには font-size: 14px;
パーセントで指定するには font-size: 200%;
の様に入力してください。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 24px;
color: #336699;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 200%;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
文字の色を変えるには、color を用います。
色の名前を入力するには color: red;
カラーコードを入力するには color: #333333;
の様に入力してください。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #FF6600;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
color: red;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: blue;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
背景色を変えるには、background-color を用います。
色の名前を入力するには background-color: blue;
カラーコードを入力するには background-color: #EFEFEF;
の様に入力してください。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #CC0000; /* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #FFCC66;
font-size: 14px;
color: #336699;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: white;
font-size: 12px;
color: red;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: blue;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
テーブル枠と文字の間の余白を設定するには、padding を用います。
例 ： padding: 4px;
padding: 1px 2px 3px 4px;
1つだけ指定した場合は、四辺全ての余白に適用されます。
また4つ全て指定した場合は、左から順に、上余白・右余白・下余白・左余白の設定が出来ます。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #336699;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
padding: 10px 0px 20px 20px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
文字の配置を変えるには、text-align を用います。
左寄せにするには text-align: left;
中央寄せにするには text-align: center;
右寄せにするには text-align: right;
と入力してください。
項目部分は、初期設定で中央寄せとなっております。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #336699;
padding: 5px;
text-align: right;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
padding: 5px;
text-align: center;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
テーブル枠にボーダーを設定するには、border を用います。
上下左右を別々に設定するには、以下の様に入力してください。
ボーダー上部分の設定は border-top: 太さ スタイル 色;
ボーダー右部分の設定は border-right: 太さ スタイル 色;
ボーダー下部分の設定は border-bottom: 太さ スタイル 色;
ボーダー左部分の設定は border-left: 太さ スタイル 色;
上下左右を一括指定するには以下の様に入力してください。
border: 太さ スタイル 色;
例 ： border: 1px dotted #FF6600;
スタイル（線）には、ドット（点線）・実線・二重線などの種類があります。
以下を参考にしてください。
ドット dotted
ダッシュ dashed
実線 solid
二重線 double
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #336699;
padding: 5px;
border-top: 1px dotted #FF0000;
border-right: 1px dotted #FF0000;
border-bottom: 1px dotted #FF0000;
border-left: 5px double #FF0000;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
padding: 5px;
border: 1px solid #0000FF;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
文字の太さを変えるには、font-weight を用います。
標準にするには font-weight: normal;
太字にするには font-weight: bold;
と入力してください。
項目部分は、初期設定で太字となっております。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #336699;
font-weight: normal;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
font-weight: normal;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
斜体文字にするには、font-style を用います。
と入力してください。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-size: 14px;
color: #336699;
font-style: italic;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
フォントを変えるには、font-family を用います。
例 ： font-family: "ＭＳ Ｐゴシック", "Osaka";
フォントを複数指定する場合は、各フォントを「,」で区切って下さい。
この場合は、先頭から順に表示が優先されます。
使用例
/* **テーブル全体の編集ができます **(ボーダーのカラー設定はこちら) */
#main{
width: 485px;
background-color: #EFEFEF;
/* テーブル全体のボーダーカラー設定 */
}
/* **項目部分の編集が出来ます **(背景色・フォントなどなど) */
#main th {
background-color: #EFEFEF;
font-family: "ＭＳ Ｐ明朝", "細明朝体";
font-size: 14px;
color: #336699;
padding: 5px;
}
/* **タイプ部分の編集が出来ます **(背景色・フォントなどなど) */
#main td {
background-color: #FFFFFF;
font-size: 12px;
padding: 5px;
}
/* **注釈文字のフォントサイズ **カラーの編集が出来ます */
.tyusyaku {
font-size: 12px;
color: #666666;
}
※ /* */ で囲むとコメントになります。実際には表示されません ※
ブラウザ上の表示例
