再利用できるプレゼン用WEBページを作ろう 第３回

CSS

素の状態では、sanitize.css のみ適用していました。

このあと、準備しておいた

1. baseDefault.css
2. develop.css
3. upLeftRight.css
4. toneGreen.css

を順次読み込んでみます。
まず CSS の中身を確認し、取り込むたびに見た目がどのように変わっていくのか見ていきましょう。

baseDefault.css

「base」「default」って、なんか意味がかぶっていてセンスのなさを感じますね。もしかしたら名前を付けるタイミングでは必然性があったのかもしれませんが忘れました。そのうち base.css か default.css に変えるかもしれません。

ディレクトリ構造の中には 2 つの baseDefault.css がありますが、develop/css/baseDefault.css は

develop/css/baseDefault.css

@charset "utf-8";
/**
 * @package jQueryMock
 * @version v.d.1
 */
@import url("../../common/css/baseDefault.css");

common の CSS を取り込んでいるだけです。
なので本体のほうを見ていきましょう。

構造的には

1. ページ内に複数出現する要素への指定
   h2 ～ 4、p, div, section などのタグと、.displayNone, .floatLeft などの汎用クラス
2. ページ内に唯一出現する要素への指定
   h1, header などのタグと、#globalMenu, #subMenu など ID 指定された要素、およびその配下にある要素

の 2 ブロックに分かれています。

早速適用してみましょう。
JS が実装されるとこのあたりの CSS は動的に取り込まれるのですが、今はまだその機能がないので HTML に記述追加します。

  <link type="text/css" rel="stylesheet" href="../../common/css/baseDefault.css">

さて結果は。

うん、なかなか微妙です。そもそもレイアウトされていなかった文言が、おおよそ配置したい場所に移動してはいますが、文字が重なっていたりして、まだ人様に見せられる状態ではありません（と書きつつお見せしていますが）。

develop.css

次に適用されるのは develop.css です。
このファイルの立ち位置は微妙です。なくなりそうな気がします。

内容は、baseDefault.css がホントにホントに基本的な指定しかしていない部分を微調整しています。

そもそもは、各モジュールがそれぞれの baseDefault.css を持つ構造でした。
でも管理するファイルは少ないに越したことはありません。
で、各モジュール下の baseDefault.css の共通化を図り common 下に baseDefault.css として新設、各モジュールの baseDefault.css はそのラッパー扱いになったという経緯です。

となると、各モジュール名.css （今回の場合は develop.css ）の内容を @import の下に追記していけば、モジュール名.css の出番はなくなり、管理対象のファイルが減らせるのですが、いまはそうなっていないので、これも取り込みます。

  <link type="text/css" rel="stylesheet" href="../css/develop.css">

よくよく見ないと違いは判りません。コンテンツヘッダの縦幅が広くなっていたり、H2 タグの前にマークがついているくらいかな。

upLeftRight.css

さてどんどん行きましょう。いよいよレイアウトを決定するファイルです。
今回は3ペインの upLeftRight.css を取り込みます。
ここで大幅な指定をしてるのかと思い、久々に中身を見たら思ったほど記述がない。
ホントにこれだけで、サンプルでお見せしたようなレイアウトになるのでしょうか？？
適用してみます。

  <link type="text/css" rel="stylesheet" href="../css/upLeftRight.css">

これまた微妙。3 ペインぽくなってはいるけど、コンテンツ部分がダミーの文字ではあんまりそれっぽくならないのかな？

toneDefault.css

このファイル名で baseDefault.css の由来がちょっとわかりました。たぶんこの基本トンマナファイル名と呼応するものだったのでしょう。それにしてもイマイチなことは間違いないですが。

このファイルも開いてみたらそれほど大きくありませんでした。まあ色指定だけなのでこんなもんでしょう、

  <link type="text/css" rel="stylesheet" href="../css/toneDefault.css">

以下、記事中では端折ってしまった CSS の内容です。

common/css/baseDefault.css

@charset "utf-8";
/**
 * @package jQueryMock
 * @version v.d.1
 */

/**
 * -- ページ内に複数出現する要素

 */
/* タグ */
h2,
h3,
h4,
p,
div,
section,
ul,
ol,
dl {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
}
h2 {
    margin: 1em 0 0 0;
    padding: 0 0 0 10px;
    --border: solid 1px #999999;
    line-height: 1.4em;
}

table, th, td {
    border-collapse: collapse;
    vertical-align: middle;
}
table {
    margin: 0;
    padding: 0;
    width: 100%;
}
th {
    font-weight: normal;
    white-space: nowrap;
}
th.noPadding,
td.noPadding {
    padding: 0;
}

ul li {
    list-style: none;
}

label {
    cursor: pointer;
}

/* 汎用クラス */
.displayNone {
    display: none;
}
.displayInlineBlock {
    display: inline-block;
}

.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}

.backGray {
    background: #999999;
}
.borderGray {
    border: solid 1px #999999;
}
.colorRed {
    color: red;
}
.colorBlue {
    color: blue;
}

.alignLeft {
    text-align: left;
}
.alignCenter {
    text-align: center;
}
.alignRight {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}
.breakSpaces {
    white-space: break-spaces;
}

.width40px {
    width: 40px;
}
.width80px {
    width: 80px;
}
.width120px {
    width: 120px;
}
.width160px {
    width: 160px;
}
.width200px {
    width: 200px;
}
.minWidth120px {
    min-width: 120px;
}
.clickable {
    cursor: pointer;
}

.selected {
    font-weight: bold;
}
.disabled {
    background: #333333;
}

.modal {
    z-index: 2;
    position: fixed;
    padding: 2em;
    width: 50%;
    background: #ffffff;
    border: solid 1px #999999;
    border-radius: 1em;
}
.modal textarea {
    width: 100%;
}

/**
 * -- ページ内に唯一出現する要素 
 */
/* レイアウト */
html,
body,
header,
footer,
h1 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
}

header {
    position: relative;
    text-align: left;
    --border: solid 1px #999999;
}

footer {
    margin: 1em 0;
    padding: 1em;
    text-align: center;
}

#moduleHeadline {
    position: relative;
    display: inline-block;
    margin: 0.25em 0 0.25em 18em;
    padding: 0.3em 1em;
    height: 2em;
    font-size: 1.5em;
    border-radius: 1.5em;
    --border: solid 1px #999999;
}

#siteIdentifier {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 0.5em;
    --border: solid 1px #999999;
}
#siteIdentifier img {
    margin: 0;
    vertical-align: top;
}

#membership {
    position: absolute;
    top: 0.75em;
    right: 0;
    display: block;
    padding: 0.5em;
    --border: solid 1px #999999;
}

#globalMenu {
    position: relative;
    padding: 0;
    --border: solid 1px #999999;
}
#globalMenu * {
    margin: 0;
}

#subMenu {
    position: relative;
    padding: 0;
    --border: solid 1px #999999;
}
#subMenu * {
    margin: 0;
}

#breadcrumb {
    position: relative;
    padding: 1em;
    --border: solid 1px #999999;
}

#wrapper {
    display: block;
    position: relative;
    margin: 0 auto;
    width: auto;
    min-height: 40em;
    --border: solid 1px #999999;
}

#console {
    position: static;
    margin: 0;
    padding: 0 1em;
    width: auto;
    --border: solid 1px #999999;
}

h1 {
    display: block;
    margin: 0 0 1em 0;
    padding: 0;
    --background: url("../img/downArrow.svg") no-repeat;
    --background-size: 88px;
    font-size: 1.6em;
    text-align: left;
    --border: solid 1px #999999;
}
h1:before {
    display: inline-block;
    border-radius: 1em;
    padding: 0 0.2em;
    line-height: 0.9em;
    transform: rotate(90deg);
    content: "›";
}

#consoleForm {
    margin: 0;
    padding: 1em;
    width: auto;
    border: solid 1px #999999;
}
#consoleForm ul li {
    display: inline-block;
    padding: 0 2em 0 0;
}

#content {
    position: static;
    margin: 0;
    padding: 0 1em;
    width: auto;
    --border: solid 1px #999999;
}

#gotoTop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 3em;
    height: 3em;
    background: #333333;
    border-radius: 0.5em;
    text-align: center;
    cursor: pointer;
    --border: solid 1px #999999;
}
#gotoTop img {
    margin: 1em 0 0 0;
    width: 1em;
    height: 1em;
    border: solid 4px #ffffff;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

#layoutSwitcher {
    z-index: 2;
    position: absolute;
    border: solid 1px #333333;
}
#layoutSwitcher li {
    padding: 0.5em;
    border-bottom: solid 1px #333333;
    white-space: nowrap;
}
#layoutSwitcher li:last-child {
    border-bottom: none;
}

/* モーダルを開いたときのバックグラウンド */
#modalOverlay {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: rgba(0,0,0,0.75);
}

develop/css/develop.css

@charset "utf-8";
/**
 * @package jQueryMock
 * @version v.d.1
 */

/**
 * -- ページ内に複数出現する要素 
 */
/* タグ */
h2 {
    border: solid 0.5em;
    border-top: none;
    border-right: none;
    border-bottom: none;
}
th {
    padding: 0.5em 1em;
    text-align: center;
}
td {
    padding: 0.2em 1em;
    text-align: right;
}
td.noPadding {
    padding: 0;
}

ol li {
    margin-left: 1em;
}
dt {
    margin-top: 0.5em;
    font-weight: bold;
}
dd {
    margin-left: 1em;
    padding: 0;
    line-height: 1.5em;
}

input[type=radio],
input[type=checkbox] {
    width: 18px;
    height: 18px;
}

/* 操作ボタン */
.operationButton {
    display: inline-block;
    padding: 0 4px;
    width: auto;
    height: 20px;
    border-radius: 2px;
    font-size: 0.8em;
    line-height: 20px;
    cursor: pointer;
}
.operationButton:hover {
    opacity: 0.8;
}
/* 送信ボタン */
.submitButton {
    display: inline-block;
    margin: 0 auto;
    padding: 0.5em 0 0.5em 0.5em;
    width: 12em;
    height: 50px;
    border-radius: 4px;
    line-height: 30px;
    font-size: 1.2em;
    letter-spacing: 0.2em;
    transition: all 0.5s;
    cursor: pointer;
}

/**
 * -- ページ内に唯一出現する要素 
 */
/* レイアウト */
#siteIdentifier {
    height: 3em;
}
#globalMenu {
    text-align: center;
}
#globalMenu ul li {
    display: inline-block;
    margin: 0;
    padding: 0.5em;
    width: 10em;
    text-align: center;
    cursor: pointer;
}

#loggedInIcon {
    width: 1.2em;
    height: 1em;
}

#breadcrumb ul li {
    display: inline-block;
    margin: 0.2em 0 0;
    padding: 0 1em 0 0;
    cursor: pointer;
}
#breadcrumb ul li img.goto {
    display: inline-block;
    margin: 0 0 0 0.8em;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(45deg);
}
#breadcrumb ul li:last-child {
    cursor: auto;
}
#breadcrumb ul li:last-child img {
    display: none;
}

#content table caption {
    text-align: right;
    font-size: 1.2em;
    --border: solid 1px #999999;
}
#content table th,
#content table td {
    padding: 0.5em 0.1em;
    text-align: center;
    white-space: nowrap;
}
#content table td {
    padding: 0.5em;
}
#content table td.alignLeft {
    text-align: left;
}
#content table td.alignRight {
    text-align: right;
}

develop/css/upLeftRight.css

@charset "utf-8";
/**
 * @package jQueryMock
 * @version v.d.1
 */

/* ヘッダ領域 左右全域　サブメニュー 左 コンテンツ 右 */
#subMenu {
    position: absolute;
    top: 10em;
    border: none;
}
#subMenu ul {
    padding: 0;
}
#subMenu ul li {
    display: block;
    margin: 0 0 2px 0;
    padding: 0.5em;
    width: 20em;
    height: 2.5em;
    text-align: left;
    cursor: pointer;
}
#subMenu ul li.displayNone {
    display: none;
}
#subMenu ul li img.goto {
    display: block;
    float: right;
    margin: 0.5em 0.5em 0 0;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(45deg);
}
#subMenu ul li img.goto.selected {
    border-width: 4px;
}

#wrapper {
    margin: 0 0 0 22em;
}

/**
 * layout によって変更するもの
 */
.narrowSubMenu #wrapper {
    margin: 0 0 0 2em;
}
.narrowSubMenu #subMenu {
    width: 1.5em;
}
.narrowSubMenu #subMenu ul {
    width: 1em;
}
.narrowSubMenu #subMenu ul li {
    display:none;
}
.narrowSubMenu #subMenu ul li#subMenuOpenCloseBar {
    display:inline-block;
    padding: 0;
    width: 1em;
}

develop/css/toneDefault.css

@charset "utf-8";
/**
 * @package jQueryMock
 * @version v.d.1
 */

/**
 * トーンマナー
 * 使われている色のサンプル
 *
 * 濃い目のグリーン #73b12b
 * 薄い目のグリーン #8ad533
 * 濃い目の灰色 #333333
 * 薄い目の灰色 #999999
 */

/**
 * -- ページ内に複数出現する要素
 */
/* タグ */
h2 {
    border-color: #73b12b;
}
table, th, td {
    border: solid 1px #333333;
}
th {
    background: #333333;
    border: solid 1px #999999;
    color: #ffffff;
}

/* 表内で目立たせるべき文言 */
.ng {
    background: #666666;
}
.ok {
    background: #73b12b;
}

/* 操作ボタン */
.operationButton {
    background: #73b12b;
    color: #ffffff;
}
/* 適用ボタン */
.applyButton {
    background: #73b12b;
    color: #ffffff;
}
/**
 * sitemaster/denial/edit
 */
#content table.checkboxList th {
    border-color: #73b12b;
}

/**
 * -- ページ内に唯一出現する要素 
 */
/* レイアウト */
header {
    border: none;
}
#moduleHeadline {
    background: #333333;
    color: #ffffff;
}
#globalMenu {
    background: #73b12b;
}
#globalMenu ul li {
    border: solid 1px #8ad533;
    border-bottom: none;
    color: #ffffff;
}
#globalMenu ul li:hover {
    background: #8ad533;
}
#globalMenu ul li.selected {
    background: #8ad533;
    color: #333333;
}

#loggedInIcon {
    fill: #8ad533;
}

#subMenu {
    background: #8ad533;
}
#subMenu ul {
    background: #8ad533;
}
#subMenu ul li:hover {
    background: #ccffcc;
}
#subMenu ul li img.goto {
    border: solid 2px #339933;
    border-left: none;
    border-bottom: none;
}

#breadcrumb ul li img.goto {
    border: solid 2px #999999;
    border-left: none;
    border-bottom: none;
}

h1:before {
    background: #73b12b;
    color: #ffffff;
}

#content table td {
    background: #ffffff;
}
#content table tbody tr:nth-child(odd) td {
    background: #edf1f5;
}

#gotoTop {
    background: #8ad533;
}

#layoutSwitcher {
    background: #8ad533;
}

footer {
    border-top: solid 1px #999999;
}

/**
 * layout によって変更するもの
 */
.UpLeftRight #subMenu {
    padding: 2px;
    background: #8ad533;
}
.UpLeftRight #subMenu ul li {
    background: #ffffff;
    border: solid 1px #8ad533;
}
.UpLeftRight #subMenu ul li:hover {
    background: #ccffcc;
}
.UpLeftRight #subMenu ul li:first-child {
    padding: 0 0.5em;
    height: 1.25em;
    background: #8ad533;
    border: none;
    color: #ffffff;
    font-weight: bold;
    text-align:right;
}

再利用できるプレゼン用WEBページを作ろう 第１回
再利用できるプレゼン用WEBページを作ろう 第２回
再利用できるプレゼン用WEBページを作ろう 第３回