タイムラインを設置したい（２）
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
馬場様、お世話になっております。
第2希望のタイムラインはレイアウトがくずれて、設定したはずの文字も表示されない状況です。
https://codepen.io/P233/pen/lGewF
第1希望のものと同じ手順でコピー＆貼り付けをしているつもりなのですが、誤りを教えて頂ければ幸いです。
よろしくお願いいたします。
【HTML】
<!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="member1.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>
<h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work2' name='works' type='radio'>
<div class="relative">
<label for='work2'>Lorem ipsum dolor sit amet</label>
<span class='date'>09 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work1' name='works' type='radio'>
<div class="relative">
<label for='work1'>Lorem ipsum dolor sit amet</label>
<span class='date'>08 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</li>
</ul>
</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>
<!-- / フッター -->
</body>
</html>
【CSS】
/* -------------------------------------
* For horizontal version, set the
* $vertical variable to false
* ------------------------------------- */
/* -------------------------------------
* General Style
* ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
font-size: 100%;
font-family: "Noto Sans", sans-serif;
color: #eee9dc;
background: #48b379;
}
h2 {
margin: 3em 0 0 0;
font-size: 1.5em;
letter-spacing: 2px;
text-transform: uppercase;
}
/* -------------------------------------
* timeline
* ------------------------------------- */
#timeline {
list-style: none;
margin: 50px 0 30px 120px;
padding-left: 30px;
border-left: 8px solid #eee9dc;
}
#timeline li {
margin: 40px 0;
position: relative;
}
#timeline p {
margin: 0 0 15px;
}
.date {
margin-top: -10px;
top: 50%;
left: -158px;
font-size: 0.95em;
line-height: 20px;
position: absolute;
}
.circle {
margin-top: -10px;
top: 50%;
left: -44px;
width: 10px;
height: 10px;
background: #48b379;
border: 5px solid #eee9dc;
border-radius: 50%;
display: block;
position: absolute;
}
.content {
max-height: 20px;
padding: 50px 20px 0;
border-color: transparent;
border-width: 2px;
border-style: solid;
border-radius: 0.5em;
position: relative;
}
.content:before, .content:after {
content: "";
width: 0;
height: 0;
border: solid transparent;
position: absolute;
pointer-events: none;
right: 100%;
}
.content:before {
border-right-color: inherit;
border-width: 20px;
top: 50%;
margin-top: -20px;
}
.content:after {
border-right-color: #48b379;
border-width: 17px;
top: 50%;
margin-top: -17px;
}
.content p {
max-height: 0;
color: transparent;
text-align: justify;
word-break: break-word;
hyphens: auto;
overflow: hidden;
}
label {
font-size: 1.3em;
position: absolute;
z-index: 100;
cursor: pointer;
top: 20px;
transition: transform 0.2s linear;
}
.radio {
display: none;
}
.radio:checked + .relative label {
cursor: auto;
transform: translateX(42px);
}
.radio:checked + .relative .circle {
background: #f98262;
}
.radio:checked ~ .content {
max-height: 180px;
border-color: #eee9dc;
margin-right: 20px;
transform: translateX(20px);
transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
max-height: 200px;
color: #eee9dc;
transition: color 0.3s linear 0.3s;
}
/* -------------------------------------
* mobile phones (vertical version only)
* ------------------------------------- */
@media screen and (max-width: 767px) {
#timeline {
margin-left: 0;
padding-left: 0;
border-left: none;
}
#timeline li {
margin: 50px 0;
}
label {
width: 85%;
font-size: 1.1em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
transform: translateX(18px);
}
.content {
padding-top: 45px;
border-color: #eee9dc;
}
.content:before, .content:after {
border: solid transparent;
bottom: 100%;
}
.content:before {
border-bottom-color: inherit;
border-width: 17px;
top: -16px;
left: 50px;
margin-left: -17px;
}
.content:after {
border-bottom-color: #48b379;
border-width: 20px;
top: -20px;
left: 50px;
margin-left: -20px;
}
.content p {
font-size: 0.9em;
line-height: 1.4;
}
.circle, .date {
display: none;
}
}
第2希望のタイムラインはレイアウトがくずれて、設定したはずの文字も表示されない状況です。
https://codepen.io/P233/pen/lGewF
第1希望のものと同じ手順でコピー＆貼り付けをしているつもりなのですが、誤りを教えて頂ければ幸いです。
よろしくお願いいたします。
【HTML】
<!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="member1.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>
<h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work2' name='works' type='radio'>
<div class="relative">
<label for='work2'>Lorem ipsum dolor sit amet</label>
<span class='date'>09 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</li>
<li class='work'>
<input class='radio' id='work1' name='works' type='radio'>
<div class="relative">
<label for='work1'>Lorem ipsum dolor sit amet</label>
<span class='date'>08 May 2013</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</li>
</ul>
</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>
<!-- / フッター -->
</body>
</html>
【CSS】
/* -------------------------------------
* For horizontal version, set the
* $vertical variable to false
* ------------------------------------- */
/* -------------------------------------
* General Style
* ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
font-size: 100%;
font-family: "Noto Sans", sans-serif;
color: #eee9dc;
background: #48b379;
}
h2 {
margin: 3em 0 0 0;
font-size: 1.5em;
letter-spacing: 2px;
text-transform: uppercase;
}
/* -------------------------------------
* timeline
* ------------------------------------- */
#timeline {
list-style: none;
margin: 50px 0 30px 120px;
padding-left: 30px;
border-left: 8px solid #eee9dc;
}
#timeline li {
margin: 40px 0;
position: relative;
}
#timeline p {
margin: 0 0 15px;
}
.date {
margin-top: -10px;
top: 50%;
left: -158px;
font-size: 0.95em;
line-height: 20px;
position: absolute;
}
.circle {
margin-top: -10px;
top: 50%;
left: -44px;
width: 10px;
height: 10px;
background: #48b379;
border: 5px solid #eee9dc;
border-radius: 50%;
display: block;
position: absolute;
}
.content {
max-height: 20px;
padding: 50px 20px 0;
border-color: transparent;
border-width: 2px;
border-style: solid;
border-radius: 0.5em;
position: relative;
}
.content:before, .content:after {
content: "";
width: 0;
height: 0;
border: solid transparent;
position: absolute;
pointer-events: none;
right: 100%;
}
.content:before {
border-right-color: inherit;
border-width: 20px;
top: 50%;
margin-top: -20px;
}
.content:after {
border-right-color: #48b379;
border-width: 17px;
top: 50%;
margin-top: -17px;
}
.content p {
max-height: 0;
color: transparent;
text-align: justify;
word-break: break-word;
hyphens: auto;
overflow: hidden;
}
label {
font-size: 1.3em;
position: absolute;
z-index: 100;
cursor: pointer;
top: 20px;
transition: transform 0.2s linear;
}
.radio {
display: none;
}
.radio:checked + .relative label {
cursor: auto;
transform: translateX(42px);
}
.radio:checked + .relative .circle {
background: #f98262;
}
.radio:checked ~ .content {
max-height: 180px;
border-color: #eee9dc;
margin-right: 20px;
transform: translateX(20px);
transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
max-height: 200px;
color: #eee9dc;
transition: color 0.3s linear 0.3s;
}
/* -------------------------------------
* mobile phones (vertical version only)
* ------------------------------------- */
@media screen and (max-width: 767px) {
#timeline {
margin-left: 0;
padding-left: 0;
border-left: none;
}
#timeline li {
margin: 50px 0;
}
label {
width: 85%;
font-size: 1.1em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
transform: translateX(18px);
}
.content {
padding-top: 45px;
border-color: #eee9dc;
}
.content:before, .content:after {
border: solid transparent;
bottom: 100%;
}
.content:before {
border-bottom-color: inherit;
border-width: 17px;
top: -16px;
left: 50px;
margin-left: -17px;
}
.content:after {
border-bottom-color: #48b379;
border-width: 20px;
top: -20px;
left: 50px;
margin-left: -20px;
}
.content p {
font-size: 0.9em;
line-height: 1.4;
}
.circle, .date {
display: none;
}
}
初心者 さん
10月13日 15時04分
初心者さん、こんにちは。
私の方では、テンプレートのCSSは読み込ませていませんのでタイムライン以外は乱れていますが、タイムラインの動作自体はできているようでした。
試しに今回の動作に不要な部分（テスト会社のHTML）を削除すれば、CodePenと同じような見た目で2個分だけ表示されます。
こちらも別にご返信しているページと同じで、まずは単体で、ご自身の望むカスタマイズを完成させることを先にやってみてください。
単体でカスタマイズしたものが完全に動作確認が取れてから、テンプレートに割り当てます。
それでずれるようであれば、改めてテンプレートのHTML/CSSとの兼ね合いを調査・検証することになると思います。
こちらのタイムラインは、bodyやh2等の広範囲にわたる部分にもCSSが定義されているようですね。
コピペしたままでは背景まで色が変わって使いづらいので、希望通りに設置するにはこれらが修正できる程度のCSSの知識が必要になりそうです。
私の方では、テンプレートのCSSは読み込ませていませんのでタイムライン以外は乱れていますが、タイムラインの動作自体はできているようでした。
試しに今回の動作に不要な部分（テスト会社のHTML）を削除すれば、CodePenと同じような見た目で2個分だけ表示されます。
こちらも別にご返信しているページと同じで、まずは単体で、ご自身の望むカスタマイズを完成させることを先にやってみてください。
単体でカスタマイズしたものが完全に動作確認が取れてから、テンプレートに割り当てます。
それでずれるようであれば、改めてテンプレートのHTML/CSSとの兼ね合いを調査・検証することになると思います。
こちらのタイムラインは、bodyやh2等の広範囲にわたる部分にもCSSが定義されているようですね。
コピペしたままでは背景まで色が変わって使いづらいので、希望通りに設置するにはこれらが修正できる程度のCSSの知識が必要になりそうです。
馬場誠 さん
10月14日 07時48分
馬場様、お世話になっております。
こちらも最初にご相談させて頂いたものと同様で、テンプレートに当てはめなければきちんと表示され、文字の大きさも大きい文字、小さい文字を使って表示されていますが、テンプレートのスタイルシートを読み込むと、全て同じ文字の大きさになってしまうところは変わりませんでした。
また、私の環境ではテンプレートに当てはめると元々のテンプレートが崩れて、タイムラインの文字は全く表示されませんでした。
色の変更は元々の緑ではなく、白に変更しているのですが、それ以上は何もできず…でした。
的を得ない質問にご対応頂きましてありがとうございました。
こちらも最初にご相談させて頂いたものと同様で、テンプレートに当てはめなければきちんと表示され、文字の大きさも大きい文字、小さい文字を使って表示されていますが、テンプレートのスタイルシートを読み込むと、全て同じ文字の大きさになってしまうところは変わりませんでした。
また、私の環境ではテンプレートに当てはめると元々のテンプレートが崩れて、タイムラインの文字は全く表示されませんでした。
色の変更は元々の緑ではなく、白に変更しているのですが、それ以上は何もできず…でした。
的を得ない質問にご対応頂きましてありがとうございました。
初心者 さん
10月14日 09時25分
