WEBページ作成方法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>

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

CSSの書き方

基本

コメント

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

セレクタ

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

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

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

ボックス表示形式 (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-inside>

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

リスト項目 <display-listitem>

内部 <display-internal>

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

ボックス <display-box>

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

遺物 <display-legacy>

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

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

メモ

ボックス

影をつける(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 ファイルのチェックを強く勧めます．

ページ作成情報

参考資料

更新履歴

last update:2018/04/30 14:36:18