template06｜真空

夢からさめても呼吸はつづく

XX.XX.XX …log

about

ここは非公式サイトです。などサイトの説明文。
等サイトはリンクフリーです。
url：https://xxx.xxx.jp
master：〇〇

yume

長編
長編タイトル / 〇〇

短編
短編タイトル / 〇〇
短編タイトル / 〇〇
短編タイトル / 〇〇

link

item
長編タイトル / 短編タイトル / 短編タイトル / 短編タイトル

information & source

シンプルなタブ機能を使ったテンプレートです。scriptを使用しています。
シリーズ系の小説用ページにもおすすめです。

source

金魚の素材はSILHOUETTE DESIGN様の【金魚のシルエット素材その１】からお借りしました。カラーコードは#151515です。ご使用の際はシルエットデザイン様からDLをお願いいたします。
トップの言葉はエナメル様からお借りしました。

.jsファイルを含むzipファイル　download
下記HTMLを使う場合はダウンロード不要です。

CSS
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap'); *{margin: 0; padding: 0;} html { min-height: 100%; } body { color: #000; font-size: 12px; font-family: "Shippori Mincho", serif; letter-spacing: 0.2em; line-height: 2em; height: 100%; background-color: #a90a0a; } article{ width:85%; max-width: 750px; margin:100px auto; } a{ color: #000000; } a:hover{ color: #ffffff; text-decoration: none; } header{ width: 600px; margin: 0 auto; text-align: center; } h1{ transform: rotate(-30deg); font-size: 20px; } h2{ font-size: 16px; text-align: center; } /*tabの形状*/ ul{ display: flex; flex-wrap: wrap; list-style: none; justify-content: center; } li a{ display: block; background:transparent; margin:60px 10px; color: #000; text-decoration: none; } li a:hover{ color: #fff; } /*liにactiveクラスがついた時*/ li.active a{ background: transparent; color: #ffffff; } /*エリアの表示非表示と形状*/ .area { display: none; opacity: 0; background: transparent; padding:30px 20px; } /*areaにis-activeというクラスがついた時の形状*/ .area.is-active { display: block; animation-name: displayAnime; animation-duration: 2s; animation-fill-mode: forwards; } .ttl { font-size: 16px; color: #fff; padding: 0 5px; line-height: 1; text-align: center; margin: 15px auto; } .con{ text-align: left; padding: 20px; } .new{ font-size: 10px; text-align: center; padding: 30px auto; } footer{ font-size: 10px; text-align: center; margin: 50px auto; } /* 装飾 */ hr { height: 0; margin: 0 auto; padding: 0; border: 0; width: 200px; border-top: 1px solid #000; } mark{ background-color: #151515; color: #fff; padding: 0.3em; } textarea{ border: solid 1px #151515 ; } input{ background-color: transparent; color: #000; font-size: 12px; border: solid 1px #151515; } @keyframes displayAnime{ from { opacity: 0; } to { opacity: 1; } } /* 780px以下のレスポンシブ対応 */ @media (max-width: 780px) { header { width: 90%; margin-top: 78px; } h1{ font-size: 18px; margin-bottom: 50px; } ul { display: flex; margin: 0 auto; } li { margin: 10px; text-align: center; } li a { margin: 0; } article { width: 90%; margin: 0 auto; } hr { width: 200px; margin: 20px auto 0 auto; } .ttl, .new, footer { text-align: center; } .con { text-align: left; padding: 20px 0; } }
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> サイト名 </title> <link rel="stylesheet" href="style.css"> </head> <body> <article> <header> <h1><a href="temp04.html">画像や文字</h1>  <ul> <li><a href="#info">information</a></li> <li><a href="#contents">contents</a></li> <li><a href="#link">link</a></li> </ul> </header> <hr> <div id="default" class="area is-active"> <div class="ttl">サイト名</div> <p class="new">XX.XX.XX <a href="#">…log</a></p> </div> <div id="info" class="area"> <div class="ttl">タイトル</div> <p class="con">中身</p> </div> <div id="contents" class="area"> <div class="ttl">タイトル</div> <p class="con">中身</p> </div> <div id="link" class="area"> <div class="ttl">タイトル</div> <p class="con">中身</p> </div>  <footer>template by <a href="#">真空</a></footer> </article> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // タブがクリックされたときの動作 $('ul li a').click(function(e) { e.preventDefault(); // デフォルトのリンク動作を無効化 // 全てのareaを非表示にし、activeクラスを削除 $('.area').removeClass('is-active'); $('li').removeClass('active'); // クリックされたタブに関連する内容を表示し、タブをactiveにする var target = $(this).attr('href'); // href属性からターゲットIDを取得 $(target).addClass('is-active'); // 対応するエリアにis-activeクラスを追加 $(this).parent().addClass('active'); // クリックされたタブをactiveにする // 「タブを選択してください」のメッセージを非表示にする $('#default').removeClass('is-active'); }); }); //タブをクリックしたら $('.tab a').on('click', function() { var idName = $(this).attr('href'); //タブ内のリンク名を取得 GethashID (idName);//設定したタブの読み込みと return false;//aタグを無効にする }); // 上記の動きをページが読み込まれたらすぐに動かす $(window).on('load', function () { $('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加 $('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加 var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得 GethashID (hashName);//設定したタブの読み込み }); </script> </body> </html>