Chromeに便乗してダークテーマ化

表を中央に配置
その他細かいデザイン変更
スマホ用レイアウトの文字の大きさを変更
フッターの場所を変更

diff --git a/page/customize.html b/page/customize.html
index de53941..2ffc422 100644 (file)
--- a/page/customize.html
+++ b/page/customize.html
@@ -125,193 +125,195 @@
       <p>
         重くはなりますが、複数のデスクトップ環境を搭載することもできます
       </p>
-      <table>
-        <thead>
-          <tr>
-            <th>デスクトップ環境</th>
-            <th>標準ディストリビューション</th>
-            <th>特徴</th>
-            <th>重さ</th>
-          </tr>
-        </thead>
-        <tbody>
-
-
-          <tr>
-            <th>
-              Gnome3
-            </th>
-            <td label="標準ディストリビューション">
-                Ubuntu
-            </td>
-            <td label="特徴">
-              <p>
-                操作が独特
+      <div class="table">
+        <table>
+          <thead>
+            <tr>
+              <th>デスクトップ環境</th>
+              <th>標準ディストリビューション</th>
+              <th>特徴</th>
+              <th>重さ</th>
+            </tr>
+          </thead>
+          <tbody>
+
+
+            <tr>
+              <th>
+                Gnome3
+              </th>
+              <td label="標準ディストリビューション">
+                  Ubuntu
+              </td>
+              <td label="特徴">
+                <p>
+                  操作が独特
+                  <br>
+                  洗練されている
+                </p>
+              </td>
+              <td label="重さ">
+                  やや重い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                Xfce4
+              </th>
+              <td label="標準ディストリビューション">
+                  Xubuntu
+              </td>
+              <td label="特徴">
+                <p>
+                  標準のパネル設定はMac風になっている
+                  <br>
+                  細かいカスタマイズが可能
+                  <br>
+                  標準のテーマ、アイコンがダサい
+                </p>
+              </td>
+              <td label="重さ">
+                  軽い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                KDE
+              </th>
+              <td label="標準ディストリビューション">
+                Kubuntu
+              </td>
+              <td label="特徴">
+                <p>
+                  非常に高機能で、美しいUI
+                  <br>
+                  比較的カスタマイズしにくい
+                </p>
+              </td>
+              <td label="重さ">
+                最も重い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                Lxde
+              </th>
+              <td label="標準ディストリビューション">
+                Lubuntu
                 <br>
-                洗練されている
-              </p>
-            </td>
-            <td label="重さ">
+                Basix
+              </td>
+              <td label="特徴">
+                <p>
+                  Windows風のUI
+                  <br>
+                  ものすごく軽量
+                  <br>
+                  標準のテーマ、アイコンが汚い
+                </p>
+              </td>
+              <td label="重さ">
+                最も軽い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                Lxqt
+              </th>
+              <td label="標準ディストリビューション">
+                ---
+              </td>
+              <td label="特徴">
+                <p>
+                  Lxdeと非常に似ている
+                  <br>
+                  細かいカスタマイズが可能
+                  <br>
+                  標準のテーマ、アイコンがダサい
+                </p>
+              </td>
+              <td label="重さ">
+                最も軽い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                Unity
+              </th>
+              <td label="標準ディストリビューション">
+                  Ubuntu（17.10まで）
+              </td>
+              <td label="特徴">
+                <p>
+                  Ubuntu版のGnomeと似たUI
+                  <br>
+                  殆どカスタマイズできない
+                  <br>
+                  今後サポートされるか不明
+                </p>
+              </td>
+              <td label="重さ">
+                最も重い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                Cinnamon
+              </th>
+              <td label="標準ディストリビューション">
+                ---
+              </td>
+              <td label="特徴">
+                <p>
+                  Windows風のUI
+                  <br>
+                  あまりカスタマイズできない
+                  <br>
+                  高機能で美しい
+                </p>
+              </td>
+              <td label="重さ">
                 やや重い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              Xfce4
-            </th>
-            <td label="標準ディストリビューション">
-                Xubuntu
-            </td>
-            <td label="特徴">
-              <p>
-                標準のパネル設定はMac風になっている
-                <br>
-                細かいカスタマイズが可能
-                <br>
-                標準のテーマ、アイコンがダサい
-              </p>
-            </td>
-            <td label="重さ">
-                軽い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              KDE
-            </th>
-            <td label="標準ディストリビューション">
-              Kubuntu
-            </td>
-            <td label="特徴">
-              <p>
-                非常に高機能で、美しいUI
-                <br>
-                比較的カスタマイズしにくい
-              </p>
-            </td>
-            <td label="重さ">
-              最も重い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              Lxde
-            </th>
-            <td label="標準ディストリビューション">
-              Lubuntu
-              <br>
-              Basix
-            </td>
-            <td label="特徴">
-              <p>
-                 Windows風のUI
-                <br>
-                ものすごく軽量
-                <br>
-                標準のテーマ、アイコンが汚い
-              </p>
-            </td>
-            <td label="重さ">
-              最も軽い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              Lxqt
-            </th>
-            <td label="標準ディストリビューション">
-              ---
-            </td>
-            <td label="特徴">
-              <p>
-                Lxdeと非常に似ている
-                <br>
-                細かいカスタマイズが可能
-                <br>
-                標準のテーマ、アイコンがダサい
-              </p>
-            </td>
-            <td label="重さ">
-              最も軽い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-               Unity
-            </th>
-            <td label="標準ディストリビューション">
-                Ubuntu（17.10まで）
-            </td>
-            <td label="特徴">
-              <p>
-                Ubuntu版のGnomeと似たUI
-                <br>
-                殆どカスタマイズできない
-                <br>
-                今後サポートされるか不明
-              </p>
-            </td>
-            <td label="重さ">
-              最も重い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              Cinnamon
-            </th>
-            <td label="標準ディストリビューション">
-              ---
-            </td>
-            <td label="特徴">
-              <p>
-                Windows風のUI
-                <br>
-                あまりカスタマイズできない
-                <br>
-                高機能で美しい
-              </p>
-            </td>
-            <td label="重さ">
-              やや重い
-            </td>
-          </tr>
-
-          <tr>
-            <th>
-              Mate
-            </th>
-            <td label="標準ディストリビューション">
-              Ubuntu Mate
-            </td>
-            <td label="特徴">
-              <p>
-                Windows風のUI
-                <br>
-                Gnome2（Ubuntu 10.10までのUI）からフォーク
-                <br>
-                シンプル
-              </p>
-            </td>
-            <td label="重さ">
-              やや軽い
-            </td>
-          </tr>
-
-          
-        </tbody>
-      </table>
+              </td>
+            </tr>
+
+            <tr>
+              <th>
+                Mate
+              </th>
+              <td label="標準ディストリビューション">
+                Ubuntu Mate
+              </td>
+              <td label="特徴">
+                <p>
+                  Windows風のUI
+                  <br>
+                  Gnome2（Ubuntu 10.10までのUI）からフォーク
+                  <br>
+                  シンプル
+                </p>
+              </td>
+              <td label="重さ">
+                やや軽い
+              </td>
+            </tr>
+
+            
+          </tbody>
+        </table>
+      </div>
 
       <p>
         おすすめはXfce4です
@@ -337,100 +339,102 @@
       <p>
         以下の様なものがあります
       </p>
-      <table>
-        <thead>
-          <tr>
-            <th>ディスプレイマネージャ</th>
-            <th>標準ディストリビューション</th>
-            <th>特徴</th>
-            <th>重さ</th>
-          </tr>
-        </thead>
-        <tbody>
-
-
-          <tr>
-            <th>
-              GDM3
-            </th>
-            <td label="標準ディストリビューション">
-                Ubuntu
-            </td>
-            <td label="特徴">
-              <p>
-                Gnomeのディスプレイマネージャ
-                <br>
-                洗練されており、美しいUI
-                <br>
-                カスタマイズしにくい
-              </p>
-            </td>
-            <td label="重さ">
-              やや重い
-            </td>
-          </tr>
-
-
-          <tr>
-            <th>
-              LightDM
-            </th>
-            <td label="標準ディストリビューション">
-                Xubuntu、Lubuntu、Ubuntu（17.10まで）
-            </td>
-            <td label="特徴">
-              <p>
-                非常に軽い
-                <br>
-                カスタマイズが可能
-                <br>
-                標準のテーマ、アイコンがダサい
-              </p>
-            </td>
-            <td label="重さ">
-              軽い
-            </td>
-          </tr>
-
-          <tr>
-            <th>
-              KDM
-            </th>
-            <td label="標準ディストリビューション">
-                Kubuntu
-            </td>
-            <td label="特徴">
-              <p>
-                リッチなUI
-                <br>
-                KDEのディスプレイマネージャ
-              </p>
-            </td>
-            <td label="重さ">
-              ---
-            </td>
-          </tr>
-
-          <tr>
-            <th>
-              SDDM
-            </th>
-            <td label="標準ディストリビューション">
-              Lxqt
-            </td>
-            <td label="特徴">
-              <p>
-                Qtのみで書かれている
-              </p>
-            </td>
-            <td label="重さ">
-              ---
-            </td>
-          </tr>
-
-          
-        </tbody>
-      </table>
+      <div class="table">
+        <table>
+          <thead>
+            <tr>
+              <th>ディスプレイマネージャ</th>
+              <th>標準ディストリビューション</th>
+              <th>特徴</th>
+              <th>重さ</th>
+            </tr>
+          </thead>
+          <tbody>
+
+
+            <tr>
+              <th>
+                GDM3
+              </th>
+              <td label="標準ディストリビューション">
+                  Ubuntu
+              </td>
+              <td label="特徴">
+                <p>
+                  Gnomeのディスプレイマネージャ
+                  <br>
+                  洗練されており、美しいUI
+                  <br>
+                  カスタマイズしにくい
+                </p>
+              </td>
+              <td label="重さ">
+                やや重い
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                LightDM
+              </th>
+              <td label="標準ディストリビューション">
+                  Xubuntu、Lubuntu、Ubuntu（17.10まで）
+              </td>
+              <td label="特徴">
+                <p>
+                  非常に軽い
+                  <br>
+                  カスタマイズが可能
+                  <br>
+                  標準のテーマ、アイコンがダサい
+                </p>
+              </td>
+              <td label="重さ">
+                軽い
+              </td>
+            </tr>
+
+            <tr>
+              <th>
+                KDM
+              </th>
+              <td label="標準ディストリビューション">
+                  Kubuntu
+              </td>
+              <td label="特徴">
+                <p>
+                  リッチなUI
+                  <br>
+                  KDEのディスプレイマネージャ
+                </p>
+              </td>
+              <td label="重さ">
+                ---
+              </td>
+            </tr>
+
+            <tr>
+              <th>
+                SDDM
+              </th>
+              <td label="標準ディストリビューション">
+                Lxqt
+              </td>
+              <td label="特徴">
+                <p>
+                  Qtのみで書かれている
+                </p>
+              </td>
+              <td label="重さ">
+                ---
+              </td>
+            </tr>
+
+            
+          </tbody>
+        </table>
+      </div>
 
       <p>
         今回は最も一般的なLightDMを使用していきます

diff --git a/page/history.html b/page/history.html
index e9f818c..65052a2 100644 (file)
--- a/page/history.html
+++ b/page/history.html
@@ -26,6 +26,21 @@
     <p>
       <ul>
         <li>
+          Chromeに便乗してダークテーマ化
+        </li>
+        <li>
+          表を中央に配置
+        </li>
+        <li>
+          その他細かいデザイン変更
+        </li>
+        <li>
+          スマホ用レイアウトの文字の大きさを変更
+        </li>
+        <li>
+          フッターの場所を変更
+        </li>
+        <li>
           SereneTeamのリポジトリに関する情報を追加
         </li>
         <li>

diff --git a/style/main-resp.css b/style/main-resp.css
index f900ffd..23c6157 100644 (file)
--- a/style/main-resp.css
+++ b/style/main-resp.css
@@ -23,17 +23,13 @@ ul.topnav li a:hover:not(.active) {
 ul.topnav li a.active {
        background-color: #1B73BA;
 }
-ul.topnav li.right {
-       float: right;
-}
-@media screen and (max-width: 799px) {
-       ul.topnav li.right, ul.topnav li {
-               float: none;
-       }
+
+ul.topnav li.right, ul.topnav li {
+       float: none;
 }
 nav {
   
-  margin-bottom: 5%;
+  margin-bottom: 3%;
   border-top: solid 5px #1B73BA;
   /*border-bottom: solid 5px #1B73BA;*/
   margin-left: -1%;
@@ -42,14 +38,14 @@ nav {
 
 /*見出し系*/
 h2 {
-  background: #F8F8F8;
+  background: #1d1d1d;
   border-top: 2px solid #1B73BA;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
   box-sizing: border-box;
   color: #1B73BA;
-  font-size: 110%;
+  font-size: 160%;
   font-weight: bold;
   margin: 0 0 20px;
   padding: 10px 15px 10px;
@@ -64,7 +60,7 @@ h1 {
   */
   margin-left: 0%;
   margin-right: 0%;
-  font-size: 110%;
+  font-size: 160%;
 }
 h3 {
   border-bottom: 2px solid #1B73BA;
@@ -88,8 +84,13 @@ code {
 }
 
 /* 背景 */
+html {
+  background-color: #191919;
+}
+
 body {
-  background-color: #fff;
+  background-color: #191919;
+  color: #fff;
 }
 
 
@@ -100,7 +101,7 @@ ul li {
 
 /*フッター*/
 footer{
-  background-color: gray;
+  background-color: #191919;
   margin-left: -1%;
   margin-right: -1%;
 }
@@ -109,6 +110,8 @@ footer{
 img {
   max-width: 60%;
   height: auto;
+  margin-bottom: -9%;
+  margin-top: 2%;
 }
 
 pre {
@@ -127,7 +130,7 @@ pre {
 
 /*本文フォントサイズ*/
 p {
-  font-size: 80%;
+  font-size: 110%;
 }
 
 /*テーブル*/
@@ -141,10 +144,10 @@ td, th {
   text-align: center;
 }
 thead tr {
-  background-color: #1B73BA;
+  background-color: #191919;
 }
 thead tr th {
-  color: #fff;
+  color: #1B73BA;
   text-align: center;
 }
 tfoot {
@@ -154,5 +157,25 @@ tbody tr th {
   font-weight: bold;
 }
 tbody tr:nth-of-type(2n) {
-  background: #f5f5f5;
+  background: #191919;
+}
+
+.table {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+
+/*リンク*/
+a {
+  text-decoration:none;
+  color: #6EDEFF;
+}
+a:hover {
+  text-decoration:underline;
+}
+
+a:visited {
+  text-decoration:none;
+  color: #6EDEFF;
 }
\ No newline at end of file

diff --git a/style/main.css b/style/main.css
index fa611d0..3b56796 100644 (file)
--- a/style/main.css
+++ b/style/main.css
@@ -26,14 +26,9 @@ ul.topnav li a.active {
 ul.topnav li.right {
        float: right;
 }
-@media screen and (max-width: 799px) {
-       ul.topnav li.right, ul.topnav li {
-               float: none;
-       }
-}
 nav {
   
-  margin-bottom: 7%;
+  margin-bottom: 4%;
   border-top: solid 5px #1B73BA;
   /*border-bottom: solid 5px #1B73BA;*/
   margin-left: -4%;
@@ -42,7 +37,7 @@ nav {
 
 /*見出し系*/
 h2 {
-  background: #F8F8F8;
+  background: #1d1d1d;
   border-top: 2px solid #1B73BA;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;
@@ -89,15 +84,16 @@ code {
 
 /* 背景 */
 html {
-  background-color: #f0f0f0;
+  background-color: #191919;
 }
 
 body {
-  background-color: #fff;
+  background-color: #111111;
   margin-left: 10%;
   margin-right: 10%;
   padding: 3% 3%;
   height: 100%;
+  color: #fff;
 }
 
 
@@ -108,9 +104,11 @@ ul li {
 
 /*フッター*/
 footer{
-  background-color: gray;
+  background-color: #191919;
   margin-left: -4%;
   margin-right: -4%;
+  margin-bottom: -9%;
+  margin-top: 2%;
 }
 
 /*画像サイズ調整*/
@@ -144,10 +142,10 @@ td, th {
   text-align: center;
 }
 thead tr {
-  background-color: #1B73BA;
+  background-color: #191919;
 }
 thead tr th {
-  color: #fff;
+  color: #1B73BA;
   text-align: center;
 }
 tfoot {
@@ -157,5 +155,24 @@ tbody tr th {
   font-weight: bold;
 }
 tbody tr:nth-of-type(2n) {
-  background: #f5f5f5;
+  background: #191919;
+}
+
+.table {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+/*リンク*/
+a {
+  text-decoration:none;
+  color: #6EDEFF;
+}
+a:hover {
+  text-decoration:underline;
+}
+
+a:visited {
+  text-decoration:none;
+  color: #6EDEFF;
 }
\ No newline at end of file