ccs3に基づくタイムライン実装方法

Web プロジェクトでは、タイムラインコントロールをよく使用します。この記事では、項目ごとに展開できる CSS3 ベースのタイムラインを紹介します。展開された各項目には、テキスト、画像、ビデオなどの要素を埋め込むことができます。操作効果は以下のとおりです。

成し遂げる

このコントロールの実装プロセスは比較的単純で、主にtest.htmlファイルとtimeline.cssファイルで構成されます。具体的なコードは次のとおりです。

1. test.html ファイル

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <link rel="スタイルシート" href="timeline.css"/>
    <title>タイムライン</title>
</head>
<本文>
    <div id='timeDiv'>
        <ul id='タイムライン'>
          <li class='仕事'>
            <input class='radio' id='work1' name='works' type='radio' チェック済み>
            <div class="相対">
              <label for='work1'>1. タイトル 1</label>
              <span class='date'>T1</span>
              <span class='circle'></span>
            </div>
            <div クラス = 'コンテンツ'>
              <p>
                長安元年（701年）、李白（号は太白）が、一般的には、唐代の綿州（白渓県）剣南路の長隆（後に玄宗皇帝の禁忌を避けるために長明に改名された）青蓮郷の出身地であると信じられています。彼の先祖の故郷は甘粛省天水市です。
                彼の家族背景や家族については不明です。 『新唐書』によれば、李白は興聖帝（梁武昭王李昊）の9代目の孫である。この記述によると、李白は李唐王朝の王と同じ一族であり、唐の太宗皇帝李世民の従兄弟であった。
                彼の先祖は李建成あるいは李元基であったという説もある。
              </p>
              <p><img src="http://i.qulishi.com/UploadFile/2014-7/2014725171362.jpg" /></p>
            </div>
          </li>
          <li class='仕事'>
            <input class='radio' id='work2' name='works' type='radio'>
            <div class="相対">
              <label for='work2'>2. タイトル 2</label>
              <span class='date'>T2</span>
              <span class='circle'></span>
            </div>
            <div クラス = 'コンテンツ'>
              <p>
                神龍元年（705年）11月に、武則天が亡くなった。李白は5歳でした。この年は私が読書を学び始めた年でした。
                『安州の裴長石宛書簡』には「私は5歳の時に六家を読みました」とある。六家は唐代の小学校の読み書きの教科書である。長石は県の副知事である。
              </p>
            </div>
          </li>
          <li class='仕事'>
            <input class='radio' id='work3' name='works' type='radio'>
            <div class="相対">
              <label for='work3'>3. タイトル 3</label>
              <span class='date'>T3</span>
              <span class='circle'></span>
            </div>
            <div クラス = 'コンテンツ'>
              <p>
                開元三年（715年）、李白は15歳であった。
                彼はすでに多くの詩を書き、著名人からも賞賛と支持を受け、社会活動にも取り組み始めていた。
                彼はまた、道教の思想の影響を受け始め、剣術を好み、遍歴の騎士になることを楽しみました。その年、實沈が生まれました。
              </p>
            </div>
          </li>
          <li class='仕事'>
            <input class='radio' id='work4' name='works' type='radio'>
            <div class="相対">
              <label for='work4'>4. タイトル 4</label>
              <span class='date'>T4</span>
              <span class='circle'></span>
            </div>
            <div クラス = 'コンテンツ'>
              <p>
                開元六年（718年）、李白は18歳であった。
                彼は学問を修めるために代田（現在の四川省江油市）の大光山に隠遁して暮らした。
                彼は近隣の県を旅し、江油、江閣、淄州（現在の四川省の県庁所在地）などを訪れ、多くの経験と知識を得た。
              </p>
            </div>
          </li>
        </ul>
        </div>
</本文>
</html>

2. timeline.css ファイル

#timeDiv{
    最大幅: 1200px;
    マージン: 0 自動;
    パディング: 0 5%;
    フォントサイズ: 100%;
    フォントファミリ: "Noto Sans"、サンセリフ;
    色: 黒;
    背景: 白;
}
/* -------------------------------------
* タイムライン
* ------------------------------------- */
#タイムライン {
リストスタイル: なし;
マージン: 50px 0 30px 120px;
左パディング: 30px;
border-left: 8px グレー実線;
}
#タイムライン li {
マージン: 40px 0;
位置: 相対的;
}
#タイムライン p {
マージン: 0 0 15px;
}

。日付 {
上マージン: -10px;
上位: 50%;
左: -80px;
フォントサイズ: 0.95em;
行の高さ: 20px;
位置: 絶対;
}

。丸 {
上マージン: -15px;
上位: 50%;
左: -49px;
幅: 20px;
高さ: 20px;
背景: 白;
境界線: 5px の灰色
境界線の半径: 50%;
表示: ブロック;
位置: 絶対;
}

。コンテンツ {
最大高さ: 20px;
パディング: 70px 20px 0;
境界線の色: 透明;
境界線の幅: 2px;
境界線のスタイル: solid;
境界線の半径: 0.5em;
位置: 相対的;
}
.content:before、.content:after {
コンテンツ： "";
幅: 0;
高さ: 0;
境界線: 透明な実線;
位置: 絶対;
ポインタイベント: なし;
右: 100%;
}
.content:before {
右境界線の色: 継承;
境界線の幅: 20px;
上位: 50%;
上マージン: -20px;
}
.content:after {
右境界線の色: 白;
境界線の幅: 17px;
上位: 50%;
上マージン: -17px;
}
.content p {
最大高さ: 0;
色: 透明;
テキスト配置: 両端揃え;
単語区切り: 単語区切り;
ハイフン: 自動;
オーバーフロー: 非表示;
}
ラベル {
フォントサイズ: 1.3em;
位置: 絶対;
zインデックス: 100;
カーソル: ポインタ;
上: 35px;
遷移: 0.2 秒の線形変換。
フォントの太さ: 太字;
}

.ラジオ{
表示: なし;
}

.radio:checked + .relative ラベル {
カーソル: 自動;
変換: translateX(42px);
}
.radio:checked + .relative .circle {
背景: 赤;
}
.radio:checked ~ .content {
最大高さ: 200000px;
境界線の色: ライトグレー;
右マージン: 20px;
変換: translateX(20px);
遷移: max-height 0.4 秒線形、border-color 0.5 秒線形、transform 0.2 秒線形。
}
.radio:checked ~ .content p {
最大高さ: 200000px;
色: 黒;
遷移: カラー 0.3 秒、線形 0.3 秒。
}
/* -------------------------------------
* 携帯電話（縦型のみ）
* ------------------------------------- */
@media スクリーンと (最大幅: 767px) {
#タイムライン {
  左マージン: 0;
  左パディング: 0;
  左境界線: なし;
}
#タイムライン li {
  マージン: 50px 0;
}

ラベル {
  幅: 85%;
  フォントサイズ: 1.1em;
  空白: ラップなし;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  表示: ブロック;
  変換: translateX(18px);
}

。コンテンツ {
  パディング上部: 60px;
  境界線の色: #eee9dc;
}
.content:before、.content:after {
  境界線: 透明な実線;
  下部: 100%;
}
.content:before {
  境界線の下部の色: 継承;
  境界線の幅: 17px;
  上: -16px;
  左: 50px;
  左マージン: -17px;
}
.content:after {
  境界線の下の色: 白;
  境界線の幅: 20px;
  上: -20px;
  左: 50px;
  左マージン: -20px;
}
.content p {
  フォントサイズ: 0.9em;
  行の高さ: 1.4;
}

.circle、.date {
  表示: なし;
}
}

【参考文献】 CSS3 タイムライン

ccs3 によるタイムライン実装方法についてはこれで終了です。より関連性の高い css3 タイムライン実装コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: テーブルはセルとimg画像を結合してtd HTML全体を埋めます

>>: Node.js パッケージマネージャー npm の具体的な使用方法