タイムラインを設置したい。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
下記のタイムラインのどちらかをウェブサイトで利用したいと思っています。
第1希望 https://codepen.io/seomoneyaff/pen/KQZYjo
第2希望 https://codepen.io/P233/pen/lGewF
左側に表示される「HTML」を丸ごとコピーして該当ページの<body></body>の間に入れて、
右側に表示される「JS」を丸ごとコピーして</body>の直前に<script></script>で挟んで入れました。
cssは別ファイルにしてhtmlファイルと同じ階層に保存しています。
でも、プレビュー画面で見ると、第1希望のタイムライン、第2希望のタイムライン、どちらも「HTML」に表示されている年表データの文字の羅列だけになっていて、デザインは反映されていません。
ウェブサイト全体のデザインを指定するスタイルシートが既にあるため、
<link rel="stylesheet" href="/test.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css" media="screen">
とhtmlファイルに入力し、上の「test.css」が今回反映させたいタイムラインのcssで、下のstyle.cssはウェブサイト全体のデザインなので、既に反映されています。
私が利用したいタイムラインはそのままコピーするだけではなく、何か手を加えないと動かないのでしょうか？
第1希望 https://codepen.io/seomoneyaff/pen/KQZYjo
第2希望 https://codepen.io/P233/pen/lGewF
左側に表示される「HTML」を丸ごとコピーして該当ページの<body></body>の間に入れて、
右側に表示される「JS」を丸ごとコピーして</body>の直前に<script></script>で挟んで入れました。
cssは別ファイルにしてhtmlファイルと同じ階層に保存しています。
でも、プレビュー画面で見ると、第1希望のタイムライン、第2希望のタイムライン、どちらも「HTML」に表示されている年表データの文字の羅列だけになっていて、デザインは反映されていません。
ウェブサイト全体のデザインを指定するスタイルシートが既にあるため、
<link rel="stylesheet" href="/test.css" type="text/css">
<link rel="stylesheet" href="../style.css" type="text/css" media="screen">
とhtmlファイルに入力し、上の「test.css」が今回反映させたいタイムラインのcssで、下のstyle.cssはウェブサイト全体のデザインなので、既に反映されています。
私が利用したいタイムラインはそのままコピーするだけではなく、何か手を加えないと動かないのでしょうか？
初心者 さん
10月12日 17時40分
初心者さん、こんにちは。
例えば第1希望のURLは、
HTML(Pug)
CSS(SCSS)
JS(Babel)
と表示されていると思います。
これらはそのままコピーしただけでは使えません。
それぞれ、Pug, SCSS, Babelのコードであり、HTML, CSS, JSへコンパイル（変換）する元となるものだからです。
そのままコピペしてご自身のウェブサイト内で使うなら、適宜コンパイルする必要があります。
自分でコンパイルしても良いですが、CodePenでもコンパイル後のコードを取得できます。
具体的には、HTML(Pug)の右にある▽をクリックして、「View Compiled HTML」をクリックすれば、コンパイル後の、コピペ利用できるHTMLになります。
同様に、CSS（SCSS）は、「View Compiled CSS」
JS(Babel)は、「View Compiled JS」
で、コピペで使えるコードになります。
例えば第1希望のURLは、
HTML(Pug)
CSS(SCSS)
JS(Babel)
と表示されていると思います。
これらはそのままコピーしただけでは使えません。
それぞれ、Pug, SCSS, Babelのコードであり、HTML, CSS, JSへコンパイル（変換）する元となるものだからです。
そのままコピペしてご自身のウェブサイト内で使うなら、適宜コンパイルする必要があります。
自分でコンパイルしても良いですが、CodePenでもコンパイル後のコードを取得できます。
具体的には、HTML(Pug)の右にある▽をクリックして、「View Compiled HTML」をクリックすれば、コンパイル後の、コピペ利用できるHTMLになります。
同様に、CSS（SCSS）は、「View Compiled CSS」
JS(Babel)は、「View Compiled JS」
で、コピペで使えるコードになります。
馬場誠 さん
10月13日 09時38分
馬場様、ご回答ありがとうございました。
使いたいサイトの右上の方にある「Change View」というボタンから、html、css、jsをそれぞれ選んで出てきたページをコピーしていたので、▽で出てくるページでコンパイルしたものを貼ってみたのですが、うまくいきません…。
今回、使おうと思っているウェブサイトのテンプレートが
https://f-tpl.com/tpl_043/
なので、このSubpage.htmlに貼っています。
第一希望のものを全て貼るととても長くなってしまうので、タイムラインの内2年分だけ貼りましたが、全て貼るとページの上から下まで年号が突き抜けていて、年号を選択すると選択された年号だけ色が変わるところも全く反映されていません…。
今回はウェブサイトのデザインがテンプレートのcssで指定されていることと、実際に使いたいページではindex.htmlとは階層が違うことから、タイムラインのcssはmember.cssというファイル名にしています。
また、第2希望の方はJSが無い分、もしかしたら簡単なのではと思い、同じページのコピーで試しているのですが、こちらは文字の羅列とラジオボタンの表示だけになってしまい、第1希望のものよりもできていない状況です。
何かが違うからだと解っているのですが、自分で解明できないので、誤りを教えて頂ければ幸いです。
よろしくお願いいたします。
【HTMLとJS】
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="ホームページサンプル株式会社 | ホームページサンプル株式会社では最新技術と自然との調和を目指します。">
<meta name="keywords" content="">
<title>ホームページサンプル株式会社 | ホームページサンプル株式会社では最新技術と自然との調和を目指します。</title>
<link rel="stylesheet" href="member.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<!-- ヘッダー -->
<div id="header">
<div class="inner">
<h1>ホームページサンプル株式会社のサイトです</h1>
<!-- ロゴ -->
<div class="logo">
<a href="index.html">Company Name<br><span>Your Company Slogan</span></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel">電話: <strong>012-3456-7890</strong></p>
<p>受付時間: 平日 AM 10:00 ・PM 5:00</p>5
</div>
<!-- / 電話番号+受付時間 -->
<!-- トップナビゲーション -->
<ul id="topnav">
<li class="active"><a href="index.html">トップページ<br><span>Top</span></a></li>
<li><a href="subpage.html">ごあいさつ<br><span>Greeting</span></a></li>
<li><a href="subpage.html">サービス概要<br><span>Service</span></a></li>
<li><a href="subpage.html">弊社の取り組み<br><span>Approach</span></a></li>
<li><a href="subpage.html">会社情報<br><span>Company</span></a></li>
<li><a href="subpage.html">お問い合わせ<br><span>Contact</span></a></li>
</ul>
<!-- トップナビゲーション -->
</div>
</div>
<!-- / ヘッダー -->
<!-- メイン画像 -->
<div id="mainBanner" class="subImg">
<div class="inner">
<img src="images/mainImg2.jpg" width="940" height="300" alt="">
<div class="slogan">
<h2>自然との調和を目指す企業です</h2>
<h3>革新的な技術で世の中を動かす企業を目指します。</h3>
</div>
</div>
</div>
<!-- / メイン画像 -->
<div id="wrapper">
<!-- コンテンツ -->
<section id="main">
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article class="timeline">
<nav class="timeline__nav">
<ul>
<li><span>1993</span></li>
<li><span>1994</span></li>
</ul>
</nav>
<section class="timeline__section">
<div class="wrapper">
<h2 class="milestone">1993</h2>
<p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
<h2 class="milestone">1994</h2>
<p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
</div>
</section>
</article>
</section>
</section>
<!-- / コンテンツ -->
<aside id="sub">
<section class="grid">
<h3>ホームページサンプル</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>革新的な技術</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>ホームページサンプル</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>革新的な技術</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
</aside>
</div>
<!-- / WRAPPER -->
<!-- フッター -->
<div id="footer">
<div class="inner">
<!-- 3カラム -->
<section class="gridWrapper">
<article class="grid">
<!-- ロゴ -->
<p class="logo"><a href="index.html">Company Name<br><span>Your Company Slogan</span></a></p>
<!-- / ロゴ -->
</article>
<article class="grid col3">
<ul>
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<p>Copyright(c) 2012 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a></p>
</article>
</section>
<!-- / 3カラム -->
</div>
</div>
<!-- / フッター -->
<script>$(() => {
let stickyTop = 0,
scrollTarget = false;
let timeline = $('.timeline__nav'),
items = $('li', timeline),
milestones = $('.timeline__section .milestone'),
offsetTop = parseInt(timeline.css('top'));
const TIMELINE_VALUES = {
start: 190,
step: 30 };
$(window).resize(function () {
timeline.removeClass('fixed');
stickyTop = timeline.offset().top - offsetTop;
$(window).trigger('scroll');
}).trigger('resize');
$(window).scroll(function () {
if ($(window).scrollTop() > stickyTop) {
timeline.addClass('fixed');
} else {
timeline.removeClass('fixed');
}
}).trigger('scroll');
items.find('span').click(function () {
let li = $(this).parent(),
index = li.index(),
milestone = milestones.eq(index);
if (!li.hasClass('active') && milestone.length) {
scrollTarget = index;
let scrollTargetTop = milestone.offset().top - 80;
$('html, body').animate({ scrollTop: scrollTargetTop }, {
duration: 400,
complete: function complete() {
scrollTarget = false;
} });
}
});
$(window).scroll(function () {
let viewLine = $(window).scrollTop() + $(window).height() / 3,
active = -1;
if (scrollTarget === false) {
milestones.each(function () {
if ($(this).offset().top - viewLine > 0) {
return false;
}
active++;
});
} else {
active = scrollTarget;
}
timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');
items.filter('.active').removeClass('active');
items.eq(active != -1 ? active : 0).addClass('active');
}).trigger('scroll');
});
</script>
</body>
</html>
【CSS】
@import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic");
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-family: 'Exo 2', sans-serif;
line-height: 1.5;
}
.wrapper {
margin: 0 auto;
padding: 0 16.66% 50px;
width: 100%;
}
article {
position: relative;
max-width: 980px;
margin: 0 auto;
}
.timeline__nav {
position: fixed;
z-index: 99;
top: 0;
transition: top .3s ease-out;
}
.timeline__nav ul {
list-style: none;
list-style-position: inside;
margin: 15px 0;
}
.timeline__nav ul li {
margin: 15px 0;
padding-left: 0;
list-style-type: none;
color: #bfc1c3;
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all .3s ease-out;
}
.timeline__nav ul li.active {
font-weight: bold;
color: #f94125;
border-bottom: 1px dotted transparent;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.timeline__nav ul li:hover {
color: #000;
}
使いたいサイトの右上の方にある「Change View」というボタンから、html、css、jsをそれぞれ選んで出てきたページをコピーしていたので、▽で出てくるページでコンパイルしたものを貼ってみたのですが、うまくいきません…。
今回、使おうと思っているウェブサイトのテンプレートが
https://f-tpl.com/tpl_043/
なので、このSubpage.htmlに貼っています。
第一希望のものを全て貼るととても長くなってしまうので、タイムラインの内2年分だけ貼りましたが、全て貼るとページの上から下まで年号が突き抜けていて、年号を選択すると選択された年号だけ色が変わるところも全く反映されていません…。
今回はウェブサイトのデザインがテンプレートのcssで指定されていることと、実際に使いたいページではindex.htmlとは階層が違うことから、タイムラインのcssはmember.cssというファイル名にしています。
また、第2希望の方はJSが無い分、もしかしたら簡単なのではと思い、同じページのコピーで試しているのですが、こちらは文字の羅列とラジオボタンの表示だけになってしまい、第1希望のものよりもできていない状況です。
何かが違うからだと解っているのですが、自分で解明できないので、誤りを教えて頂ければ幸いです。
よろしくお願いいたします。
【HTMLとJS】
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="ホームページサンプル株式会社 | ホームページサンプル株式会社では最新技術と自然との調和を目指します。">
<meta name="keywords" content="">
<title>ホームページサンプル株式会社 | ホームページサンプル株式会社では最新技術と自然との調和を目指します。</title>
<link rel="stylesheet" href="member.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<!-- ヘッダー -->
<div id="header">
<div class="inner">
<h1>ホームページサンプル株式会社のサイトです</h1>
<!-- ロゴ -->
<div class="logo">
<a href="index.html">Company Name<br><span>Your Company Slogan</span></a>
</div>
<!-- / ロゴ -->
<!-- 電話番号+受付時間 -->
<div class="info">
<p class="tel">電話: <strong>012-3456-7890</strong></p>
<p>受付時間: 平日 AM 10:00 ・PM 5:00</p>5
</div>
<!-- / 電話番号+受付時間 -->
<!-- トップナビゲーション -->
<ul id="topnav">
<li class="active"><a href="index.html">トップページ<br><span>Top</span></a></li>
<li><a href="subpage.html">ごあいさつ<br><span>Greeting</span></a></li>
<li><a href="subpage.html">サービス概要<br><span>Service</span></a></li>
<li><a href="subpage.html">弊社の取り組み<br><span>Approach</span></a></li>
<li><a href="subpage.html">会社情報<br><span>Company</span></a></li>
<li><a href="subpage.html">お問い合わせ<br><span>Contact</span></a></li>
</ul>
<!-- トップナビゲーション -->
</div>
</div>
<!-- / ヘッダー -->
<!-- メイン画像 -->
<div id="mainBanner" class="subImg">
<div class="inner">
<img src="images/mainImg2.jpg" width="940" height="300" alt="">
<div class="slogan">
<h2>自然との調和を目指す企業です</h2>
<h3>革新的な技術で世の中を動かす企業を目指します。</h3>
</div>
</div>
</div>
<!-- / メイン画像 -->
<div id="wrapper">
<!-- コンテンツ -->
<section id="main">
<section class="content">
<h3 class="heading">ホームページサンプル株式会社の取り組み</h3>
<article class="timeline">
<nav class="timeline__nav">
<ul>
<li><span>1993</span></li>
<li><span>1994</span></li>
</ul>
</nav>
<section class="timeline__section">
<div class="wrapper">
<h2 class="milestone">1993</h2>
<p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
<h2 class="milestone">1994</h2>
<p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
</div>
</section>
</article>
</section>
</section>
<!-- / コンテンツ -->
<aside id="sub">
<section class="grid">
<h3>ホームページサンプル</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>革新的な技術</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>ホームページサンプル</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
<section class="grid">
<h3>革新的な技術</h3>
<ul>
<li><a href="subpage.html">環境への取り組みについての説明ページです</a></li>
<li><a href="subpage.html">ecoキャンペーン開催中です</a></li>
<li><a href="subpage.html">オフィスの移転に関して</a></li>
<li><a href="subpage.html">最新商品のご紹介</a></li>
<li><a href="subpage.html">新規サービスを開始しました</a></li>
<li><a href="subpage.html">環境賞受賞に関してはこちらをご確認ください</a></li>
</ul>
</section>
</aside>
</div>
<!-- / WRAPPER -->
<!-- フッター -->
<div id="footer">
<div class="inner">
<!-- 3カラム -->
<section class="gridWrapper">
<article class="grid">
<!-- ロゴ -->
<p class="logo"><a href="index.html">Company Name<br><span>Your Company Slogan</span></a></p>
<!-- / ロゴ -->
</article>
<article class="grid col3">
<ul>
<li><a href="subpage.html">eco・環境事業</a></li>
<li><a href="subpage.html">コンピュータ</a></li>
<li><a href="subpage.html">飲食店事業</a></li>
<li><a href="subpage.html">ごあいさつ</a></li>
<li><a href="subpage.html">サービス概要</a></li>
<li><a href="subpage.html">会社情報</a></li>
<li><a href="subpage.html">お問い合わせ</a></li>
<li><a href="subpage.html">サイトマップ</a></li>
</ul>
<p>Copyright(c) 2012 Sample Inc. All Rights Reserved. Design by <a href="http://f-tpl.com" target="_blank" rel="nofollow">http://f-tpl.com</a></p>
</article>
</section>
<!-- / 3カラム -->
</div>
</div>
<!-- / フッター -->
<script>$(() => {
let stickyTop = 0,
scrollTarget = false;
let timeline = $('.timeline__nav'),
items = $('li', timeline),
milestones = $('.timeline__section .milestone'),
offsetTop = parseInt(timeline.css('top'));
const TIMELINE_VALUES = {
start: 190,
step: 30 };
$(window).resize(function () {
timeline.removeClass('fixed');
stickyTop = timeline.offset().top - offsetTop;
$(window).trigger('scroll');
}).trigger('resize');
$(window).scroll(function () {
if ($(window).scrollTop() > stickyTop) {
timeline.addClass('fixed');
} else {
timeline.removeClass('fixed');
}
}).trigger('scroll');
items.find('span').click(function () {
let li = $(this).parent(),
index = li.index(),
milestone = milestones.eq(index);
if (!li.hasClass('active') && milestone.length) {
scrollTarget = index;
let scrollTargetTop = milestone.offset().top - 80;
$('html, body').animate({ scrollTop: scrollTargetTop }, {
duration: 400,
complete: function complete() {
scrollTarget = false;
} });
}
});
$(window).scroll(function () {
let viewLine = $(window).scrollTop() + $(window).height() / 3,
active = -1;
if (scrollTarget === false) {
milestones.each(function () {
if ($(this).offset().top - viewLine > 0) {
return false;
}
active++;
});
} else {
active = scrollTarget;
}
timeline.css('top', -1 * active * TIMELINE_VALUES.step + TIMELINE_VALUES.start + 'px');
items.filter('.active').removeClass('active');
items.eq(active != -1 ? active : 0).addClass('active');
}).trigger('scroll');
});
</script>
</body>
</html>
【CSS】
@import url("https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic");
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-family: 'Exo 2', sans-serif;
line-height: 1.5;
}
.wrapper {
margin: 0 auto;
padding: 0 16.66% 50px;
width: 100%;
}
article {
position: relative;
max-width: 980px;
margin: 0 auto;
}
.timeline__nav {
position: fixed;
z-index: 99;
top: 0;
transition: top .3s ease-out;
}
.timeline__nav ul {
list-style: none;
list-style-position: inside;
margin: 15px 0;
}
.timeline__nav ul li {
margin: 15px 0;
padding-left: 0;
list-style-type: none;
color: #bfc1c3;
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: all .3s ease-out;
}
.timeline__nav ul li.active {
font-weight: bold;
color: #f94125;
border-bottom: 1px dotted transparent;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.timeline__nav ul li:hover {
color: #000;
}
初心者 さん
10月13日 10時26分
初心者さん
失礼しました。でしたらそれでもOKです。
ご提示いただいたコード（HTML/JS）の中に、CSSを<style>～</style>内に貼り付けただけではおっしゃるように動きませんでした。
jQueryがいるみたいなので、最初の<script>～</script>の直前に、以下を記載したら動作しました。
※ご自身でダウンロードしたjQueryでももちろん大丈夫です。
あとの見栄えの調整は、適宜CSSで行えば良いかなと思います。
> 「Change View」というボタンから、html、css、jsをそれぞれ選んで出てきたページをコピーしていたので、
失礼しました。でしたらそれでもOKです。
ご提示いただいたコード（HTML/JS）の中に、CSSを<style>～</style>内に貼り付けただけではおっしゃるように動きませんでした。
jQueryがいるみたいなので、最初の<script>～</script>の直前に、以下を記載したら動作しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
※ご自身でダウンロードしたjQueryでももちろん大丈夫です。
あとの見栄えの調整は、適宜CSSで行えば良いかなと思います。
馬場誠 さん
10月13日 13時49分
馬場様、ありがとうございました。
jQueryを追加したところ動きました。こういうところが自分では思いつかなかったのでありがとうございます。
ところで、今回は現時点で昭和21年以降のタイムラインにしたいのですが、年数を増やすと、クリックした年号とは別の年号が赤くなり（例 昭和22年をクリックすると昭和26年が赤くなる）、1番下は私の環境では平成23年までしか選択できない（平成24年～令和元年は画面に入りきらない）のですが、これは修正不可能でしょうか…？
当初、第1候補のものを3ヵ所で使う予定だったのですが、3ヵ所中2ヵ所は第2候補の方になりそうなので、第2候補の方でも改めてご相談させて頂ければ幸いです。
よろしくお願いいたします。
jQueryを追加したところ動きました。こういうところが自分では思いつかなかったのでありがとうございます。
ところで、今回は現時点で昭和21年以降のタイムラインにしたいのですが、年数を増やすと、クリックした年号とは別の年号が赤くなり（例 昭和22年をクリックすると昭和26年が赤くなる）、1番下は私の環境では平成23年までしか選択できない（平成24年～令和元年は画面に入りきらない）のですが、これは修正不可能でしょうか…？
当初、第1候補のものを3ヵ所で使う予定だったのですが、3ヵ所中2ヵ所は第2候補の方になりそうなので、第2候補の方でも改めてご相談させて頂ければ幸いです。
よろしくお願いいたします。
初心者 さん
10月13日 14時55分
馬場様
すみません。追加で質問させて頂きたいのですが、元のサイト
https://codepen.io/seomoneyaff/pen/KQZYjo
では、左端の年号をクリックしてもしなくても、右側の文章部分の年号は太字になっていますが、私の環境では太字にはならず、入力したものが全て同じ書体、文字の大きさで羅列されている状態です。
これは私が何かタグを削除してしまっているのでしょうか…？
すみません。追加で質問させて頂きたいのですが、元のサイト
https://codepen.io/seomoneyaff/pen/KQZYjo
では、左端の年号をクリックしてもしなくても、右側の文章部分の年号は太字になっていますが、私の環境では太字にはならず、入力したものが全て同じ書体、文字の大きさで羅列されている状態です。
これは私が何かタグを削除してしまっているのでしょうか…？
初心者 さん
10月13日 15時19分
初心者さん
コードの作者では無いので仕様は分かりませんが、とりあえずCodePen上で、1993から始まっているところを、
1993→平成21年
1994→平成22年
と変更したところ動作しました。
※他の年数は変えていません。年数はそれぞれ2箇所直す必要があります。
何が影響しているのか文面だけで特定することは難しいと思います。まずはご自身で問題解決に向けた検証を十分に行ってみてください。
コツは、単体で検証することと、スモールステップに分けることです。
具体的には、まずは該当箇所の動作に不要なテンプレートのHTMLやCSSを使わず、CodePenの内容だけで希望のカスタマイズができるかやってみると良いでしょう。
ご自身のパソコン上でやっても良いですし、CodePen上でやってもいいです（その場合、最後に修正したコードの保存を忘れずに）。
まずは単体でCodePenのお手本通りの状態をスタート地点とした上で、ご自身の希望に沿うようカスタマイズしてみてください。
それも一気に修正するのではなく、1箇所の年ごとに平成○年などに修正し、都度動作確認（検証）を行います。
一気に修正してから動作確認をすると、どの時点で不具合が発生したか分らないからです。
そうやって少しずつ施策しながらやれば、どこから不具合が発生するか（画面に入りきらなくなるか等）も分りやすいですし、問題解決の検討もそこから始まります。
まずはそこまでご自身でトライしてみてください。
実際のテンプレートに組み込むのは、希望の動作が単体で実現できてからでも遅くはありません。
コードの作者では無いので仕様は分かりませんが、とりあえずCodePen上で、1993から始まっているところを、
1993→平成21年
1994→平成22年
と変更したところ動作しました。
※他の年数は変えていません。年数はそれぞれ2箇所直す必要があります。
何が影響しているのか文面だけで特定することは難しいと思います。まずはご自身で問題解決に向けた検証を十分に行ってみてください。
コツは、単体で検証することと、スモールステップに分けることです。
具体的には、まずは該当箇所の動作に不要なテンプレートのHTMLやCSSを使わず、CodePenの内容だけで希望のカスタマイズができるかやってみると良いでしょう。
ご自身のパソコン上でやっても良いですし、CodePen上でやってもいいです（その場合、最後に修正したコードの保存を忘れずに）。
まずは単体でCodePenのお手本通りの状態をスタート地点とした上で、ご自身の希望に沿うようカスタマイズしてみてください。
それも一気に修正するのではなく、1箇所の年ごとに平成○年などに修正し、都度動作確認（検証）を行います。
一気に修正してから動作確認をすると、どの時点で不具合が発生したか分らないからです。
そうやって少しずつ施策しながらやれば、どこから不具合が発生するか（画面に入りきらなくなるか等）も分りやすいですし、問題解決の検討もそこから始まります。
まずはそこまでご自身でトライしてみてください。
実際のテンプレートに組み込むのは、希望の動作が単体で実現できてからでも遅くはありません。
馬場誠 さん
10月14日 07時23分
追加のご質問に関してですが、上でいただいたコードを前回検証したときは、こちらの環境では太字になっていました。
実際にはテンプレートのCSSも読み込んでいるようですし、そこでCSSを上書き指定している可能性もあります。
ですので先ほどのとおり、まずはテンプレートのHTMLやCSSを読み込まないで単体でカスタマイズを完了させてみてください。
そうすれば問題が切り分けしやすいです。
実際にはテンプレートのCSSも読み込んでいるようですし、そこでCSSを上書き指定している可能性もあります。
ですので先ほどのとおり、まずはテンプレートのHTMLやCSSを読み込まないで単体でカスタマイズを完了させてみてください。
そうすれば問題が切り分けしやすいです。
馬場誠 さん
10月14日 07時24分
馬場さま、ありがとうございます。
こちらの作業過程の報告を省略してしまったことで解りづらくなってしまいすみませんでした。
CodePenだけで動くか見てみることは昨日の最後に質問させて頂いた時点で既にやっていたので、昨日の時点ではテンプレートのHTMLやCSSが原因だと思っていたのですが、コードを全て貼ると文字数オーバーで投稿できなかった、文章のみとさせて頂いていました。
その後もいろいろ試した結果、恐らくテンプレートのCSSが原因で年表の文章側の文字が太字にならないのだと思っているので、CSSを読み込ませる順番を変えてみたりもしたのですが、変わりませんでした。
CSS上で色の変更をするくらいしか知識がないので、このタイムラインは設置が難しそうだということが判りました。
何度もすみませんでした。
こちらの作業過程の報告を省略してしまったことで解りづらくなってしまいすみませんでした。
CodePenだけで動くか見てみることは昨日の最後に質問させて頂いた時点で既にやっていたので、昨日の時点ではテンプレートのHTMLやCSSが原因だと思っていたのですが、コードを全て貼ると文字数オーバーで投稿できなかった、文章のみとさせて頂いていました。
その後もいろいろ試した結果、恐らくテンプレートのCSSが原因で年表の文章側の文字が太字にならないのだと思っているので、CSSを読み込ませる順番を変えてみたりもしたのですが、変わりませんでした。
CSS上で色の変更をするくらいしか知識がないので、このタイムラインは設置が難しそうだということが判りました。
何度もすみませんでした。
初心者 さん
10月14日 08時49分
