pikesaku’s blog

個人的な勉強メモです。記載内容について一切の責任は持ちません。

CSS勉強メモ(迷走中)

参考URL

li要素・liタグとは - タグHTML
→タグ毎にインラインorブロック要素か記載あり。

CSS マージンと余白
→margin、border、paddingの記述あり

margin、paddingの初期化:CSS入門
→margin、paddingはブラウザ毎に初期値が異なる。明示的に初期化する方法の説明あり。

【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー
→positionプロパティについて説明が分かりやすい

CSSで要素を横に並べる主な3つのやり方(ブラウザ対応表のおまけつき) - Qiita
→横並び方法の説明あり。ブロック要素なら、floatでOK。インライン要素なら、displayでinline-boxにしちゃう。

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】 - いつ俺〜いつから俺ができないと錯覚していた?〜
スタイルシートの記述方法が分かりやすい

2カラムレイアウト作成

少しづつCSSを追加して、効果を見る。


第一弾

ベースはこれ

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>
    <div id="top"></div>
    <div id="side"></div>
    <div id="main"></div>
  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-Color: skyblue;
    }
    #side {
      background-Color: aliceblue;
    }
    #main {
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814154722p:plain

コメント

真っ白け
div(ブロック要素)の幅指定もない為、背景色の効果もなし


第二弾

top、side、mainに幅を指定する。sideにfloatを付ける

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>
    <div id="top"></div>
    <div id="side"></div>
    <div id="main"></div>
  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      float: left;
    }
    #main {
      height: 100%; width: 100%;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814161701p:plain

コメント

ブロック要素に幅・高さを指定したが、sideにfloat: left指定してもmainがうまく表示されない。。。。


第三弾

position指定をする。

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>
    <div id="top"></div>
    <div id="side"></div>
    <div id="main"></div>
  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      float: left;
      position: fixed; top: 100px; left: 0px;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814162355p:plain

コメント

それっぽくなる
positionでfixedで指定。fixedの場合は、ウィンドウを基準とした絶対位置で指定する。
floatいらないかも。。。
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー


第四弾

float取ってみる。

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>
    <div id="top"></div>
    <div id="side"></div>
    <div id="main"></div>
  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814162734p:plain

コメント

floatなしでも表示は変わらず。


第五弾

各divボックスに収まりきらないインラインデータを入れた時

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 10);
      </script>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814165905p:plain

コメント

スクロールバーが出てこない。。。。
overflow-スタイルシートリファレンス
overflow: autoで出るようになるみたい


第六弾

overflow: autoを入れてみる。

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 10);
      </script>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814171051p:plain

コメント

topとsideにスクロールバーが付いた。
mainにはつかない。けど上下キーでスクロール効果はあり。


★疑問★
mainとsideでは一番下までスクロールしても全てインラインデータが表示されていない。
93まで。これは今度詳しい人に聞いてみる。


第七弾

タブを付ける。

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 10);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: absolute; bottom: 0px; left: 250px;
      list-style-type: none;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814172512p:plain

コメント

top_tabはulタグでボックス要素。
positionはabsoluteで指定する。
absoluteの場合、
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー

では、以下の記載があり。

static以外を指定された親要素を基準とした絶対位置
親要素がstaticの場合にabsoluteを指定するとfixedと同じ挙動になりますが、まず使うことはありませんので、親要素には必ずrelativeを指定することになります。

親要素は、top(div)でpositionはfixed。
親要素のbottom: 0はtopとside・mainの境目
親要素のleft: 250は画面左から右に250pxいったところ。

リストの横並びは、次のステップでやる。
postionにabsolute以外を指定した場合の動作を見てみる。


第八段弾

top_tabをrelativeで指定した場合

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 10);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: relative; bottom: 0px; left: 250px;
      list-style-type: none;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814173800p:plain

コメント

変な事になった。これはどういう動きだろう。

relativeの場合は、以下URLによると
【CSS】意外と難しい「position」の使い方を詳しく解説してみた - アイデアハッカー

通常の位置を基準とした相対位置

staticを指定した場合は、通常の位置(top、left等で詳細位置を指定できない)
relativeはstatic指定時の位置からtop、left等で相対位置を指定できる。

この「通常の位置」とは?表示画面のulタグの表示位置を確認すると、、、、
開始位置を縦でみると、top9の次の行から表示されている
開始位置を横でみると、left: 250の位置から表示されている

上記より、縦の開始位置については、、、、、

親要素(top)の内、前に定義されているデータ(pタグ)の出力された後の位置がbottom: 0
→topの一番下(height: 100)ではない。

のように見える。

ためしに、bottomをtopに変更してみるとどうなるか??


第九弾

bottomをtopに変更してみる

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 10);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: relative; top: 0px; left: 250px;
      list-style-type: none;
    }
  </style>

</html>
表示画面

f:id:pikesaku:20160814181000p:plain

コメント

変わらない。。。。
この「通常の開始位置」ってのがよく分からない。。。。

positionプロパティで位置を調節(1) | CSS中級編

上記URLのサンプルがすっごい分かりやすい!ありがとうございます!!!
スクロールされると分かりづらい。またbottom、topの指定値が0だと違いが分かりづらい。


第十弾

pタグは1行だけにして、top_tabのpositonは以下3パターンで試す。
①position: relative;
②position: relative; top: 10px;*/
③position: relative; bottom: 10px;*/

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 1);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: relative;
/*      position: relative; top: 10px;*/
/*      position: relative; bottom: 10px;*/
      list-style-type: none;
      border: 0.5px solid;
    }
  </style>
</html>
表示画面

①の場合(top/bottom指定なし)
f:id:pikesaku:20160814191325p:plain
②の場合(top10px指定あり)
f:id:pikesaku:20160814191430p:plain
③の場合(bottom10px指定あり)
f:id:pikesaku:20160814191552p:plain

コメント

relativeでtop・bottom指定しない場合=staticと同じ。
→基準位置は、前定義されたタグの直後(今回の場合、pタグ)が開始位置

この開始位置を基準にして、、、
top:10pxの場合、開始位置を10px分下に下げる。
bottom:10pxの場合、開始位置を10px分上に上げる。(終了位置を10px上げる?)

上記より以下3パターンは同じ表示になる。
top: 0px
bottom: 0px
top/bottom定義なし

absoluteの場合も同様に見てみる。


第十弾

pタグは1行だけにして、top_tabのpositonは以下3パターンで試す。
①position: absolute; left: 250px;
②position: absolute; top: 10px; left: 250px;
③position: absolute; bottom: 10px; left: 250px;

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 1);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
      overflow: auto;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: absolute; left: 250px;
/*      position: absolute; top: 0px; left: 250px; */
/*      position: absolute; bottom: 0px; left: 250px; */
      list-style-type: none;
      border: 0.5px solid;
    }
  </style>
</html>
表示画面

①の場合(top/bottom指定なし)
f:id:pikesaku:20160814193907p:plain
②の場合(top0px指定あり)
f:id:pikesaku:20160814193951p:plain
③の場合(bottom0px指定あり)
f:id:pikesaku:20160814194102p:plain

コメント

基準位置の考え方が、absoluteとrelativeで全然違う。
absoluteの方が直感的な感じがする。

第十一弾

top_tabはabsolute指定にする
ulタグをタブっぽくする

ソース
<!-- コメント-->
<!doctype html>
 
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="pikesaku"> 
    <meta name="keywords" content="python study"> 
    <meta name="description" content="pike web">
    <meta name="robots" content="all">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>pike web site</title>
  </head>

  <body>

    <script type="text/javascript">
      function op_il_data(part, num) {
        for (var i = 0; i < num; i++) {
          document.write("<p>" + part + String(i) +"</p>");
        }
      }
    </script>

    <div id="top">
      <script type="text/javascript">
        op_il_data("top", 1);
      </script>
      <ul id="top_tab">
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
        <li><a href="#page3">Page 3</a></li>
      </ul>
    </div>

    <div id="side">
      <script type="text/javascript">
        op_il_data("side", 100);
      </script>
    </div>

    <div id="main">
      <script type="text/javascript">
        op_il_data("main", 100);
      </script>
    </div>

  </body>

  <style>
    * {
      margin: 0; padding: 0; border: 0px none;
    }
    #top {
      background-color: skyblue;
      height: 100px; width: 100%;
      position: fixed; top: 0px; left: 0px;
    }
    #side {
      background-color: aliceblue;
      height: 100%; width: 250px;
      position: fixed; top: 100px; left: 0px;
      overflow: auto;
    }
    #main {
      height: 100%; width: 100%;
      position: fixed; top: 100px; left: 250px;
      overflow: auto;
    }
    #top_tab {
      position: absolute; bottom: 0px; left: 250px;
      list-style-type: none;
      height: auto; width: auto;
    }
    #top_tab li {
      float: left;
      height: auto; width: auto;
    }
    #top_tab li a {
      display: block;
      height: auto; width: 150px;
      text-align: center;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: blue;
      padding: 5px;
      margin: 1px;
    }
  </style>
</html>
表示画面

f:id:pikesaku:20160814201915p:plain

コメント

タグはリンクさせるため、aタグを利用。aタグはインライン要素
タブの範囲をリンク範囲にするため、aタグをdisplayプロパティでblockに変更する。
あとタブっぽく見せるため、微調整。


第十二弾

今日は疲れた。。。。。。ひとまずここまで。
最終的にはタブをクリックするとsideとmainが変わるページにしたい。
結局positionプロパティの動作把握で1日終わってしまった。。。。
PythonでWebアプリ作るため勉強が、Pythonの前のHTML/CSS/JavaScript勉強の範囲から抜け出せない。。。。
まあ、ぼちぼち頑張ろう。次くらいから、javaScriptの勉強に入れそう。

ソース

表示画面
コメント