ページ作成

文字

ソースリスト

php

GCP

CSS

基本

インターネット WEB CSS:基本

WEBページ作成方法CSS:基本

html の文書は，タグを使ったツリー構造となっています．これが文書の論理構造を表します．文書のスタイル(デザイン)は，CSSで記述します．この CSS について，関連する事項をまとめます．

CSSとは
- 簡単な説明
- 重要な概念
CSSの書き方
- 基本
ボックス表示形式 (display)
- カテゴリー
- 表示動作
FlexBox を使ったレイアウト
- 使い方
- 具体例
私のCSSのファイル
メモ
- ボックス
文法チェック
ページ作成情報
- 参考資料
- 更新履歴

CSSとは

簡単な説明

CSS は HTML ドキュメントのスタイルを記述する言語です．それは，HTML 要素の表示方法を決めます．

重要な概念

ボックスモデル (box model)

HTML は，要素をボックス (box:箱) に置き換えて配置します．これはマージン (Margin) やボーダー (Border)，パディング (Padding)，実際の内容 (Content) で構成されます．

マージン (Margin) 境界(ボーダー)の外側の透明領域です．

ボーダー (Border) 境界を示します．

パディング (Padding) 内容の周りの余白です．

内容 (Content) 要素の本体内容で，図や文字です．

これは「ボックスモデル」と呼ばれ，図1にそのイメージを示します．

図1: CSS のボックスモデル (box model)

具体的な例を見ましょう．以下のように，CSS を記述すると，内容のボックスは幅 300 [px]×高さ50 [px]，パッティングの幅は 20 [px]，ボーダーは幅 15 [px] の緑色，マージンは 50 [px] になります．

<div style="margin: 50px; border: 15px solid green; padding: 20px; width: 300px; height: 50px">
  content
</div>

この結果は，以下のとおりです．

content

CSSの書き方

基本

コメントは，C言語と同じです．すなわち，「/* コメントを書く */」です．複数行にも対応しています．

セレクタ

heml 文書のデザインは，CSS で指定されるプロパティとその値により決まります．これらは括弧を伴って，{プロパティ:値} のように書かれ，これを宣言ブロックと呼びます．この宣言ブロックが適用される範囲は，セレクタにより決められます．セレクタと宣言ブロックは，次のように並べて書きます．

セレクタ{プロパティ:値}

このセレクタの書き方がいろいろあって分かり難いので，表1にまとめます．

CSS セレクタの書き方．
適用範囲	記述方法	例
全て	*(アスタリスク)	*{color:red}
要素	要素	p{color:red}
クラスで指定された要素	要素.クラス名(ドット)	p.clsnm{color:red}
ID名で指定された要素	要素#ID名	p#idnm{color:red}
リンク先が未アクセスの場合	a:link	a:link{color:red}
リンク先がアクセス済みの場合	a:visited	a:visited{color:red}
カーソルが乗っている要素	要素:hover	p:hover{color:red}
クリック中の要素	要素:active	p:active{color:red}
フォーカス中の要素	要素:focus	input:focus{color:red}
指定の言語	要素:lang(言語)	p:lang(en){color:red}
要素の最初の 1 行	要素:first-line	p:first-line{color:red}
要素の最初の 1 文字	要素:first-letter	p:first-letter{color:red}
要素の直前	要素:before	p:before{content:"++"}
要素の直後	要素:after	p:after{content:"++"}
属性がある要素	要素[属性]	p[title]{color:red}
属性の値を指定した要素	要素[属性="値"]	p[title="history"]{color:red}
空白区切りの値のひとつに一致	要素[属性~="値"]	p[title~="asia"]{color:red}
ハイフン区切りの値のひとつに一致	要素[属性\|="値"]	p[title\|="animal"]{color:red}
先頭の文字列が一致	要素[属性^="値"]	p[title^="cat"]{color:red}
最後の文字列が一致	要素[属性$="値"]	p[title$="dog"]{color:red}
一部の文字列が一致	要素[属性*="値"]	p[title*="fox"]{color:red}
要素の最初の子供	要素:first-child	p:first-child{color:red}
最初の要素	要素:first-of-type	p:first-of-type{color:red}
セレクタ1の子孫のセレクタ2	セレクタ1 セレクタ2(空白)	p pre{color:red}
セレクタ1の子供のセレクタ2	セレクタ1>セレクタ2	p>pre{color:red}
セレクタ1の隣接(直後)のセレクタ2	セレクタ1+セレクタ2	p+pre{color:red}
複数のセレクタ	セレクタ1,セレクタ2,セレクタ3	p,pre,li{color:red}

ボックス表示形式 (display)

この属性は全ての要素に適用できます．

カテゴリー

display プロパティはボックスの表示形式を決めます．指定する値は以下のカテゴリーに分けられます．

外側 block，inline，run-in

内側 flow，flow-root，table，flex，grid，ruby

マーカーボックス list-item

内部 table-row-group，table-header-group，table-footer-group，table-row，table-cell，table-column-group，table-column，table-caption，ruby-base，ruby-text，ruby-base-container，ruby-text-container

ボックス contents，none

遺物 inline-block，inline-list-item，inline-table，inline-flex，inline-grid

表示動作

これらプロパティの値を設定すると，ボックスは次のように動作します．

外側 <display-outside>

表示タイプを指定します．

display (display-outside) の値と動作
値	効果
block	ブロックボックスを生成します．
inline	1つ以上のインラインボックスを生成します．
run-in	状況に応じて，ブロックあるいはインラインのボックスを生成します．

内側 <display-inside>

内容をレイアウトします．

display (display-inside) の値と動作
値	効果
flow	フローレイアウトを使いレイアウトします.
flow-root	ブロックコンテナボックスを生成し，フローレイアウトで内容をレイアウトします．
table	<table>と同じよな動作です．
flex	flex コンテナボックスを生成します．
grid	グリッドコンテナボックスを生成します．
ruby	ruby コンテナボックスを生成します．

リスト項目 <display-listitem>

display (display-listitem) の値と動作
値	効果
list-item	<li>と同じ，マーカーボックスを生成します．

内部 <display-internal>

表やルビーのようないくつかのレイアウトモデルは複雑な内部構造を持ちまる．子要素や子孫要素が満たすべきルールがあります．

display (display-internal) の値と動作
値	効果
table-row-group	<tbody> 要素と同じ表示です．
table-header-group	<thead> 要素と同じ表示です．
table-footer-group	<tfoot> 要素と同じ表示です．
table-row	<tr> 要素と同じ表示です．
table-cell	<td> 要素と同じ表示です．
table-column-group	<colgroup> 要素と同じ表示です．
table-column	<col> 要素と同じ表示です．
table-caption	<caption> 要素と同じ表示です．
ruby-base	<rb> 要素と同じ表示です．
ruby-text	<rt> 要素と同じ表示です．
ruby-base-container	<rbc> 要素と同じ表示です．
ruby-text-container	<rtc> 要素と同じ表示です．

ボックス <display-box>

ボックスを生成するか否かを指定します．

display (display-box) の値と動作
値	効果
contents	この要素では特定のボックスを生成しません．疑似要素のボックスまたは子要素のボックスによってボックスが作られます．
none	この要素と子孫はボックスを生成しません．

遺物 <display-legacy>

CSS 2 では display に対して単独のキーワードによる構文である．そのため，同じレイアウトモードのブロックレベルとインラインレベルのそれぞれに対して，別々のキーワードが必要です．CSS3 では不要になった(??)

display (display-legacy) の値と動作
値	効果
inline-block	inline flow-root として動作する．
inline-list-item
inline-table	inline table として動作する．
inline-flex	inline flex として動作する．
inline-grid	inline grid として動作する．

FlexBox を使ったレイアウト

古くからある WEB サイトでは，<table>タグを使ってページをレイアウトしたものがあります．私のページもそうでした．サイトを作り始めた当時 (2003年)，CSS ではレイアウトのような高度なことができなかったからです．ここにきて (2016年)，CSS を使ったレイアウトに変更する決意をしました．

CSS3 の FlexBox を使うと，簡単にレイアウトができます．ここでは，FlexBox を使ったレイアウトの方法を示します．

使い方

FLEXBOX を使ったレイアウトは，CSS に「display: flex;」と指定するだけです．

具体例

LOGO
List1
List2
List3
List4
List5

私のCSSのファイル

私のCSSのファイルは，次の通りです．自分で使っているCSSを，ブラウザで閲覧できるようにしていると，htmlの文章を書くときに便利です．ただ，汚いソースが世間に公開されるのはちょっとばかり恥ずかしいと思うこともあります．しかし，私はCSSで仕事をしているわけではないので，世間の評判なんかどうでもよい—とひらきなおることにします．ということで，自分用にここに公開します．少しくらい，役に立つ人がいるかも．興味のある人は勝手にダウンロードして使ってください．

私の web ページ(山本研究室)の CSS (stylesheet.css)

0001   /* ==================================================================== */
0002   /* stylesheet of yamamoto's laboratory                                  */
0003   /*         last modified 2013.11.16                                     */
0004   /* ==================================================================== */
0005   body{
0006     margin:5px 30px 0px 5px;
0007     background-color:#ffffbf;
0008     padding-left:20px;
0009     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
0010     font-size:100%;
0011     line-height:150%;
0012     counter-reset: fig table list sec sec_h2 subsec subsec_h3 appendix appendix_h2 appendix_sub appendix_sub_h2 ref_num update_his;
0013   }
0014   
0015   
0016   body.frame{
0017     margin:0px;
0018     padding:0px;
0019     background-color:#ffffbf;
0020     font-size:100%;
0021     line-height:150%;
0022   }
0023   
0024   table.side_main{
0025       margin:0pt;
0026       width:100%;
0027       height:100%;
0028       border-collapse:collapse;
0029   }
0030   
0031   span.comment   {color:#008000; font-weight:normal; font-style:normal;}
0032   span.ditective {color:#ff55aa; font-weight:normal; font-style:normal;}
0033   span.function  {color:#ff5500; font-weight:normal; font-style:normal;}
0034   span.keyword   {color:#0000ff; font-weight:normal; font-style:normal;}
0035   span.string    {color:#aa3333; font-weight:normal; font-style:normal;}
0036   span.linenum   {color:#a0a0a0; font-weight:bold; font-style:normal;}
0037   
0038   span.arg{color:red; font-weight:normal; font-style:normal;}
0039   
0040   div.screen {
0041     BACKGROUND-COLOR:lightcyan;
0042     WIDTH:500px;
0043     margin-left:70px;
0044     padding-top:5px;
0045     padding-left:10px;
0046     padding-bottom:5px;padding-right:10px
0047   }
0048   
0049   table {margin:20pt}
0050   table.head {margin:0pt}
0051   table.headmenu {margin:0pt}
0052   
0053   
0054   image {
0055       border-style:none;
0056   }
0057   
0058   a:link {color:#0000ff;text-decoration:none}
0059   a:visited {color:darkmagenta;text-decoration:none}
0060   a:hover {color:#ff00ff;text-decoration:none}
0061   
0062   
0063   /* ==================================================================== */
0064   /*          全体に関わる設定                                            */
0065   /* ==================================================================== */
0066   
0067   /*-------------------------------------- */
0068   /* 文字装飾                               */
0069   /*-------------------------------------- */
0070   
0071   span.key{
0072       color:#000000;
0073       padding-left:3px;
0074       padding-right:3px;
0075       margin-left:3px;
0076       margin-right:3px;
0077       border:1px solid #a0a0a0;
0078       border-radius:3px;
0079       font-size:90%
0080   }
0081   
0082   span.emph{
0083       color:red;
0084   }
0085   
0086   span.it{
0087       font-style:italic;
0088   }
0089   
0090   span.file{
0091       color:green;
0092       font-style:italic;
0093   }
0094   
0095   
0096   /*-------------------------------------- */
0097   /* 数学                                  */
0098   /*-------------------------------------- */
0099   
0100   span.math{
0101       font-style:italic;
0102   }
0103   
0104   span.math:after{
0105       content:"\2009";
0106   }
0107   
0108   span.sub{
0109       vertical-align:sub;
0110       font-size:80%;
0111   }
0112   
0113   span.super{
0114       vertical-align:super;
0115       font-size:80%;
0116   }
0117   
0118   /* ==================================================================== */
0119   /*         ヘッダー部分のスタイル                                          */
0120   /* ==================================================================== */
0121   div.head{
0122       background-color:#8b7bee;
0123       height:80px;
0124       width:100%
0125   }
0126   
0127   div#navigation{
0128       float:left;
0129       width:100%;
0130       margin:0;
0131       border:solid indigo;
0132       border-width:0px 0px 1px;
0133       background-color:#51459d;
0134       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
0135   }
0136   
0137   div#navigation ul{
0138       margin-top:0;
0139       padding:0 0 0 150px;
0140       font-size:90%;
0141       list-style:none;
0142       letter-spacing:10px;
0143       text-transform:lowercase;
0144       color:#ffffff;
0145   }
0146   
0147   div#navigation li{
0148       float:left;
0149       margin:0;
0150       padding:0px 10px;
0151       border:solid #ffffff;
0152       border-width:0px 0px 0px 1px;
0153       line-height:25px;
0154       text-indent:0;
0155       text-decoration:none;
0156       white-space:nowrap;
0157       letter-spacing:normal;
0158   }
0159   
0160   div#navigation a{
0161       display:block;
0162       color:#ffffff;
0163   }
0164   
0165   div#navigation a:hover{
0166       display:block;
0167       color:#ff00ff;
0168   }
0169   
0170   
0171   /* ==================================================================== */
0172   /*           サイドバー部のスタイル                                        */
0173   /* ==================================================================== */
0174   
0175   table.side_main td.side{
0176     width:128px;
0177     text-align:left;
0178     background-color:#7a6ec4;
0179     vertical-align:top;
0180     padding:0px;
0181     border-right: 1px solid indigo;
0182   }
0183   
0184   table.side_main td.side div{
0185     width:128px;
0186     color:#ffffff;
0187     border-bottom:solid 1px white;
0188     padding-top:4px;
0189     padding-bottom:4px;
0190     padding-left:6px;
0191     padding-right:0px;
0192     font-size:85%;
0193     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
0194   }
0195   
0196   table.side_main td.side div.adsense{
0197     width:125px;
0198     margin-top:50px;
0199     margin-left:1px;
0200     margin-right:1px;
0201     margin-bottom:10px;
0202     border-bottom:solid 0px #7a6ec4;
0203   }
0204   
0205   table.side_main td.side div.on{
0206     color:#ff88ff;
0207   }
0208   
0209   table.side_main td.side div.off{
0210     color:#ffffff;
0211   }
0212   
0213   table.side_main td.side div.parent{
0214     color:lime;
0215   }
0216   
0217   table.side_main td.side div.blank{
0218   }
0219   
0220   table.side_main td.side div.child{
0221   }
0222   
0223   table.side_main td.side div.child:before{
0224       content:"\2002\2002";
0225   }
0226   
0227   
0228   table.side_main td.side a{color:#ffffff;text-decoration:none}
0229   table.side_main td.side a:visited{color:#ffffff;text-decoration:none}
0230   table.side_main td.side a:hover{color:#ff00ff}
0231   
0232   
0233   /* ==================================================================== */
0234   /*     コンテンツ部分のスタイル                                         */
0235   /* ==================================================================== */
0236   a[class^="tooltip_"]{
0237      color:blue;
0238    }
0239   
0240   a[id^="tooltip_"]{
0241      color:blue;
0242    }
0243   
0244   
0245   /*----------------------------------------------------------------------- */
0246   /* page top (ページ上部のスタイル)                                         */
0247   /*----------------------------------------------------------------------- */
0248   div.page_top{
0249   
0250   }
0251   
0252   /*----------------------------------------------------------------------- */
0253   /* page top (サイドバーのスタイル)                                         */
0254   /*----------------------------------------------------------------------- */
0255   body table.side_main td.main{
0256     width:100%;
0257     padding-left:10px;
0258     padding-right:10px;
0259     padding-top:5px;
0260     padding-bottom:20px;
0261     vertical-align:top;
0262     background-color:#ffffbf;
0263     font-size:100%;
0264     line-height:150%;
0265   }
0266   
0267   
0268   body table.side_main td.main p{
0269       padding-left:30px;
0270       padding-right:10px;
0271   }
0272   
0273   body table.side_main td.main li{
0274       margin-top:5px;
0275       margin-bottom:5px;
0276   }
0277   
0278   body table.side_main td.main blockquote{
0279       margin:7px 20px 7px 100px;
0280   }
0281   
0282   
0283   body table.side_main td.main .depth_1{
0284       margin:5px 50px 20px 35px;
0285   }
0286   
0287   body table.side_main td.main .depth_2{
0288       margin:2px 50px 20px 20px;
0289   }
0290   
0291   body table.side_main td.main a:link{
0292       color:#0000ff;text-decoration:none;
0293   }
0294   
0295   body table.side_main td.main a:visited{
0296       color:darkmagenta;text-decoration:none;
0297   }
0298   
0299   body table.side_main td.main a:hover{
0300       color:#ff00ff;text-decoration:none;
0301   }
0302   
0303   
0304   /*---------------------------------------- */
0305   /* path (パスのスタイル)                    */
0306   /*---------------------------------------- */
0307   div.page_top div.path{
0308       position:relative;
0309       margin-top:0px;
0310       margin-left:0px;
0311       text-align:left;
0312       font-size:80%;
0313   }
0314   
0315   div.page_top div.path span.parent{
0316   }
0317   
0318   div.page_top div.path span.parent:after{
0319       content:"\2002>\2002";
0320   }
0321   
0322   div.page_top div.path span.self{
0323   }
0324   
0325   /*---------------------------------------- */
0326   /* title (タイトルのスタイル)               */
0327   /*---------------------------------------- */
0328   h1{
0329       color:black;
0330       margin-top:20px;
0331       margin-bottom:40px;
0332   }
0333   
0334   div.page_top h1.title{
0335       margin-top:10px;
0336       margin-bottom:20px;
0337       color:black;
0338   }
0339   
0340   div.page_top h1.title span.category{
0341       color:limegreen;
0342       margin-right:20px;
0343   }
0344   
0345   div.page_top h1.title span.subtitle{
0346       color:darkgreen;
0347       font-size:70%;
0348       padding-top:20px;
0349       padding-left:40px;
0350   }
0351   
0352   div.page_top h1.title span.subtitle:before{
0353       content: "\A\A \2002\2002\2002 \2014 \2002";
0354       white-space: pre;
0355   }
0356   
0357   div.page_top h1.title span.subtitle:after{
0358       content: "\2002 \2014";
0359   }
0360   
0361   
0362   /*---------------------------------------- */
0363   /* about (概要のスタイル)                   */
0364   /*---------------------------------------- */
0365   div.page_top p.about{
0366       color:black;
0367       margin-top:0px;
0368       margin-left:0px;
0369       text-align:left;
0370   }
0371   
0372   /*--------------------------------------- */
0373   /* table of contents (目次のスタイル)      */
0374   /*--------------------------------------- */
0375   /* --- 「目次」の表示 -----------*/
0376   div.page_top h2.table_of_contents{
0377       border-style:none;
0378       background-color:#ffffbf;
0379       color:#000000;
0380       font-weight:400;
0381   }
0382   
0383   
0384   /* --- section(目次のメイン) -------- */
0385   div.page_top ul.table_of_contents{
0386       margin:0px 50px 0px 0px;
0387       list-style:none;
0388       line-height:120%;
0389   }
0390   
0391   div.page_top ul.table_of_contents li{
0392       counter-increment:sec;
0393   }
0394   
0395   ul.table_of_contents li:before{
0396       content:counter(sec) "\2002";
0397   }
0398   
0399   /* --- subsection(目次のサブ) -------- */
0400   div.page_top ul.table_of_contents ul{
0401       padding:0px 0px 5px 20px;
0402       list-style:none;
0403       counter-reset:subsec;
0404   }
0405   
0406   div.page_top ul.table_of_contents ul li{
0407       counter-increment:subsec;
0408   }
0409   
0410   div.page_top ul.table_of_contents ul li:before{
0411       content:counter(sec) "." counter(subsec) "\2002";
0412   }
0413   
0414   /* --- 目次が二列の場合 -----------------------------*/
0415   /* --- section(目次のメイン) -------- */
0416   div.page_top ul.table_of_contents2{
0417       margin:0px 50px 0px 0px;
0418       list-style:none;
0419       line-height:120%;
0420       float:left;
0421   }
0422   
0423   div.page_top ul.table_of_contents2 li{
0424       counter-increment:sec;
0425   }
0426   
0427   ul.table_of_contents2 li:before{
0428       content:counter(sec) "\2002";
0429   }
0430   
0431   /* --- subsection(目次のサブ) -------- */
0432   div.page_top ul.table_of_contents2 ul{
0433       padding:0px 0px 5px 20px;
0434       list-style:none;
0435       counter-reset: subsec;
0436   }
0437   
0438   div.page_top ul.table_of_contents2 ul li{
0439       counter-increment:subsec;
0440   }
0441   
0442   div.page_top ul.table_of_contents2 ul li:before{
0443       content:counter(sec) "." counter(subsec) "\2002";
0444   }
0445   
0446   
0447   /*---------------------------------------- */
0448   /* toppage (トップページのスタイル)         */
0449   /*---------------------------------------- */
0450   
0451   /* --- whats new page 番号 -------- */
0452   
0453   div.whats_new_page{
0454       padding-left:50px;
0455   }
0456   
0457   div.whats_new_page span.this{
0458       color:#000000;
0459       font-weight:bold;
0460       background-color:#ffffef;
0461       border-style:solid;
0462       border-width:1px;
0463       padding:3px 5px 3px 5px;
0464       border-color:#BBBBBB
0465   }
0466   
0467   div.whats_new_page span.others{
0468       color:#0000ff;
0469       border-style:solid;
0470       border-width:1px;
0471       padding:3px 5px 3px 5px;
0472       border-color:#BBBBBB;
0473   }
0474   
0475   div.whats_new_page span.others:hover{
0476       color:#ffffff;
0477       background-color:#4169e1;
0478       border-style:solid;
0479       border-width:1px;
0480       padding:3px 5px 3px 5px;
0481       border-color:#BBBBBB;
0482   }
0483   
0484   div.whats_new_page span.fade_out{
0485       color:#bbbbbb;
0486       border-style:solid;
0487       border-width:1px;
0488       padding:3px 5px 3px 5px;
0489       border-color:#BBBBBB;
0490   }
0491   
0492   div.whats_new_page span.hellip{
0493       color:#0000ff;
0494       font-weight:bold;
0495       padding:3px 5px 3px 5px;
0496   }
0497   
0498   /*----------------------------------------------------------------------- */
0499   /* section subsection (章立てのスタイル)                                   */
0500   /*----------------------------------------------------------------------- */
0501   
0502   /* ------------------------ */
0503   /*      h2                  */
0504   /* ------------------------ */
0505   
0506   h2{
0507     background-color:#51459d;
0508     color:#ffffff;
0509     width:97%;
0510     border-top:    1px solid #cccccc;
0511     border-left:   1px solid #cccccc;
0512     border-right:  1px solid indigo;
0513     border-bottom: 1px solid indigo;
0514     padding:3px 0px 2px 8px;
0515     margin:0px 20px 10px 0px;
0516     font-weight:lighter;
0517     font-size:110%;
0518     line-height: 120%;
0519   }
0520   
0521   
0522   /* -- 通常本文 ------*/
0523   
0524   h2.body{
0525       margin:50px 20px 10px 0px;
0526       counter-increment:sec_h2;
0527       counter-reset: subsec_h3 0;
0528   }
0529   
0530   h2.body:first-of-type{
0531       margin:0px 20px 10px 0px;
0532   }
0533   
0534   h2.body:before{
0535       content:counter(sec_h2) "\2002";
0536   }
0537   
0538   h2.body.nonumber:before{
0539       content:""
0540   }
0541   
0542   
0543   /* -- 付録 ------*/
0544   
0545   h2.body_appendix{
0546       margin:50px 20px 10px 0px;
0547       counter-increment:appendix_h2;
0548       counter-reset:appendix_sub_h3 0;
0549   }
0550   
0551   
0552   h2.body_appendix:first-of-type{
0553       counter-reset: appendix_h2 0;
0554   }
0555   
0556   
0557   h2.body_appendix:before{
0558       content:"付録\0A" counter(appendix_h2, upper-latin) "\2002";
0559   }
0560   
0561   h2.body_appendix.nonumber:before{
0562       content:""
0563   }
0564   
0565   /* -- ページ作成情報 ---*/
0566   
0567   h2.body_info:before{
0568   }
0569   
0570   /* ------------------------ */
0571   /*      h3                  */
0572   /* ------------------------ */
0573   
0574   h3{
0575     background-color:#9684f9;
0576     color:#ffffff;
0577     width:80%;
0578     font-weight:lighter;
0579     border-top: 1px solid #cccccc;
0580     border-left: 1px solid #cccccc;
0581     border-right: 1px solid indigo;
0582     border-bottom: 1px solid indigo;
0583     padding:2px 6px 2px 10px;
0584     font-size:110%;
0585     line-height: 110%;
0586   }
0587   
0588   /* -- 通常本文 ------*/
0589   
0590   h3.body{
0591     counter-increment:subsec_h3;
0592   }
0593   
0594   h3.body:before{
0595       content:counter(sec_h2) "." counter(subsec_h3) "\2002";
0596   }
0597   
0598   h3.body.nonumber:before{
0599       content:""
0600   }
0601   
0602   /* -- 付録 ------*/
0603   
0604   h3.body_appendix{
0605     counter-increment:appendix_sub_h3;
0606   }
0607   
0608   h3.body_appendix:before{
0609       content:counter(appendix_h2, upper-latin) "." counter(appendix_sub_h3) "\2002";
0610   }
0611   
0612   h3.body_appendix.nonumber:before{
0613       content:""
0614   }
0615   
0616   /* -- ページ作成情報 ---*/
0617   
0618   h3.body_info:before{
0619   }
0620   
0621   /* ------------------------ */
0622   /*      h4                  */
0623   /* ------------------------ */
0624   
0625   h4{
0626     font-weight:lighter;
0627     color:#000000;
0628     width:70%;
0629     border-left:#b8adf7 20px solid;
0630     border-bottom:#b8adf7 2px solid;
0631     padding:0px 6px 0px 2px
0632   }
0633   
0634   /* ------------------------ */
0635   /*      h5                  */
0636   /* ------------------------ */
0637   
0638   h5{
0639     width:100px;
0640     font-weight:lighter;
0641     font-size:90%;
0642     color:#000000;
0643     border-top: solid 1px #b8adf7;
0644     border-right: solid 1px indigo;
0645     border-bottom: solid 1px indigo;
0646     border-left: solid 1px #b8adf7;
0647     padding: 0px 0px 0px 5px;
0648     margin-left:20px;
0649     margin-top:0px;
0650     margin-bottom:0px;
0651   }
0652   
0653   
0654   /* ------------------------ */
0655   /*   枠付きタイトル          */
0656   /* ------------------------ */
0657   
0658   div.box_title{
0659       margin-top:20px;
0660   }
0661   
0662   div.box_title span{
0663       margin:10px 0px 5px 40px;
0664       padding:0px 10px 0px 10px;
0665       background-color:mediumpurple;
0666       color:white;
0667   }
0668   
0669   
0670   /* ====================================================================== */
0671   /*   Layout                                                               */
0672   /* ====================================================================== */
0673   
0674   /* ---------------------------------------------------------------------- */
0675   /* float                                                                  */
0676   /*        align <div> holizontaly frm                                     */
0677   /*        https://www.halawata.net/2011/10/css-float-display-box/         */
0678   /* ---------------------------------------------------------------------- */
0679   
0680   
0681   div.boxContainer{
0682       overflow:hidden;
0683   }
0684   
0685   /* --- clearfix --- */
0686   div.boxContainer:before{
0687       content:"";
0688       display:table;
0689   }
0690   
0691   div.boxContainer:after{
0692       content:"";
0693       display:table;
0694       clear:both;
0695   }
0696   
0697   div.lbox {
0698       float: left;
0699   }
0700   
0701   div.rbox {
0702       float: right;
0703   }
0704   
0705   
0706   /* ----------------------------------------------------------------------- */
0707   /* Frexbox                                                                 */
0708   /* ----------------------------------------------------------------------- */
0709   
0710   /* 水平方向 */
0711   div.flex_align_h{
0712       display: flex;
0713       flex-direction: row;
0714       flex-wrap:wrap; 
0715       align-items:flex-end;
0716   }
0717   
0718   div.flex_align_h div{
0719     margin-left: 5px;
0720     margin-right: 5px;
0721   }
0722   
0723   /* 垂直方向 */
0724   div.flex_align_v{
0725       display: flex;
0726       flex-direction: column;
0727   }
0728   
0729   div.center{
0730       align-items: center;
0731   }
0732   
0733   div.flex_align_v div{
0734     margin-top:    5px;
0735     margin-bottom: 5px;
0736     margin-left:   5px;
0737     margin-right:  5px
0738   }
0739   
0740   /* 垂直方向 */
0741   div.flex_align_fig_cap{
0742       display: flex;
0743       flex-direction: column;
0744       margin-bottom: 30px;
0745   }
0746   
0747   /* --------------------------- */
0748   /* <ul> を使ったレイアウト      */
0749   /* --------------------------- */
0750   ul.frex_lrrrr{
0751       display: -webkit-flex;
0752       display: flex;
0753       list-style: none;
0754       margin-left: 0px;
0755       padding-left: 0px;
0756       justify-content:flex-end;
0757   }
0758   
0759   ul.frex_lrrrr li:first-child{
0760      margin-right: auto;
0761   }
0762   
0763   /* ====================================================================== */
0764   /*      paragraph                                                         */
0765   /* ====================================================================== */
0766   
0767   /*----- タイトル class='title' ----- */
0768   p span.title{
0769       color:darkgreen;
0770       font-weight:bold;
0771       font-style:normal;
0772   }
0773   
0774   p span.title:after{
0775       content:"\2002";
0776   }
0777   
0778   /*----- タイトル class='p_title' ----- */
0779   p span.p_title{
0780     background-color:#d6c4f9;
0781     color:#000000;
0782     width:80%;
0783     font-weight:lighter;
0784     border-top: 1px solid #cccccc;
0785     border-left: 1px solid #cccccc;
0786     border-right: 1px solid #9684f9;
0787     border-bottom: 1px solid #9684f9;
0788     padding:2px 2px 2px 2px;
0789     margin-right: 8px;
0790     font-size:90%;
0791   }
0792   
0793   /*----------------------------------------------------------------------- */
0794   /*      強調文字列                                                        */
0795   /*----------------------------------------------------------------------- */
0796   
0797   p span.file,ul li span.file,ol li span.file{
0798       color:crimson;
0799       font-style:normal;
0800   }
0801   
0802   p span.path,ul li span.path,ol li span.path{
0803       color:crimson;
0804       font-style:normal;
0805   }
0806   
0807   p span.command,ul li span.command,ol li span.command{
0808       color:darkmagenta;
0809       font-size:100%;
0810       font-style:normal;
0811   }
0812   
0813   p span.option,ul li span.option,ol li span.option{
0814       color:mediumvioletred;
0815       font-size:100%;
0816       font-style:normal;
0817   }
0818   
0819   p span.argument,ul li span.argument,ol li span.argument{
0820       color:blueviolet;
0821       font-size:100%;
0822       font-style:normal;
0823   }
0824   
0825   p span.emphasis,ul li span.emphasis,ol li span.emphasis{
0826       color:red;
0827       font-size:100%;
0828       font-style:italic;
0829   }
0830   
0831   p span.emph,ul li span.emph,ol li span.emph{
0832       color:red;
0833       font-size:100%;
0834       font-style:italic;
0835   }
0836   
0837   p span.it,ul li span.it,ol li span.it{
0838       font-style:italic;
0839   }
0840   
0841   p span.menu,ul li span.menu,ol li span.menu{
0842       color:DarkGreen;
0843       font-size:100%;
0844       font-style:normal;
0845   }
0846   
0847   p span.button, ul li span.button, ol li span.button{
0848       color:#000071;
0849       background:#ffff8f;
0850       padding-left:5px;
0851       padding-right:5px;
0852       margin-left:5px;
0853       margin-right:5px;
0854       border:1px solid #a0a0a0;
0855       border-radius:3px;
0856       font-size:95%
0857   }
0858   
0859   p span.link, ul li span.link, ol li span.link{
0860       color:#000088;
0861       margin-left:5px;
0862       margin-right:5px;
0863   }
0864   
0865   p span.link.ul, ul li span.link.ul, ol li span.link.ul{
0866       text-decoration: underline;
0867   }
0868   
0869   
0870   /*----------------------------------------------------------------------- */
0871   /* list (リストのスタイル)                                                 */
0872   /*----------------------------------------------------------------------- */
0873   
0874   /* --- リスト中のタイトル(普通は先頭) ---------- */
0875   li span.title{
0876       color:darkgreen;
0877       font-weight:bold;
0878       font-style:normal;
0879   }
0880   
0881   li span.title:after{
0882       content:"\2002";
0883   }
0884   
0885   li span.file{
0886       color:crimson;
0887       font-style:normal;
0888   }
0889   
0890   /* -------------- 数字付きリスト --------------------------------------- */
0891   ol.enumerate{
0892       list-style-type:decimal;
0893       margin:5px 50px 20px 35px;
0894   }
0895   
0896   ol.enumerate ol{
0897       list-style-type:lower-roman;
0898       margin:5px 50px 20px 0px;
0899   }
0900   
0901   
0902   ol.enumerate ol ol{
0903       list-style-type:lower-alpha;
0904   }
0905   
0906   ol.enumerate ul{
0907       list-style-type:square;
0908   }
0909   
0910   ol.enumerate ol ul{
0911       list-style-type:square;
0912   }
0913   
0914   ol.enumerate ul ul{
0915       list-style-type:disc;
0916   }
0917   
0918   /* -------------- 括弧付きリスト --------------------------------------- */
0919   
0920   /* --- 丸括弧 (1) -------------- */
0921   ol.parentheses{
0922     list-style-type: none;
0923     margin:5px 50px 20px 45px;
0924   }
0925   
0926   ol.parentheses li{
0927     counter-increment: cnt;
0928   }
0929   
0930   ol.parentheses li:before{
0931     content: "(" counter(cnt) ") ";
0932     display:inline-block;
0933     margin-left:-33px;
0934     width: 33px;
0935   }
0936   
0937   /* --- 角括弧 [1] -------------- */
0938   ol.brackets{
0939     list-style-type: none;
0940     margin:5px 50px 20px 45px;
0941   }
0942   
0943   ol.brackets li{
0944     counter-increment: cnt;
0945   }
0946   
0947   ol.brackets li:before {
0948     content: "[" counter(cnt) "]";
0949     display:inline-block;
0950     margin-left:-33px;
0951     width: 33px;
0952   }
0953   
0954   /* --- 波括弧 {1} -------------- */
0955   ol.braces{
0956     list-style-type: none;
0957     margin:5px 50px 20px 45px;
0958   }
0959   
0960   ol.braces li{
0961     counter-increment: cnt;
0962   }
0963   
0964   ol.braces li:before {
0965     content: "\007B" counter(cnt) "\007D";
0966     display:inline-block;
0967     margin-left:-33px;
0968     width: 33px;
0969   }
0970   
0971   /* --- 山括弧 <1> -------------- */
0972   ol.angles{
0973     list-style-type: none;
0974     margin:5px 50px 20px 45px;
0975   }
0976   
0977   ol.angles li{
0978     counter-increment: cnt;
0979   }
0980   
0981   ol.angles li:before {
0982     content: "\003C" counter(cnt) "\003E";
0983     display:inline-block;
0984     margin-left:-43px;
0985     width: 43px;
0986   }
0987   
0988   
0989   /* --- 記号付きリスト -------------- */
0990   ul.itemize{
0991       list-style-type:square;
0992       margin:5px 50px 20px 35px;
0993   }
0994   
0995   ul.itemize ul{
0996       list-style-type:disc;
0997       margin:5px 50px 20px -20px;
0998   }
0999   
1000   /* --- 定義付きリスト -------------- */
1001   td.main dl.diff{
1002       margin:5px 50px 20px 55px;
1003   }
1004   
1005   td.main dl dt{
1006   }
1007   
1008   td.main dl dd{
1009       margin-bottom:10px;
1010   }
1011   
1012   /*----------------------------------------------------------------------- */
1013   /* コマンド説明用                                                          */
1014   /*----------------------------------------------------------------------- */
1015   
1016   /* --- リストを使ったコマンド説明(リストの先頭にコマンド) --------- */
1017   ul.command{
1018       list-style-type:square;
1019       margin:5px 50px 20px 35px;
1020   }
1021   
1022   ul.command ul{
1023       list-style-type:disc;
1024       margin:5px 50px 20px -20px;
1025   }
1026   
1027   
1028   ul.command li span.name{
1029       color:crimson;
1030   }
1031   
1032   ul.command li span.arg{
1033       color:#004000;
1034   }
1035   
1036   ul.command li span.description{
1037       color:black;
1038   }
1039   
1040   ul.command li span.description:before{
1041       content:"\2002\2002";
1042   }
1043   
1044   /* --- コマンドの説明用のリスト -------------- */
1045   dl.discription_of_command{
1046       margin:5px 50px 20px 55px;
1047   }
1048   
1049   dl.discription_of_command dt{
1050       font-weight:bold;
1051   }
1052   
1053   dl.discription_of_command span.description{
1054       color:black;
1055       font-weight:normal;
1056       font-style:italic;
1057       margin-left:5px;
1058       margin-right:35px;
1059   }
1060   
1061   dl.discription_of_command span.description:before{
1062       color:black;
1063       content:": ";
1064   }
1065   
1066   dl.discription_of_command span.arg{
1067       color:crimson;
1068       font-weight:normal;
1069       font-style:italic;
1070       margin-left:10px;
1071   }
1072   
1073   dl.discription_of_command dd span.arg{
1074       color:crimson;
1075       font-weight:normal;
1076       font-style:italic;
1077       margin-left:0px;
1078   }
1079   
1080   dl.discription_of_command span.arg2{
1081       color:darkgreen;
1082       font-weight:normal;
1083       font-style:italic;
1084       margin-left:10px;
1085   }
1086   
1087   dl.discription_of_command dd span.arg2{
1088       color:darkgreen;
1089       font-weight:normal;
1090       font-style:italic;
1091       margin-left:0px;
1092   }
1093   
1094   dl.discription_of_command span.op{
1095       color:fuchsia;
1096       font-weight:normal;
1097       font-style:italic;
1098       margin-left:10px;
1099   }
1100   
1101   dl.discription_of_command dd span.op{
1102       color:fuchsia;
1103       font-weight:normal;
1104       font-style:italic;
1105       margin-left:0px;
1106   }
1107   
1108   dl.discription_of_command span.key{
1109       color:black;
1110       font-weight:normal;
1111       font-style:normal;
1112       padding-left:5px;
1113       padding-right:5px;
1114       margin-left:5px;
1115       margin-right:5px;
1116       border:1px solid #a0a0a0;
1117       border-radius:3px;
1118       font-size:95%
1119   }
1120   
1121   dl.discription_of_command span.default{
1122       color:black;
1123       font-weight:normal;
1124       margin-left:10px;
1125   }
1126   
1127   dl.discription_of_command span.default:before{
1128       color:black;
1129       content:"デフォルト: ";
1130   }
1131   
1132   dl.discription_of_command span.org{
1133       color:mediumblue;
1134       font-weight:normal;
1135       font-style:normal;
1136       margin-left:35px;
1137       margin-right:35px;
1138   }
1139   
1140   dl.discription_of_command dd{
1141       margin-bottom:10px;
1142   }
1143   
1144   
1145   /*----------------------------------------------------------------------- */
1146   /* キーボード                                                             */
1147   /*----------------------------------------------------------------------- */
1148   
1149   .keyboard {
1150     display: inline-block;
1151     width: auto;
1152     height: auto;
1153     padding: 4px 12px;
1154     margin: 0 4px;
1155     background: #fff;
1156     border-radius: 3px;
1157     box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
1158     font: 18px/24px Helvetica, Arial, serif;
1159     text-align: center;
1160     color: #666;
1161   }
1162   
1163   /*----------------------------------------------------------------------- */
1164   /* 引用 or 字下げしたブロック                                              */
1165   /*----------------------------------------------------------------------- */
1166   div.quote{
1167       margin:7px 100px 7px 100px;
1168   }
1169   
1170   /*----------------------------------------------------------------------- */
1171   /* table and its caption (表とキャプション)                                */
1172   /*----------------------------------------------------------------------- */
1173   
1174   /*------------------------------------------------*/
1175   /* 一般的な表(背景色有り，罫線有り，キャプション有り)*/
1176   /*------------------------------------------------*/
1177   table.default{
1178       border: 1px #E3E3E3 solid;
1179       border-collapse: collapse;
1180       border-spacing: 0;
1181       margin-top:5px;
1182       margin:0 auto;
1183       background-color:#def0ff;
1184       font-size:90%;
1185       empty-cells:show;
1186   }
1187   
1188   table.default caption{
1189       counter-increment:table;
1190       font-size:100%;
1191       text-align:left;
1192       padding-left:20px;
1193       padding-bottom:5px;
1194   }
1195   
1196   table.default caption:before{
1197       content: "表" counter(table) ": ";
1198   }
1199   
1200   table.default th{
1201       border: 1px black solid;
1202       background-color:#b0c0ef;
1203       text-align:center;
1204   }
1205   
1206   table.default tr{
1207       vertical-align:top
1208   }
1209   
1210   table.default td{
1211       padding: 3px;
1212       border: 1px black solid;
1213       text-align:left;
1214   }
1215   
1216   /*------------------------------------------------*/
1217   /* 立体的な表(背景色有り，罫線有り，キャプション有り) */
1218   /*------------------------------------------------*/
1219   table.solid{
1220       border-spacing: 2px;
1221       border-top:   1px solid #cee0ff;
1222       border-right: 1px solid #000000;
1223       border-bottom:1px solid #000000;
1224       border-left:  1px solid #cee0ff;
1225       background-color:#cee0ff;
1226       font-size:90%;
1227       empty-cells:show;
1228   }
1229   
1230   table.solid caption{
1231       counter-increment:table;
1232       font-size:100%;
1233       text-align:left;
1234       padding-left:20px;
1235       padding-bottom:5px;
1236   }
1237   
1238   table.solid caption:before{
1239       content: "表" counter(table) ": ";
1240   }
1241   
1242   table.solid th{
1243       border-top:1px solid #888;
1244       border-top:1px solid #595b60;
1245       border-right:1px solid #dac0ca;
1246       border-bottom:1px solid #d7d9dd;
1247       border-left:1px solid #777d88;
1248       text-align:center;
1249   }
1250   
1251   table.solid tr{
1252   }
1253   
1254   table.solid td{
1255       border-top:1px solid #888;
1256       border-top:1px solid #595b60;
1257       border-right:1px solid #dac0ca;
1258       border-bottom:1px solid #d7d9dd;
1259       border-left:1px solid #777d88;
1260       text-align:left;
1261   }
1262   
1263   /*------------------------------------------------*/
1264   /* Latex のコマンドと結果(図)                      */
1265   /*------------------------------------------------*/
1266   table.latex_command_result{
1267       border: 1px #E3E3E3 solid;
1268       border-collapse: collapse;
1269       border-spacing: 0;
1270       margin-top:5px;
1271       margin:5px 10px 10px 50px;
1272       font-size:90%;
1273       empty-cells:show;
1274   }
1275   
1276   table.latex_command_result caption{
1277       counter-increment:table;
1278       font-size:100%;
1279       text-align:left;
1280       padding-left:20px;
1281       padding-bottom:3px;
1282   }
1283   
1284   table.latex_command_result caption:before{
1285       content: "表" counter(table) ": ";
1286   }
1287   
1288   table.latex_command_result th.command{
1289       border: 1px black solid;
1290       background-color:#b0c0ef;
1291       text-align:center;
1292   }
1293   
1294   table.latex_command_result th.separater{
1295       border:none;
1296       background-color:transparent;
1297   }
1298   
1299   table.latex_command_result th.result{
1300       border: 1px black solid;
1301       background-color:#b0c0ef;
1302       text-align:center;
1303   }
1304   
1305   table.latex_command_result tr{
1306       vertical-align:top;
1307   }
1308   
1309   table.latex_command_result td.command{
1310       padding: 3px;
1311       border: 1px black solid;
1312       text-align:left;
1313       background-color:#def0ff;
1314   }
1315   
1316   table.latex_command_result td.result{
1317       padding: 3px;
1318       border: 1px black solid;
1319       text-align:center;
1320       vertical-align:middle;
1321       background-color:#def0ff;
1322   }
1323   
1324   table.latex_command_result td.separater{
1325       border: none;
1326       background-color:transparent;
1327   }
1328   
1329   table.latex_command_result td.result img{
1330       width:auto;
1331       height:auto;
1332   }
1333   
1334   
1335   /*------------------------------------------------*/
1336   /* 説明用の表 (アイテムと説明)                      */
1337   /*------------------------------------------------*/
1338   table.item_explain{
1339       border-style:none;
1340       margin-top:5px;
1341       margin-right:50px;
1342       margin-bottom:5px;
1343       margin-left:80px;
1344       border-spacing:0px 10px;
1345       font-size:95%;
1346       empty-cells:show;
1347   }
1348   
1349   table.item_explain caption{
1350       counter-increment:table;
1351       font-size:100%;
1352       text-align:left;
1353       padding-left:20px;
1354       padding-bottom:2px;
1355   }
1356   
1357   table.item_explain caption:before{
1358       content: "表" counter(table) ": ";
1359   }
1360   
1361   table.narrow{
1362       border-spacing:0px 0px;
1363   }
1364   
1365   table.item_explain tr.top{
1366       text-align:left;
1367       vertical-align:top;
1368       background-color:LightGray;
1369       font-size:small;
1370       word-break:break-all;
1371   }
1372   
1373   table.item_explain tr.top th{
1374       color:DarkBlue;
1375       font-size:110%;
1376   }
1377   
1378   table.item_explain th{
1379       padding:3px;
1380   }
1381   
1382   table.item_explain tr.body{
1383       text-align:left;
1384       vertical-align:top;
1385       word-break:break-all;
1386   }
1387   
1388   table.item_explain tr.body td.item{
1389       color:crimson;
1390       padding-right:10px;
1391   }
1392   
1393   table.item_explain tr.body td.item span.arg{
1394       color:darkviolet;
1395   }
1396   
1397   table.item_explain tr.body td.explain{
1398       color:black;
1399       padding-left:10px;
1400       padding-right:10px;
1401   }
1402   
1403   table.item_explain tr.body td.explain span.arg{
1404       color:darkviolet;
1405   }
1406   
1407   
1408   /*------------------------------------------------*/
1409   /* 説明用の表(背景色無し，罫線無し，キャプション無し) */
1410   /*------------------------------------------------*/
1411   table.explanation{
1412       margin-top:10px;
1413       margin-left:115px;
1414       margin-bottom:10px;
1415       padding: 5px 20px 5px;
1416       border-collapse:separate;
1417       border-style:none;
1418       border-spacing:15px 5px;
1419       font-size:100%;
1420       line-height:120%;
1421       empty-cells:show;
1422   }
1423   
1424   table.explanation tr td{
1425       text-align:left;
1426       vertical-align:top;
1427       word-break:break-all;
1428   }
1429   
1430   table.explanation tr td pre{
1431       font-size:100%;
1432       line-height:100%;
1433   }
1434   
1435   li table.explanation{
1436       margin-left:40px;
1437   }
1438   
1439   li li table.explanation{
1440       margin-left:20px;
1441   }
1442   
1443   /*------------------------------------------------*/
1444   /* インラインフレームの表(シンプル，キャプション無し) */
1445   /*------------------------------------------------*/
1446   table.inline_frame{
1447       margin-top:10px;
1448       margin-left:20px;
1449       margin-bottom:10px;
1450       padding: 5px 5px 5px;
1451       border-collapse:separate;
1452       border-style:none;
1453       border-spacing:15px 5px;
1454       font-size:100%;
1455       line-height:120%;
1456       empty-cells:show;
1457   }
1458   
1459   table.inline_frame tr td{
1460       text-align:left;
1461       vertical-align:top;
1462       word-break:break-all;
1463   }
1464   
1465   table.explanation tr td pre{
1466       font-size:100%;
1467       line-height:100%;
1468   }
1469   
1470   
1471   /*----------------------------------------------------------------------- */
1472   /* figure and its caption (図とキャプション)                               */
1473   /*----------------------------------------------------------------------- */
1474   .main table.figure{
1475       margin-top:10px;
1476       margin-left:50px;
1477       margin-bottom:30px;
1478       border:none;
1479   }
1480   
1481   /*-------- figure ----------*/
1482   .main table.figure td.image{
1483       vertical-align:top;
1484       text-align:center;
1485   }
1486   
1487   .main table.figure td.image.bottom{
1488       vertical-align:bottom;
1489   }
1490   
1491   .main table.figure td.image.shadow img{
1492       box-shadow:8px 8px 10px 0px rgba(0,0,0,0.7);
1493   }
1494   
1495   /*-------- caption ----------*/
1496   .main table.figure td.caption{
1497       font-size:90%;
1498       vertical-align:top;
1499       text-align:left;
1500       padding-left:20px;
1501       padding-top:10px;
1502   }
1503   
1504   .main table.figure td.caption.center{
1505       vertical-align:top;
1506       text-align:center;
1507   }
1508   
1509   .main table.figure td.caption.number:before{
1510       counter-increment:fig;
1511       content: "図" counter(fig) ": ";
1512   }
1513   
1514   
1515   /*----------------------------------------------------------------------- */
1516   /* 参考文献 (references)                                                   */
1517   /*----------------------------------------------------------------------- */
1518   
1519   /*------------------ */
1520   /* 通し番号付き       */
1521   /*------------------ */
1522   
1523   div.references ol{
1524       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1525       font-size:100%;
1526       line-height:150%;
1527       list-style-type:none;
1528       margin-right:30px;
1529   }
1530   
1531   div.references ol li{
1532       padding-left:35px;
1533       counter-increment:ref_num;
1534       text-indent:-35px;
1535   }
1536   
1537   div.references ol li:before{
1538           content: "[" counter(ref_num) "]\2002";
1539   }
1540   
1541   /*------------------ */
1542   /* 通し番号無し       */
1543   /*------------------ */
1544   
1545   div.references ul{
1546       margin-right:30px;
1547       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1548       font-size:100%;
1549       line-height:150%;
1550   }
1551   
1552   /*----------------------------------------------------------------------- */
1553   /* 更新履歴 (update history)                                               */
1554   /*----------------------------------------------------------------------- */
1555   
1556   div.update_history{
1557       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1558       font-size:100%;
1559       line-height:150%;
1560       list-style-type:none;
1561   }
1562   
1563   div.update_history table{
1564       margin-top:0px;
1565       margin-bottom:0px;
1566       margin-left:40px;
1567       margin-right:100px;
1568       border-spacing:0px 10px;
1569   }
1570   
1571   div.update_history table tr{
1572       counter-increment:update_his;
1573   }
1574   
1575   
1576   div.update_history table tr td.date{
1577       vertical-align:top;
1578       width:180px;
1579   }
1580   
1581   div.update_history table tr td.date:before{
1582       content: "[" counter(update_his) "]\2002";
1583   }
1584   
1585   div.update_history table tr td.explanation{
1586       padding-left:20px;
1587       padding-right:50px;
1588   }
1589   
1590   
1591   /* ====================================================================== */
1592   /* program source inline                                                  */
1593   /* ====================================================================== */
1594   
1595   span.program_source{
1596     margin-left:2px;
1597     margin-right:2px;
1598     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1599     font-size:90%;
1600   }
1601   
1602   span.program_source.mono_space{
1603       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1604       font-size:95%;
1605   }
1606   
1607   
1608   /* ====================================================================== */
1609   /* program source                                                         */
1610   /* ====================================================================== */
1611   
1612   /*----------------------------------------------------------------------- */
1613   /* source list caption
1614   /*----------------------------------------------------------------------- */
1615   p.source_caption{
1616       margin-top:20px;
1617       margin-left:35px;
1618       margin-bottom:-10px;
1619       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1620       font-size:100%;
1621       line-height:100%;
1622   }
1623   
1624   p.source_caption:before{
1625       counter-increment:list;
1626       content: "リスト" counter(list) ": ";
1627   }
1628   
1629   li p.source_caption{
1630       margin-left:25px;
1631   }
1632   
1633   li li p.source_caption{
1634       margin-left:5px;
1635   }
1636   
1637   /* old style */
1638   p.prog_source:before{
1639       counter-increment:list;
1640       content: "リスト" counter(list) ": ";
1641   }
1642   
1643   /*----------------------------------------------------------------------- */
1644   /* result caption                                                         */
1645   /*----------------------------------------------------------------------- */
1646   p.result_caption{
1647       margin-top:20px;
1648       margin-left:35px;
1649       margin-bottom:-10px;
1650       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1651       font-size:100%;
1652       line-height:100%;
1653   }
1654   
1655   
1656   /*----------------------------------------------------------------------- */
1657   /* list caption                                                           */
1658   /*----------------------------------------------------------------------- */
1659   pre span.line_num{
1660       color:maroon;
1661       user-select:none;
1662       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1663       font-weight:normal;
1664       -webkit-user-select:none;
1665       -moz-user-select:none;
1666       -khtml-user-select:none;
1667       -webkit-user-drag:none;
1668       -khtml-user-drag:none;
1669   }
1670   
1671   pre span.program_comment{
1672       color:green;
1673       user-select:none;
1674       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1675       font-weight:normal;
1676       -webkit-user-select:none;
1677       -moz-user-select:none;
1678       -khtml-user-select:none;
1679       -webkit-user-drag:none;
1680       -khtml-user-drag:none;
1681   }
1682   
1683   
1684   /*----------------------------------------------------------------------- */
1685   /* general                                                                */
1686   /*----------------------------------------------------------------------- */
1687   pre.general_source{
1688     margin-top:20px;
1689     margin-left:60px;
1690     margin-bottom: 20px;
1691     padding: 10px 20px 10px;
1692     width:450px;
1693     border: 1px solid;
1694     background: #bbeeff;
1695     overflow-X:auto;
1696     overflow-Y:auto;
1697     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1698     font-size:90%;
1699     line-height:120%;
1700   }
1701   
1702   pre.general_source.mono_space{
1703       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1704       font-size:95%;
1705   }
1706   
1707   /*----------------------------------------------------------------------- */
1708   /* input_data                                                             */
1709   /*----------------------------------------------------------------------- */
1710   pre.input_data{
1711     margin-top:20px;
1712     margin-left:60px;
1713     margin-bottom: 20px;
1714     padding: 10px 20px 10px;
1715     width:450px;
1716     border: 1px solid;
1717     background: #003300;
1718     color: #ffffff;
1719     overflow-X:auto;
1720     overflow-Y:auto;
1721     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1722     font-size:80%;
1723     line-height:150%;
1724   }
1725   
1726   pre.input_data.mono_space{
1727       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1728       font-size:95%;
1729   }
1730   
1731   pre.input_data span.line_num{
1732       color:#9ACD32;
1733       user-select:none;
1734       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1735       font-weight:normal;
1736       -webkit-user-select:none;
1737       -moz-user-select:none;
1738       -khtml-user-select:none;
1739       -webkit-user-drag:none;
1740       -khtml-user-drag:none;
1741   }
1742   
1743   
1744   pre.input_data span.program_comment{
1745       color:#cc4500;
1746       user-select:none;
1747       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1748       font-weight:normal;
1749       -webkit-user-select:none;
1750       -moz-user-select:none;
1751       -khtml-user-select:none;
1752       -webkit-user-drag:none;
1753       -khtml-user-drag:none;
1754   }
1755   
1756   
1757   /*----------------------------------------------------------------------- */
1758   /* output_data                                                            */
1759   /*----------------------------------------------------------------------- */
1760   pre.output_data{
1761     margin-top:20px;
1762     margin-left:60px;
1763     margin-bottom: 20px;
1764     padding: 10px 20px 10px;
1765     width:450px;
1766     border: 1px solid;
1767     background: #ffcccc;
1768     overflow-X:auto;
1769     overflow-Y:auto;
1770     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1771     font-size:90%;
1772     line-height:120%;
1773   }
1774   
1775   pre.output_data.mono_space{
1776       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1777       font-size:95%;
1778   }
1779   
1780   /*----------------------------------------------------------------------- */
1781   /* html and php                                                           */
1782   /*----------------------------------------------------------------------- */
1783   
1784   pre.html_source{
1785       margin-top:20px;
1786       margin-left:60px;
1787       margin-bottom:10px;
1788       padding: 5px 20px 5px;
1789       width:450px;
1790       border: 1px solid;
1791       background: #bbeeff;
1792       overflow-X:auto;
1793       overflow-Y:auto;
1794       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1795       font-size:90%;
1796       line-height:120%;
1797   }
1798   
1799   pre.html_source.mono_space{
1800       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1801       font-size:95%;
1802   }
1803   
1804   /*--- クラス名 ----- */
1805   pre.html_source span.cn{
1806       color:purple;
1807   }
1808   
1809   /*--- 入力 ----- */
1810   pre.html_source span.in{
1811       color:crimson;
1812   }
1813   
1814   /*--- 実行結果 ----- */
1815   div.html_run{
1816     margin-top:20px;
1817     margin-left:60px;
1818     margin-bottom:20px;
1819     padding: 5px 20px 10px;
1820     border: 1px solid;
1821     background: #FFCCCC;
1822     width:600px;
1823     overflow-X:auto;
1824     overflow-Y:auto;
1825     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1826     font-size:90%;
1827     line-height:120%;
1828   }
1829   
1830   /*----------------------------------------------------------------------- */
1831   /* css                                                                    */
1832   /*----------------------------------------------------------------------- */
1833   
1834   td.main pre.css_source{
1835     margin-top:20px;
1836     margin-left:60px;
1837     margin-bottom: 20px;
1838     padding: 10px 20px 10px;
1839     width:450px;
1840     border: 1px solid;
1841     background: #bbeeff;
1842     overflow-X:auto;
1843     overflow-Y:auto;
1844     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1845     font-size:90%;
1846     line-height:120%;
1847   }
1848   
1849   td.main pre.css_source.mono_space{
1850       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1851       font-size:95%;
1852   }
1853   
1854   /*----------------------------------------------------------------------- */
1855   /* LaTeX                                                                  */
1856   /*----------------------------------------------------------------------- */
1857   
1858   pre.latex_source{
1859       width:400px;
1860       margin-top:20px;
1861       margin-left:60px;
1862       margin-bottom:10px;
1863       padding: 5px 20px 5px;
1864       border: 1px solid;
1865       background: #bbeeff;
1866       overflow-X:auto;
1867       overflow-Y:auto;
1868       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1869       font-size:90%;
1870       line-height:120%;
1871   }
1872   
1873   pre.latex_source.mono_space{
1874       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1875       font-size:95%;
1876   }
1877   
1878   
1879   li pre.latex_source{
1880       margin-left:40px;
1881   }
1882   
1883   li li pre.latex_source{
1884       margin-left:20px;
1885   }
1886   
1887   
1888   /*----------------------------------------------------------------------- */
1889   /* assembly                                                               */
1890   /*----------------------------------------------------------------------- */
1891   pre.assembly_source{
1892     margin-top:20px;
1893     margin-left:60px;
1894     margin-bottom: 20px;
1895     padding: 10px 20px 10px;
1896     width:450px;
1897     border: 1px solid;
1898     background: #bbeeff;
1899     overflow-X:auto;
1900     overflow-Y:auto;
1901     font-family:'Consolas', 'Inconsolata', monospace;
1902     font-weight:600;
1903     font-size:90%;
1904     line-height:120%;
1905   }
1906   
1907   /*----------------------------------------------------------------------- */
1908   /* perl                                                                   */
1909   /*----------------------------------------------------------------------- */
1910   pre.perl_source{
1911     margin-top:20px;
1912     margin-left:60px;
1913     margin-bottom: 20px;
1914     padding: 10px 20px 10px;
1915     width:450px;
1916     border: 1px solid;
1917     background: #bbeeff;
1918     overflow-X:auto;
1919     overflow-Y:auto;
1920     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1921     font-size:90%;
1922     line-height:120%;
1923   }
1924   
1925   pre.perl_source.mono_space{
1926       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1927       font-size:95%;
1928   }
1929   
1930   /*----------------------------------------------------------------------- */
1931   /* python                                                                 */
1932   /*----------------------------------------------------------------------- */
1933   pre.python_source{
1934     margin-top:20px;
1935     margin-left:60px;
1936     margin-bottom: 20px;
1937     padding: 10px 20px 10px;
1938     width:450px;
1939     border: 1px solid;
1940     background: #bbeeff;
1941     overflow-X:auto;
1942     overflow-Y:auto;
1943     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1944     font-size:90%;
1945     line-height:120%;
1946   }
1947   
1948   pre.python_source.mono_space{
1949       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1950       font-size:95%;
1951   }
1952   
1953   /*----------------------------------------------------------------------- */
1954   /* C                                                                      */
1955   /*----------------------------------------------------------------------- */
1956   pre.c_source{
1957     margin-top:20px;
1958     margin-left:60px;
1959     margin-bottom: 20px;
1960     padding: 10px 20px 10px;
1961     width:450px;
1962     border: 1px solid;
1963     background: #bbeeff;
1964     overflow-X:auto;
1965     overflow-Y:auto;
1966     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1967     font-size:90%;
1968     line-height:120%;
1969   }
1970   
1971   pre.c_source.mono_space{
1972       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1973       font-size:95%;
1974   }
1975   
1976   /*----------------------------------------------------------------------- */
1977   /* C++                                                                    */
1978   /*----------------------------------------------------------------------- */
1979   pre.cpp_source{
1980     margin-top:20px;
1981     margin-left:60px;
1982     margin-bottom: 20px;
1983     padding: 10px 20px 10px;
1984     width:450px;
1985     border: 1px solid;
1986     background: #bbeeff;
1987     overflow-X:auto;
1988     overflow-Y:auto;
1989     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
1990     font-size:90%;
1991     line-height:120%;
1992   }
1993   
1994   pre.cpp_source.mono_space{
1995       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
1996       font-size:95%;
1997   }
1998   
1999   /*----------------------------------------------------------------------- */
2000   /* JavaScript                                                             */
2001   /*----------------------------------------------------------------------- */
2002   pre.js_source{
2003     margin-top:20px;
2004     margin-left:60px;
2005     margin-bottom: 20px;
2006     padding: 10px 20px 10px;
2007     width:450px;
2008     border: 1px solid;
2009     background: #bbeeff;
2010     overflow-X:auto;
2011     overflow-Y:auto;
2012     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2013     font-size:90%;
2014     line-height:120%;
2015   }
2016   
2017   pre.js_source.mono_space{
2018       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2019       font-size:95%;
2020   }
2021   
2022   /*----------------------------------------------------------------------- */
2023   /* 説明用 <pre class="latex_source  code_explain">のように使う             */
2024   /*----------------------------------------------------------------------- */
2025   pre.code_explain{
2026       background: #e0e0e0;
2027       color: black;
2028   }
2029   
2030   pre.code_explain span.emphasize{ /* 強調 */
2031       color:red;
2032   }
2033   
2034   pre.code_explain span.emph{      /* 強調 */
2035       color:red;
2036   }
2037   
2038   pre.code_explain span.op{ /* オプション */
2039       color:royalblue;
2040   }
2041   
2042   pre.code_explain span.arg{  /* 引数 */
2043       color:darkviolet;
2044   }
2045   
2046   pre.code_explain span.value{  /* 値 */
2047       color:maroon;
2048   }
2049   
2050   pre.code_explain span.comment{  /* コメント */
2051       color:green;
2052   }
2053   
2054   /*----------------------------------------------------------------------- */
2055   /* プログラムのソースと実行結果を横に並べる                                 */
2056   /*----------------------------------------------------------------------- */
2057   table.source_result{
2058       table-layout:fixed;
2059       align:left;
2060       margin-top: 0px;
2061       margin-left: 60px;
2062       margin-bottom: 20px;
2063       padding: 0px 0px 0px;
2064       border-spacing:10px 0px;
2065       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2066   }
2067   
2068   table.source_result td.source_caption{
2069       margin-bottom:0px;
2070       text-align: left;
2071       vertical-align: top;
2072   }
2073   
2074   table.source_result td.source_caption{
2075       margin-bottom:0px;
2076       text-align: left;
2077       vertical-align: top;
2078   }
2079   
2080   td.source_caption:before{
2081       counter-increment:list;
2082       content: "リスト" counter(list) ": ";
2083   }
2084   
2085   table.source_result td{
2086       vertical-align:top;
2087       text-align: left;
2088   }
2089   
2090   table.source_result pre{
2091       vertical-align:top;
2092       text-align: left;
2093       margin-left:0px;
2094       margin-top:0px;
2095   }
2096   
2097   
2098   /*----------------------------------------------------------------------- */
2099   /* ソースコードのインライン表示                                             */
2100   /*----------------------------------------------------------------------- */
2101   code.inline{
2102       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2103       font-size:108%;
2104   }
2105   code.inline span.emphasize{ /* 強調 */
2106       color:red;
2107   }
2108   
2109   code.inline span.op{ /* オプション */
2110       color:royalblue;
2111   }
2112   
2113   code.inline span.arg{  /* 引数 */
2114       color:darkviolet;
2115   }
2116   
2117   code.inline span.value{  /* 値 */
2118       color:maroon;
2119   }
2120   
2121   code.inline span.comment{  /* コメント */
2122       color:green;
2123   }
2124   
2125   
2126   /*----------------------------------------------------------------------- */
2127   /* for old version                                                        */
2128   /*----------------------------------------------------------------------- */
2129   
2130   pre.source_code{
2131     margin-top:20px;
2132     margin-left:60px;
2133     margin-bottom: 20px;
2134     padding: 10px 20px 10px;
2135     width:450px;
2136     border: 1px solid;
2137     background: #bbeeff;
2138     overflow-X:auto;
2139     overflow-Y:auto;
2140     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2141     font-size:90%;
2142     line-height:120%;
2143   }
2144   
2145   
2146   pre.prog_run{
2147     margin-top:20px;
2148     margin-left:60px;
2149     margin-bottom:20px;
2150     padding: 5px 20px 10px;
2151     border: 1px solid;
2152     background: #FFCCCC;
2153     width:600px;
2154     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2155     font-size:90%;
2156     line-height:120%;
2157   }
2158   
2159   div.source{
2160     margin-top:5px;
2161     margin-left:60px;
2162     margin-bottom:20px;
2163     padding-top:0px;
2164     padding-left:20px;
2165     padding-bottom:0px;
2166     border: 1px solid;
2167     background: #BBEEFF;
2168     height:400px;
2169     width:600px;
2170     overflow-X:auto;
2171     overflow-Y:auto;
2172     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2173     font-size:90%;
2174     line-height:120%;
2175   }
2176   
2177   /* ###################################################################### */
2178   /* google code prettify                                                   */
2179   /* ###################################################################### */
2180   
2181   /* ====================================================================== */
2182   /* COLOR THEMES FOR GOOGLE CODE PRETTIFY                                  */
2183   /* ====================================================================== */
2184   /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
2185   pre.my_gcp{
2186       margin-left:60px;
2187       padding:10px;
2188       width:500px;
2189       height:250px;
2190       line-height:100%;
2191       overflow-X:auto;
2192       overflow-Y:auto;
2193   }
2194   
2195   .prettyprint{
2196     background: darkslategray;
2197     font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
2198     border: 0 !important;
2199     font-size: 10pt;
2200   }
2201   
2202   .pln{     /* Plain text */
2203     color: white;
2204   }
2205   
2206   /* Specify class=linenums on a pre to get line numbering */
2207   ol.linenums {
2208     margin-top: 0;
2209     margin-bottom: 0;
2210     color: #999999;
2211   }
2212   
2213   li.L0,
2214   li.L1,
2215   li.L2,
2216   li.L3,
2217   li.L4,
2218   li.L5,
2219   li.L6,
2220   li.L7,
2221   li.L8,
2222   li.L9{
2223     padding-left: 1em;
2224     background-color: darkslategray;
2225     list-style-type: decimal;
2226   }
2227   
2228   @media screen {
2229       .str{             /* string content */
2230       color: lightsalmon;
2231       }
2232   
2233       .kwd{             /* keyword color: lightskyblue;*/
2234       color: cyan;
2235       }
2236   
2237       .com {            /* comment */
2238       color: #ff7f24;
2239       }
2240   
2241       .typ {            /* type name */
2242       color: palegreen;
2243       }
2244   
2245       .lit {            /* literal value */
2246       color: white;
2247       }
2248   
2249       .pun {            /* punctuation */
2250       color: lightskyblue;
2251       }
2252   
2253       .opn {            /* lisp open bracket */
2254       color: #fff;
2255       }
2256   
2257       .clo {            /* lisp close bracket */
2258       color: #fff;
2259       }
2260   
2261       .tag {            /* markup tag name */
2262       color: #e6b422;
2263       }
2264   
2265       .atn {            /* markup attribute name */
2266       color: #ccff00;
2267       }
2268   
2269       .atv {            /* markup attribute value */
2270       color: #5f9ea0;
2271       }
2272   
2273       .dec {            /* declaration */
2274       color: darkgreen;
2275       }
2276   
2277       .var {            /* variable name */
2278       color: #ff7f00;
2279       }
2280   
2281       .fun {            /* function name */
2282       color: palegreen;
2283       }
2284   }
2285   
2286   
2287   
2288   
2289   /* ###################################################################### */
2290   /* File                                                                   */
2291   /* ###################################################################### */
2292   
2293   /* ====================================================================== */
2294   /* setting file (設定ファイル記述用)                                       */
2295   /* ====================================================================== */
2296   
2297   pre.comp_setting{
2298     margin-top:20px;
2299     margin-left:60px;
2300     margin-bottom: 20px;
2301     padding: 3px 6px 3px;
2302     width:450px;
2303     border: 1px solid;
2304     background: #f6f5f5;;
2305     overflow-X:auto;
2306     overflow-Y:auto;
2307     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2308     font-size:90%;
2309     line-height:120%;
2310   }
2311   
2312   pre.comp_setting.mono_space{
2313       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2314       font-size:95%;
2315   }
2316   
2317   pre.comp_setting span.input{
2318     color:crimson;
2319   }
2320   
2321   pre.comp_setting span.comment{
2322     color:orangered;
2323     font-style:italic;
2324   }
2325   
2326   pre.comp_setting span.emphasis{
2327     color:red;
2328   }
2329   
2330   pre.comp_setting span.emph{
2331     color:red;
2332   }
2333   
2334   /* ====================================================================== */
2335   /* コンピューターの処理結果のファイル                                       */
2336   /* ====================================================================== */
2337   
2338   pre.file_output{
2339     margin-top:20px;
2340     margin-left:60px;
2341     margin-bottom: 20px;
2342     padding: 3px 6px 3px;
2343     width:450px;
2344     border: 1px solid;
2345     background: #f6f6f6;;
2346     overflow-X:auto;
2347     overflow-Y:auto;
2348     font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2349     font-size:90%;
2350     line-height:120%;
2351   }
2352   
2353   pre.file_output.mono_space{
2354       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2355       font-size:95%;
2356   }
2357   
2358   
2359   pre.file_output span.comment{
2360     color:darkgreen;
2361     font-style:italic;
2362   }
2363   
2364   pre.file_output span.emphasis{
2365     color:red;
2366   }
2367   
2368   
2369   /* ###################################################################### */
2370   /* command                                                                */
2371   /* ###################################################################### */
2372   
2373   /* ====================================================================== */
2374   /* command on terminal (単独コマンド)                                     */
2375   /* ====================================================================== */
2376   pre.command{
2377       width:400px;
2378       margin-top:10px;
2379       margin-left:115px;
2380       margin-bottom:10px;
2381       padding: 5px 15px 5px 15px;
2382       background-color:black;
2383       color:white;
2384       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2385       font-size:90%;
2386       line-height:120%;
2387       overflow-X:auto;
2388   }
2389   
2390   pre.command.mono_space{
2391       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2392       font-size:100%;
2393   }
2394   
2395   pre.hoge{
2396       color:red;
2397   }
2398   
2399   td.main li pre.command{
2400       margin-left:40px;
2401   }
2402   
2403   td.main li li pre.command{
2404       margin-left:20px;
2405   }
2406   
2407   pre.command span.prompt{   /* プロンプトは緑色 */
2408       color:#00ff00;
2409   }
2410   
2411   pre.command span.sudo{     /* sudo は灰色 */
2412       color:#C0C0C0;
2413   }
2414   
2415   pre.command span.op{     /* オプションは紫色 */
2416       color:violet;
2417   }
2418   
2419   pre.command span.arg{   /* 引数は黄色 */
2420       color:yellow;
2421   }
2422   
2423   pre.command span.arg{   /* 引数は黄色 */
2424       color:yellow;
2425   }
2426   
2427   pre.command span.obj{   /* 目的語 */
2428       color:cyan;
2429   }
2430   
2431   pre.command span.obj2{   /* 目的語 */
2432       color:GreenYellow;
2433   }
2434   
2435   pre.command span.emph{   /* 強調 */
2436       color:red;
2437   }
2438   
2439   pre.command span.comment{    /* コメントは灰色 */
2440       color:#AFAFAF;
2441       font-style:italic;
2442   }
2443   
2444   pre.command span.comment:before{
2445       content:"\2002\2002";
2446   }
2447   
2448   
2449   
2450   
2451   /*----------------------------------------------------------------------- */
2452   /* inline command                                                         */
2453   /*----------------------------------------------------------------------- */
2454   
2455   span.inline_command{
2456       color:black;
2457       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2458       white-space:pre;
2459   }
2460   
2461   span.inline_command.mono_space{
2462       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2463       font-size:108%;
2464   }
2465   
2466   span.inline_command span.command{
2467       color:DarkMagenta;
2468   }
2469   
2470   span.inline_command span.op{
2471       /* color:dimgray; */
2472       color:crimson;
2473   }
2474   
2475   span.inline_command span.arg{
2476       color:crimson;
2477   }
2478   
2479   span.inline_command span.obj{   /* 目的語 */
2480       color:magenta;
2481   }
2482   
2483   span.inline_command span.emph{   /* 強調 */
2484       font-style:italic;
2485       color:red;
2486   }
2487   
2488   span.inline_command span.comment{    /* コメントは灰色 */
2489       color:darkgreen;
2490       font-style:italic;
2491   }
2492   
2493   span.inline_command span.comment:before{
2494       content:"\2002\2002";
2495   }
2496   
2497   
2498   /*------------------------------------ */
2499   /* obsolete                            */
2500   /*----------------------------------- */
2501   
2502   pre.unix_command{
2503       margin-top:5px;margin-left:60px;margin-bottom: 10px;
2504       padding: 5px 10px 10px;
2505       font-style:normal;
2506       font-weight:bold;
2507       color: darkgreen;
2508       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2509       font-size:90%;
2510       line-height:120%;
2511   }
2512   
2513   
2514   /*----------------------------------------------------------------------- */
2515   /* terminal output                                                        */
2516   /*----------------------------------------------------------------------- */
2517   
2518   pre.terminal_screen{
2519       margin-top:10px;
2520       margin-left:115px;
2521       margin-bottom:10px;
2522       padding: 5px 20px 5px;
2523       border:0px solid;
2524       background:#000000;
2525       color:#00ff00;
2526       width:600px;
2527       height:400px;
2528       overflow-X:auto;
2529       overflow-Y:auto;
2530       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2531       font-size:90%;
2532       line-height:120%;
2533   }
2534   
2535   pre.terminal_screen.mono_space{
2536       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2537       font-size:95%;
2538   }
2539   
2540   pre.terminal_screen.auto_wrap{
2541       word-break:break-all;
2542       white-space:pre-wrap;
2543       word-wrap:break-word;
2544       overflow:auto;
2545   }
2546   
2547   li pre.terminal_screen{
2548       margin-left:40px;
2549   }
2550   
2551   li li pre.terminal_screen{
2552       margin-left:20px;
2553   }
2554   
2555   pre.terminal_screen span.prompt{      /* プロンプトは緑色 */
2556       color:#00ff00;
2557   }
2558   
2559   pre.terminal_screen span.sudo{        /* sudo は灰色 */
2560       color:#C0C0C0;
2561   }
2562   
2563   pre.terminal_screen span.command{     /* コマンドは白色 */
2564       color:#ffffff;
2565   }
2566   
2567   pre.terminal_screen span.op{          /* オプションは水色 */
2568       color:violet;
2569   }
2570   
2571   pre.terminal_screen span.arg{         /* 引数は黄色 */
2572       color:#ffff00;
2573   }
2574   
2575   pre.terminal_screen span.obj{         /* 目的語はシアン */
2576       color:cyan;
2577   }
2578   
2579   pre.terminal_screen span.obj2{        /* 目的語2は黄緑 */
2580       color:GreenYellow;
2581   }
2582   
2583   pre.terminal_screen span.emph{        /* 強調は赤 */
2584       color:#ff0000;
2585   }
2586   
2587   pre.terminal_screen span.comment{     /* コメントはマジェンタ */
2588       color:magenta;
2589   }
2590   
2591   pre.terminal_screen .reverse{
2592       background:#00ff00;
2593       color:#000000;
2594   }
2595   
2596   /*----------------------------------------------------------------------- */
2597   /* command results                                                        */
2598   /*----------------------------------------------------------------------- */
2599   
2600   pre.command_result{
2601       margin-top:10px;
2602       margin-left:115px;
2603       margin-bottom:10px;
2604       padding: 5px 20px 5px;
2605       font-style:normal;
2606       font-weight:normal;
2607       border: 1px solid;
2608       color: black;
2609       width:600px;
2610       height:400px;
2611       overflow-X:auto;
2612       overflow-Y:auto;
2613       background:aliceblue;
2614       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2615       font-size:90%;
2616       line-height:120%;
2617   }
2618   
2619   pre.command_result.mono_space{
2620       font-family:Consolas, 'Courier New', Courier, Monaco, monospace;
2621       font-size:95%;
2622   }
2623   
2624   
2625   li pre.command_result{
2626       margin-left:40px;
2627   }
2628   
2629   li li pre.command_result{
2630       margin-left:20px;
2631   }
2632   
2633   pre.command_result span.comment{
2634       color:red;
2635   }
2636   
2637   pre.command_result span.comment:before{
2638       color:red;
2639       content:"コメント:\2002";
2640   }
2641   
2642   /*----------------------------------------------------------------------- */
2643   /* html results                                                           */
2644   /*----------------------------------------------------------------------- */
2645   
2646   div.html_result{
2647       margin-top:0px;
2648       margin-left:115px;
2649       margin-bottom:10px;
2650       padding: 0px 0px 0px 0px;
2651       font-style:normal;
2652       font-weight:normal;
2653       border: 1px solid;
2654       color: black;
2655       width:600px;
2656       height:auto;
2657       overflow-X:auto;
2658       overflow-Y:auto;
2659       background:aliceblue;
2660       font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック";
2661       font-size:90%;
2662       line-height:120%;
2663   }
2664   
2665   li div.html_result{
2666       margin-left:40px;
2667   }
2668   
2669   li li div.html_result{
2670       margin-left:20px;
2671   }
2672   
2673   div.html_result span.comment{
2674       color:red;
2675   }
2676   
2677   div.html_result span.comment:before{
2678       color:red;
2679       content:"コメント:\2002";
2680   }
2681   
2682   
2683   /* ====================================================================== */
2684   /* WEB Style                                                              */
2685   /* ====================================================================== */
2686   
2687   
2688   
2689   
2690   /* ==================================================================== */
2691   /*     講義ノート(latex2html)                                              */
2692   /* ==================================================================== */
2693   
2694   div.box h1{
2695       font-size:180%;
2696       line-height:150%;
2697   }
2698   
2699   
2700   /* ==================================================================== */
2701   /*    What's new                                                        */
2702   /* ==================================================================== */
2703   
2704   table.whats_new{
2705      border-spacing:0px 10px;
2706   }
2707   
2708   table.whats_new td{
2709      padding-bottom:20px;
2710   }
2711   
2712   
2713   /* ====================================================================== */
2714   /* jQuery                                                                 */
2715   /* ====================================================================== */
2716   
2717   /*---------------------------------------- */
2718   /* Treeview                                */
2719   /*---------------------------------------- */
2720   
2721   body table.side_main td.main ul.treeview li{
2722       margin-top:0px;
2723       margin-bottom:0px;
2724   }
2725   
2726   body table.side_main td.main ul.treeview-red li{
2727       margin-top:0px;
2728       margin-bottom:0px;
2729   }
2730   
2731   body table.side_main td.main ul.treeview-black li{
2732       margin-top:0px;
2733       margin-bottom:0px;
2734   }
2735   
2736   body table.side_main td.main ul.treeview-gray li{
2737       margin-top:0px;
2738       margin-bottom:0px;
2739   }
2740   
2741   body table.side_main td.main ul.treeview-famfamfam li{
2742       margin-top:0px;
2743       margin-bottom:0px;
2744   }
2745   
2746   body table.side_main td.main ul.filetree li{
2747       margin-top:0px;
2748       margin-bottom:0px;
2749   }
2750   
2751   
2752   /*---------------------------------------- */
2753   /* Lightbox のタイトル                     */
2754   /*---------------------------------------- */
2755   span.lightbox_title{
2756     line-height: 140%;
2757   }
2758   
2759   
2760   /* ==================================================================== */
2761   /*     フッターのスタイル                                                */
2762   /* ==================================================================== */
2763   
2764   div.footer p.last_update{
2765       padding-right:10pt;
2766       text-align:right;
2767       font-size:100%;
2768   }
2769   
2770   /* ==================================================================== */
2771   /* 部品のスタイル                                                */
2772   /* ==================================================================== */
2773   
2774   /*---------------------------------------- */
2775   /* ボタンのタイトル
2776   /*---------------------------------------- */
2777

メモ

ボックス

影をつける(box-shadow)

ボックスに影は，box-shadow を使います．基本的な指定は，以下の通りです．

box-shadow:offset-x offset-y blur-radius spread-radius color
: offset-x と offset-y は，影の長さ指定です．blur-radius はぼかし半径，spread-radiusは拡散半径で影を拡張するときに使います．colorは影の色指定です．具体的には，「box-shadow:8px 8px 10px 0px rgba(0,0,0,0.7);」のようにき記述します．

文法チェック

作成した CSS は，「W3C CSS 検証サービスのホーム」でチェックが可能です．作成した CSS ファイルのチェックを強く勧めます．

ページ作成情報

参考資料

セレクタについては，HTMLタグリファレンスのセレクタの種類を参考にしました．属性セレクタについては，オープン Web に関する共有知の属性セレクタのページを参考にしました．
display プロパティについては，CSS Display Module Level 3を参考にしました．
Flexbox については「Flexboxレイアウトまとめ」を参考にしました．
CSS で影をつける方法については，box-shadow - CSS | MDN を参考にしました．

更新履歴

2006年頃	ページの新規作成
2014年06月14日	セレクタについて記述