トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [0000028C]  <Date>: 2022/01/16 10:18:34
<Title>: CSSデモ/SideMenu012
<Name>: amanojaku@管理人



このコードは1つのGridレイアウトで構成されているので、フレキシブルにレイアウトを変更することが可能です。

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/SideMenu012.htm

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
  -->
  <title></title>
  <style>
    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Display_Block {
      display: block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Global_Container {
      display: grid;
      grid-template-columns: 2fr 1% auto 1fr;
      gap: 0;
    }

    .Main_Container {
      box-sizing: border-box;
      border: solid thin #000;
      grid-column: 1;
      grid-row: 1 / span 2147483647;
      height: 75vw;
    }

    .TabLabel {
      display: block;
      grid-column: 3;
      grid-row: span 1;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
      white-space: nowrap;
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .TabContent {
      display: none;
      grid-column: 4;
      grid-row: 1 / span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      height: 75vw;
    }

    .TabSwitch:checked+label {
      font-weight: bold;
      color: #767;
      /*#8f8 #7f7 #5fb*/
      background: #8f8;
    }

    .TabSwitch:checked+label+.TabContent {
      display: block;
    }

    .Global_Container>label:hover {
      font-weight: bold;
      color: #767;
      /*#bef #aef #ede*/
      background: #bef;
    }

    .TabSwitch:checked+.label:hover {
      font-weight: bold;
      color: #767;
      background: #bef;
    }

    .TabLabel_Residue {
      display: block;
      grid-column: 3;
      grid-row: span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
    }

    .Global_Container>input[type='radio'] {
      display: none;
    }

  </style>
</head>
<body class="Body_Container">
  <div class="Global_Container">
    <div class="Main_Container"></div>

    <input id='Tab-001-001' type='radio' name='Tab-001' class='TabSwitch' checked>
    <label class="TabLabel" for="Tab-001-001">
      いろはに
    </label>
    <div class="TabContent">
      いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <input id='Tab-001-002' type='radio' name='Tab-001' class='TabSwitch'>
    <label class="TabLabel" for="Tab-001-002">
      ほへと
    </label>
    <div class="TabContent">
      ほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <input id='Tab-001-003' type='radio' name='Tab-001' class='TabSwitch'>
    <label class="TabLabel" for="Tab-001-003">
      ちりぬるを
    </label>
    <div class="TabContent">
      ちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <div class="TabLabel_Residue"></div>
  </div>
</body>
</html>


<Number>: [000002AF]  <Date>: 2022/01/15 23:05:57
<Title>: CSSデモ/SideMenu031
<Name>: amanojaku@管理人



このコードは1つのGridレイアウトで構成されているので、フレキシブルにレイアウトを変更することが可能です。

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/SideMenu031.htm

改造する場合に注目する所は「Tab-ggg」、「Tab-ggg-sss」です。
「ggg」はグループ番号、「sss」はシリアル番号。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
  -->
  <title></title>
  <!--
!importantはもう使わない!CSSの優先順位をおさらいしよう
http://creator.aainc.co.jp/archives/4947
スタイルの優先順位
http://www.htmq.com/csskihon/007.shtml
要素型セレクタ(タイプセレクタ) …… 特定の要素にスタイルを適用する
http://www.htmq.com/selector/type.shtml
全称セレクタ(ユニバーサルセレクタ) …… すべての要素にスタイルを適用する
http://www.htmq.com/selector/universal.shtml
  -->
  <style>
    .Border {
      border: solid thin #000;
    }

    .Display_None {
      display: none;
    }

    .Display_InlineBlock {
      display: inline-block;
    }

    .Display_Block {
      display: block;
    }

    .Position_Relative {
      position: relative;
    }

    .Position_Absolute {
      position: absolute;
    }

    .WhiteSpace_Nowrap {
      white-space: nowrap;
    }

    .UserSelect_None {
      user-select: none;
    }

    .Visibility_Hidden {
      visibility: hidden;
    }

    .Stealth {
      /*CSS優先順位:10点*/
      display: none;
    }

    .Body_Container .Stealth {
      /*CSS優先順位:20点*/
      display: none;
    }

    .Global_Container {
      display: grid;
      grid-template-columns: 2fr 1% auto 1fr;
      gap: 0;
    }

    .Main_Container {
      box-sizing: border-box;
      border: solid thin #000;
      grid-column: 1;
      grid-row: 1 / span 2147483647;
      height: 75vw;
    }

    .TabLabel {
      display: block;
      grid-column: 3;
      grid-row: span 1;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
      white-space: nowrap;
      font-weight: bold;
      color: #fef;
      background: #0bb;
    }

    .TabContent {
      display: none;
      grid-column: 4;
      grid-row: 1 / span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      height: 75vw;
    }

    .TabSwitch:checked+label {
      font-weight: bold;
      color: #767;
      /*#8f8 #7f7 #5fb*/
      background: #8f8;
    }

    .TabSwitch:checked+label+.TabContent {
      display: block;
    }

    .Global_Container>label:hover {
      font-weight: bold;
      color: #767;
      /*#bef #aef #ede*/
      background: #bef;
    }

    .TabSwitch:checked+.label:hover {
      font-weight: bold;
      color: #767;
      background: #bef;
    }

    .TabLabel_Residue {
      display: block;
      grid-column: 3;
      grid-row: span 2147483647;
      box-sizing: border-box;
      border: solid thin #000;
      user-select: none;
    }

    .Global_Container>input[type='radio'] {
      display: none;
    }

  </style>
</head>
<body class="Body_Container">
  <div class="Global_Container">
    <div class="Main_Container"></div>

    <input id='Tab-001' type='radio' name='Tab-001' class='TabSwitch' checked>
    <label class="TabLabel Stealth" for="Tab-001"></label>
    <div class="TabContent"></div>

    <input id='Tab-001-001' type='radio' name='Tab-001' class='TabSwitch'>
    <label class="TabLabel" for="Tab-001-001">
      いろはに
    </label>
    <div class="TabContent">
      いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <input id='Tab-001-002' type='radio' name='Tab-001' class='TabSwitch'>
    <label class="TabLabel" for="Tab-001-002">
      ほへと
    </label>
    <div class="TabContent">
      ほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <input id='Tab-001-003' type='radio' name='Tab-001' class='TabSwitch'>
    <label class="TabLabel" for="Tab-001-003">
      ちりぬるを
    </label>
    <div class="TabContent">
      ちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす
    </div>

    <div class="TabLabel_Residue"></div>
  </div>
</body>
</html>

Block( Address 000002B9 Identity 0000028C )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.