りまぴん取扱説明書11 - スタイルシート
目次
スタイルシート
目次 | ページトップ | 前のページ | 次のページ
現在のスタイルシートはこんなカンジです。
画面表示用スタイルシートと印刷用スタイルシートのふたつに分離されました。
あいかわらずスタイルシートは踏み込みが浅くてよくわからないです。 書き換えをしてかっこよいデザインができたら私にも教えてください。
ツッコミ大歓迎
2010/09/22
画面表示用スタイルシート
/* remaping.css */
/* りまぴん のためのスタイルシート */
/* このスタイルシートを変更してデザインを調整できます。 */
/* Nekomataya/kiyo 2010 */
/* (新インターフェース試験中) */
/* $Id: 11.html,v 1.3 2010/09/22 00:23:51 kiyo Exp $ */
/*========== タイムシート全体 ============*/
/*基本デザイン*/
/*
background-color:#efffef;
color:#666666;
*/
body {
font-size:11pt;
margin:4px;
padding:0;
overflow:scroll;
}
/*タイムシート・テーブル*/
table {
border-color:#bbbbbb;
font-size:9pt;
margin:0px;
padding:0px;
border-width:2px 1px 0px 0px;
border-style:solid;
}
table.info {
width:97%;
font-size:4pt;
height:10px;
border-width:0px;
table-layout:fixed;
}
table.sheet {
table-layout: fixed;
}
table.toolbox {
margin:0 0 0 0;
padding:0 0 0 0
}
/*
border-color:#bbbbbb;
border-color:#bbbbbb;
*/
th {
text-align:center;
border-style:solid;
border-width:4px 1px 1px 0px;
font-size:9pt
}
th.timelabel{
text-align:center;
border-style:solid;
border-width:0px 1px 3px 1px;
font-size:9pt;
}
th.layerlabel {
text-align:center;
border-style:solid;
border-width:4px 1px 3px 0px;
font-size:9pt;
}
td {
text-align:center;
vertical-align:middle;
border-style:solid;
border-width:0px 1px 1px 0px;
padding:0;
margin:0;
font-size:9pt;
}
td.menu {
text-align:left;
border-style:none;
vertical-align:bottom;
font-size:11pt
}
td.toolbar {
text-align:right;
border-style:none;
vertical-align:bottom;
font-size:11pt
}
td.logo {
text-align:center;
border-style:none;
vertical-align:bottom;
font-size:11pt
}
td.header {
background-color:#000000;
color:#f8f8f8;
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:9pt
}
td.footer {
background-color:#000000;
color:#f8f8f8;
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:11pt
}
td.layerOption {
background-color:#000000;
color:#f8f8f8;
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:11pt;
width:8em;
}
/*========== ページヘッダーテーブル ============*/
.pageHeader {
display:none;
}
/*========== スクロールスペーサー ============
を兼ねるので一番上だけはブロックを確保する
*/
/*========== ページヘッダーテーブル ============
スクロールスペーサーを兼用をやめて分離
*/
.sheetHeader {
display:none;
}
/*
visibility:hidden;
width:97%;
width:97%;
*/
/* ツールボックスの部品*/
input.toolTip {
font-size:8pt;
height:15pt;
width:100%;
}
div.optionPanel{
display:none;
}
/*========== リンク ============*/
a:link {color:#000066}
a:visited {color:green}
a:hover {color:red;background-color:snow}
a:active {color:gray;background-color:snow}
a:focus {color:#880000;background-color:snow}
/* タイムシートの罫線 */
.Sep {background-color:red}
/*タイムセパレータライン*/
/* 左端*/
.ltSep,.ltSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:6pt;
border-width:0px 1px 3px 1px;
}
/* 通常データ*/
.ntSep,.ntSep_Blank {
border-width:0px 1px 3px 0px;
}
/* ダイアログ*/
.dtSep,.dtSep_Blank {
border-width:0px 1px 3px 0px;
}
/*サブセパレータライン*/
/* 左端*/
.lsSep,.lsSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:8pt;
border-width:0px 1px 2px 1px;
}
/* 通常データ*/
.nsSep,.nsSep_Blank {
border-width:0px 1px 2px 0px;
}
/* ダイアログ*/
.dsSep,.dsSep_Blank {
border-width:0px 1px 0px 0px;
}
/*通常ライン*/
/* 左端*/
.lnSep,.lnSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:6pt;
border-width:0px 1px 1px 1px;
}
/* 通常データ*/
.nnSep,.nnSep_Blank {
border-width:0px 1px 1px 0px;
}
/* ダイアログ*/
.dnSep,.dnSep_Blank {
border-width:0px 1px 0px 0px;
}
/* カラムセパレータ */
td.colSep {
border-style:none;
}
/* border-width:1px 1px 1px 1px; */
/*エンドセパレータ(未使用)*/
/* 左端*/
.leSep,.leSep_Blank {
border-width:0px 1px 4px 1px;
}
/* 通常データ*/
.neSep,.neSep_Blank {
border-width:0px 1px 4px 0px;
}
/* ダイアログ*/
.deSep,.deSep_Blank {
border-width:0px 1px 4px 0px;
}
/* 時間表示 */
.timeguide {
text-align:left;
font-size:9pt;
}
/* タイムシート上の入力ボックス */
.IptBox {
background-color:#ffffff;
height:10pt;
font-size:9pt;
border-width:0px;
border-style:none;
text-align:center;
margin:0;
padding:0;
}
/* ページノンブル */
.pgNm {
font-size:9pt;
}
/*
background-color:#efffef;
background-color:#efffef;
*/
.infoTable {
width:100%;
text-align:center;
font-size:5pt
}
.headerTool {
width:100%;
top:0px;
}
.footerTool {
width:100%;
bottom:0px;
margin:0;
}
.toolTable {
width:100%;
text-align:center;
font-size:18pt;
border-style:solid;
}
.screenSpace{
width:97%;height:120px;
}
.printSpace {
display:none;
}
.pageBreak {
display:none;
}
/*form view*/
input {text-align:center;}
select {text-align:center;}
/*
* {
margin: 0; padding: 0;
}
#fixed {
position: fixed;
}
#sheet_view p {
margin:0;
}
*/
/*タイムシートの文字飾り (例)*/
.v_bar {color:blue;}
/*
#title {font-weight:900;font-size:24px;}
*/
/*
その他のエレメントid は、ソースを直接読むか、取扱説明書をご覧ください。
*/
印刷用スタイルシート
/* remaping.css */
/* りまぴん のためのスタイルシート */
/* このスタイルシートを変更してデザインを調整できます。 */
/* Nekomataya/kiyo 2010 */
/* (新インターフェース試験中) */
/* $Id: 11.html,v 1.3 2010/09/22 00:23:51 kiyo Exp $ */
/* 現行の値はA4縦位置6秒シート用 */
/*========== タイムシート全体 ============*/
/*基本デザイン*/
body {
background-color:white;
color:black;
font-size:6pt;
margin:4px;
padding:0;
}
/*タイムシート・テーブル*/
table {
font-size:6pt;
margin:0px;
padding:0px;
border-width:2px 1px 0px 0px;
border-style:solid;
}
table.info {
display:none;
}
table.sheet {
width:100%;
}
.toolbox {
width:100%;
margin:0 0 0 0;
padding:0 0 0 0
}
th {
text-align:center;
border-style:solid;
border-width:4px 1px 1px 0px;
font-size:6pt;
page-break-before:avoid;
}
th.timelabel{
text-align:center;
border-style:solid;
border-width:0px 1px 3px 1px;
font-size:6pt;
}
th.layerlabel {
text-align:center;
border-style:solid;
border-width:2px 1px 3px 0px;
font-size:6pt;
}
td {
text-align:center;
vertical-align:middle;
border-style:solid;
border-width:0px 1px 1px 0px;
padding:0;
margin:0;
font-size:6pt;
page-break-before:avoid;
}
td.menu {
text-align:left;
border-style:none;
vertical-align:bottom;
font-size:6pt
}
td.toolbar {
text-align:right;
border-style:none;
vertical-align:bottom;
font-size:6pt
}
td.logo {
text-align:center;
border-style:none;
vertical-align:bottom;
font-size:6pt
}
td.header {
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:4pt
}
td.footer {
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:6pt
}
td.layerOption {
text-align:center;
border-style:none;
vertical-align:middle;
font-weight:bold;
font-size:6pt;
width:8em;
}
/*========== ページヘッダーテーブル ============*/
.pageHeader {
width:100%;
}
/*========== ページヘッダーテーブル ============
スクロールスペーサーを兼ねるので一番上だけはブロックを確保する
*/
.sheetHeader {
width:100%;
}
/*
visibility:hidden;
display:none;
*/
div.optionPanel {
display:none;
}
/*========== リンク ============*/
a:link {color:#000066}
a:visited {color:green}
a:hover {color:red;background-color:snow}
a:active {color:gray;background-color:snow}
a:focus {color:#880000;background-color:snow}
/* タイムシートの罫線 */
.Sep {background-color:red}
/*タイムセパレータライン(秒セパレータ)*/
/* 左端*/
.ltSep,.ltSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:4pt;
border-width:0px 1px 3px 1px;
}
/* 通常データ*/
.ntSep,.ntSep_Blank {
border-width:0px 1px 3px 0px;
}
/* ダイアログ*/
.dtSep,.dtSep_Blank {
border-width:0px 1px 3px 0px;
}
/*サブセパレータライン*/
/* 左端*/
.lsSep,.lsSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:6pt;
border-width:0px 1px 1.2px 1px;
}
/* 通常データ*/
.nsSep,.nsSep_Blank {
border-width:0px 1px 1.2px 0px;
}
/* ダイアログ*/
.dsSep,.dsSep_Blank {
border-width:0px 1px 0px 0px;
}
/*通常ライン*/
/* 左端*/
.lnSep,.lnSep_Blank {
text-align:right;
border-style:solid;
vertical-align:bottom;
font-size:4pt;
border-width:0px 1px 1px 1px;
}
/* 通常データ*/
.nnSep,.nnSep_Blank {
border-width:0px 1px 1px 0px;
}
/* ダイアログ*/
.dnSep,.dnSep_Blank {
border-width:0px 1px 0px 0px;
}
/* カラムセパレータ */
td.colSep {
border-style:none;
}
/*エンドセパレータ(未使用)*/
/* 左端*/
.leSep {
border-width:0px 1px 3px 1px;
}
/* 通常データ*/
.neSep {
border-width:0px 1px 3px 0px;
}
/* ダイアログ*/
.deSep {
border-width:0px 1px 3px 0px;
}
/* 時間表示 */
.timeguide {
text-align:left;
font-size:6pt;
}
/* タイムシート上の入力ボックス */
.IptBox {
display:none;
}
/* ページノンブル */
.pgNm {
display:none;
}
.infoTable {
display:none;
}
.headerTool {
display:none;
}
.footerTool {
display:none;
}
.toolTable {
display:none;
}
.screenSpace {
display:none;
}
.printSpace {
width:100%;
}
.pageBreak {
page-break-before:always;
}
/*form view*/
input {text-align:center;}
select {text-align:center;}
/*
* {
margin: 0; padding: 0;
}
#fixed {
position: fixed;
}
#sheet_view p {
margin:0;
}
*/
/*タイムシートの文字飾り (例)*/
.pgHeader {font-size:8pt;}
.title {font-weight:900;font-size:10pt;}
/* */
/*
その他のエレメントid は、ソースを直接読むか、取扱説明書をご覧ください。
*/
目次 | ページトップ | 前のページ | 次のページ