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

メモ

ボックス

影をつける(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