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

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。

Index Menu
(2)<FirstTitle>:Javaデモ/グラフィック「Figure」(1) オブジェクト指向プログラミング <LastTitle>:Javaデモ/Swingグラフィック「Thread、Figure」(2) オブジェクト指向プログラミング (1)<FirstTitle>:Javaデモ/CUI対戦デモ(10) オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人 (4)<FirstTitle>:JavaScriptデモ/FieldRoll 011 オブジェクト指向プログラミング <LastTitle>:JavaScriptデモ/FieldRoll 016 オブジェクト指向プログラミング (1)<FirstTitle>:【備忘録】VisualStudio Code/「インデント整形、設定パネル、ターミナル操作、文字ザイズ変更」 <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:Webページにおける基本的な留意点 <LastTitle>:Webページにおける基本的な注意点(3) (2)<FirstTitle>:Chromeモバイル・エミュレーターの操作法 <LastTitle>:モバイル・エミュレーター用のフォント・サイズ自動調整用「CSS、JavaScript」 (1)<FirstTitle>:SEO(Search Engine Optimization:検索エンジン最適化) <FirstUser>:amanojaku@管理人

   
   

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











<Number>: [00000471]  <Date>: 2021/12/24 12:16:52
<Title>: CSSデモ/タブ リンク使用(2)
<Name>: amanojaku@管理人

下記のデモではURLにアンカーリンク(ページ内リンク)「#TAB-001-001UNIT、#TAB-001-002UNIT、#TAB-001-003UNIT」を付与する事で、そのタブを開く事が出来ます。

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

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

TAB-001-001UNIT
http://xd305417.html.xdomain.jp/demo/CSSTabLink002.htm#TAB-001-001UNIT

TAB-001-002UNIT
http://xd305417.html.xdomain.jp/demo/CSSTabLink002.htm#TAB-001-002UNIT

TAB-001-003UNIT
http://xd305417.html.xdomain.jp/demo/CSSTabLink002.htm#TAB-001-003UNIT


<html>
  <head>
    <meta charset='UTF-8'>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <TITLE>test</TITLE>
    <style type='text/css'>
    <!--
.tab-container {
  display: flex;
  flex-wrap: wrap;
}
.tab-link {
  text-decoration: none;
  font-weight: bold;
  color: #fef;
  background: #0bb;
  margin: 0.1em 0.3em 0.1em 0em;
  padding: 0.2em 1em;
  order: -1;
}
.tab-container > a:target {
  font-weight: bold;
  color: #767;
  background: #0f7;
}
.tab-container > .tab-content {
  display: none;
}
.tab-container > a:target + .tab-content {
  display: block;
}
.tab-content {
  width: 100%;
}
.tab-link:hover {
  font-weight: bold;
  color: #767;
  background: #0ee;
}
    -->
    </style>
  </head>
  <body>
<div class='tab-container'>
  <a id='TAB-001-001UNIT' class='tab-link' href='#TAB-001-001UNIT'>001-001UNIT</a>
  <div class='tab-content'>
いろはにほへと ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
  </div>
  <a id='TAB-001-002UNIT' class='tab-link' href='#TAB-001-002UNIT'>001-002UNIT</a>
  <div class='tab-content'>
ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
  </div>
  <a id='TAB-001-003UNIT' class='tab-link' href='#TAB-001-003UNIT'>001-003UNIT</a>
  <div class='tab-content'>
つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
  </div>
</div>
  </body>
</html>


<Number>: [0000057F]  <Date>: 2022/01/24 23:05:55
<Title>: CSSデモ/タブ リンク使用 003
<Name>: amanojaku@管理人

下記のデモではURLにアンカーリンク(ページ内リンク)「#Tab-001-001、#Tab-001-002、#Tab-001-003」を付与する事で、そのタブを開く事が出来ます。
(Tabがページの先頭で無い場合)ページの末尾に「Dummy_Tail(height: 100vh)」のような要素が無いと、ページの末尾に近い所にページ内ジャンプできないので注意して下さい。

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

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

Tab-001-001
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-001

Tab-001-002
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-002

Tab-001-003
http://xd305417.html.xdomain.jp/demo/CSSTabLink003.htm#Tab-001-003


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

    .TabLink {
      text-decoration: none;
      font-weight: bold;
      color: #fef;
      background: #0bb;
      margin: 0.1em 0.3em 0.1em 0em;
      padding: 0.2em 1em;
      order: -1;
    }

    .Tab_Container>a:target {
      font-weight: bold;
      color: #767;
      background: #0f7;
    }

    .Tab_Container>.TabContent {
      display: none;
    }

    .Tab_Container>a:target+.TabContent {
      display: block;
    }

    .TabContent {
      width: 100%;
    }

    .TabLink:hover {
      font-weight: bold;
      color: #767;
      background: #0ee;
    }

    .Dummy_Tail {
      height: 100vh;
    }

  </style>
</head>
<body>
  <div class="Tab_Container">
    <a id="Tab-001-001" class="TabLink" href="#Tab-001-001">Tab-001-001</a>
    <div class="TabContent">
      いろはにほへと ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>
    <a id="Tab-001-002" class="TabLink" href="#Tab-001-002">Tab-001-002</a>
    <div class="TabContent">
      ちりぬるをわかよたれそ つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>
    <a id="Tab-001-003" class="TabLink" href="#Tab-001-003">Tab-001-003</a>
    <div class="TabContent">
      つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせす<br>
    </div>
  </div>
  <br>
  <footer>【Footer】</footer>
  <div class="Dummy_Tail"></div>
</body>
</html>

Block( Address 0000057F Identity 00000470 )










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

   
   

管理者用 Password:

  




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