HTML/CSS : テーブルのスクロール化と目次の作成(リンク)

今回からはHTML/CSSにおける応用についてまとめていきたいと思います!!(⌒∇⌒)

テーブル(th, tdのみをスクロール化)
目次の作成(リンク)

テーブル(th, tdのみをスクロール化)

==============================================

■ 以下のテーブルのthタグ, tdタグをスクロール化させてみましょう。

f:id:Varth-Connect:20200218153320j:plain — スクロール化追加前

　　↓

f:id:Varth-Connect:20200218154451j:plain — スクロール追加後

[ コード : HTML]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>テーブル(スクロール化)</title>
  </head>
  <body>  
    <table border="2" height="150px">
        <thead>
          <th>果物名</th>
          <th>購入日</th>
          <th>個数</th>        
        </thead>
          <tbody>
            <tr>
              <td>りんご</td>
              <td>2019/04/08</td>
              <td>4</td>
            </tr>
            <tr>
              <td>バナナ</td>
              <td>2019/05/08</td>
              <td>7</td>
            </tr>
            <tr>
              <td>キウイ</td>
              <td>2018/07/08</td>
              <td>5</td>
            </tr>
            <tr>
              <td>マンゴー</td>
              <td>2019/02/09</td>
              <td>10</td>
            </tr>
            <tr>
              <td>パイナップル</td>
              <td>2018/10/09</td>
              <td>2</td>
            </tr>
            <tr>
              <td>グレープ</td>
              <td>2019/03/09</td>
              <td>23</td>
            </tr>
            <tr>
              <td>モモ</td>
              <td>2019/01/09</td>
              <td>12</td>
            </tr>
          </tbody>
    </table>      
  </body> 
</html>

[ コード : CSS]

 thead, tbody {
    display: block;
 }
 tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 150px;
 }

==============================================

目次の作成(リンク)

==============================================

■ 目次の項目をクリックすると指定した場所に飛ぶようにしていきましょう。

[ 実行例 ]

f:id:Varth-Connect:20200218162402j:plain

　　↓

[ コード : HTML]

<div id="container">
  <h1>リンクテスト</h1>

  <h2 id="menu">目次一覧</h2>
    <ul style="border: 5px double green; width:20%; padding:10px;padding-left:20px;">
      <li><a href="#section1">変数</a></li>
      <li><a href="#section2">定数</a></li>
      <li><a href="#section3">コアモジュール定数</a></li>
    </ul>

  <h3 id="section1" style="background-color:lightyellow; width:100%;">変数</h3>
  <div style ="padding-left: 10px;border: 5px double red">
    <p>変数は値を一時的に保存したり、</p>
    <p>計算式などの処理を記述したりする際に使用する。</p>
    <p>変数は宣言文や型などの指定もなく手軽に使用可能。</p>
    <p>変数名は大文字と小文字を区別するので注意が必要。</p>
    <p>「代入」= 値を一つ入れることが出来る。</p>
    <p>式の処理内容が明確になる。</p>
    <p>値が決定していなくても処理のアルゴリズムを記述出来る。</p>
  </div>

  <h3 id="section2" style="background-color:lightyellow; width:100%;">定数</h3>
  <div style ="padding-left: 10px;border: 5px double red">
    <p>定数は値を一度決めたら変更することが出来ない。</p>
    <p>逆に言えば、後から変更してはいけない値を定数と指定する。</p>
    <p>定数は、constを使用して定義する。</p>
    <p>定数名は、変数と同じく大文字小文字を区別する。</p>
    <p>名前は慣例として全て大文字にする。</p>
    <p>constで定義した定数はプログラムコード全体のどこからでも</p>
    <p>参照できるグローバル定数です。</p>
  </div>

  <h3 id="section3" style="background-color:lightyellow; width:100%;">コアモジュール定数</h3>
  <div style ="padding-left: 10px;border: 5px double red">
    <p>PHP_VERSION_ID : 実行中のPHPのバージョンを整数値で表したもの</p>
    <p>PHP_EOL : 現在のOSの改行番号</p>
    <p>PHP_INT_MAX : 整数型の最大値</p>
    <p>PHP_INT_MIN : 整数型の最小値</p>
    <p>PHP_OS : 現在のOS</p>
    <p>TRUE : 論理値の真の値</p>
    <p>FALSE : 論理値の偽の値</p>
  </div>
  <br>
  <br>
  
  <span style="color:lightblue; font-size:25px;margin-left:25px;">
  --------------------------------------------------------
  </span>
  <br>
  <br>

  <p><a href="#menu">目次に戻る</a></p>

</div>
</body>
</html>

[ コード : CSS]

body {
  background-color: #ffffff;
  color: #2b2b2b;
  font-size: 100%;
}

a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: red; }
a:active { color: #ff8000; }


#container {
  padding-bottom: 600px;
}

h3 {
  margin-top: 100px;
}

==============================================

これにて、
今回の内容は、以上になりますが
皆さんの今後のプログラミング学習の励みになればと思います。

次回は、CSS関数の利用について、まとめさせて頂きたいと思っています。