ドライブレポート
ドライブレポートのレイアウトについての章です。
コンテンツエリア毎のラッピング
各コンテンツエリアは「t-drive」クラスを付与したタグで囲ってください。
<div class="t-drive">
<!-- 各コンテンツが入ります -->
</div>
ユーザー情報
ユーザー情報は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
恵比寿 太郎
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-user">
<div class="t-drive-user-text">恵比寿 太郎</div>
</div><!-- /.t-drive-user -->
</div><!-- /.t-drive -->
</section>
</body>
タイトル
タイトルは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
ドライブレポート
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-title">
<div class="t-drive-title-image"><img src="images/drive/title_img01.png" alt=""></div>
<h2 class="t-drive-title-page">ドライブレポート</h2>
</div><!-- /.t-drive-title -->
</div><!-- /.t-drive -->
</section>
</body>
上部UI
上部UIは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
「ドライブレポートを選択」の詳細（モーダル）は、ID「modal07」を参考に記述してください。（※関連ファイル：jquery-3.4.1.min.js、component.js）
「走行日を選択」のカレンダー機能は jquery UI の datepicker をカスタマイズし、実装しております。（※関連ファイル：jquery-3.4.1.min.js、jquery-ui.min.css、jquery-ui.theme.min.css、jquery-ui.min.js）
「走行日を選択」の詳細設定はHTMLファイル下部に設置しております。
2020年12月30日(月)09:00～
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-block t-gutter-fix01">
<div class="t-dateselect-date">
2020年12月30日(月)09:00～
<!-- /.t-dateselect-date --></div>
<div class="t-dateselect">
<div class="t-dateselect-header">
<div class="t-dateselect-item t-modal-open" data-openMadal="modal07">
<div class="t-dateselect-text">ドライブレポートを選択</div>
</div>
<div class="t-dateselect-datepicker">
<input type="text" id="datepicker01" class="datepicker" readonly="readonly">
<div class="t-dateselect-datepicker-text">走行日を選択</div>
<!-- /.t-dateselect-datepicker --></div>
<!-- /.t-dateselect-header --></div>
<div id="modal07" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">ドライブレポートを選択</div>
<!-- /.t-modal-card-title --></div>
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
<!-- /.t-modal-card-header --></div>
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-box">
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)02:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text read">2020年12月30日(月)03:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text read">2020年12月30日(月)04:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)12:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)13:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)14:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)16:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)17:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)18:00～</a>
</div>
<!-- /.t-modal-card-body-box --></div>
<!-- /.t-modal-card-body-block --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card --></div>
<!-- /.t-modal-scroll --></div>
<!-- /.t-modal-inner --></div>
<!-- /.t-modal --></div>
<!-- /.t-dateselect --></div>
<!-- /.t-block --></div>
</div><!-- /.t-drive -->
</section>
<!-- 各コンテンツが入ります -->
</body>
上部UI - ドライブレポートを選択：モーダル
ドライブレポートを選択のモーダルウィンドウは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-block t-gutter-fix01">
<div class="t-dateselect">
<div id="modal07" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">ドライブレポートを選択</div>
<!-- /.t-modal-card-title --></div>
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
<!-- /.t-modal-card-header --></div>
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-box">
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)02:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text read">2020年12月30日(月)03:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text read">2020年12月30日(月)04:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)12:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)13:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)14:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)16:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)17:00～</a>
</div>
<div class="t-modal-card-list">
<a href="javascript:void(0);" class="t-modal-card-list-text">2020年12月30日(月)18:00～</a>
</div>
<!-- /.t-modal-card-body-box --></div>
<!-- /.t-modal-card-body-block --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card --></div>
<!-- /.t-modal-scroll --></div>
<!-- /.t-modal-inner --></div>
<!-- /.t-modal --></div>
<!-- /.t-dateselect --></div>
<!-- /.t-block --></div>
</div><!-- /.t-drive -->
</section>
<!-- 各コンテンツが入ります -->
</body>
上部UI：カレンダーの設定
カレンダーの設定は下記を参考に設定してください。
<body>
<script type="text/javascript">
// カレンダーの設定
var calendarTarget = $('#datepicker01');
// リンク先の設定（遷移先URLの例：report_2020-05-01.html）
var target_days = [
"2020-05-01",
"2020-05-02",
"2020-05-03",
"2020-05-04",
"2020-05-05",
"2020-05-06",
"2020-05-07",
"2020-05-08",
"2020-05-09",
"2020-05-10",
"2020-05-11"
];
// オプションの設定
var opt = {
firstDay: 1,
dateFormat: 'yy-mm-dd',
disabled: false,
// カレンダーがクリックされた際の挙動をここに設定。引数「date」には日付が入っています（現在の設定はyyyy-mm-dd）
onSelect: function(date){
window.location.href = './report_' + date + '.html';
},
beforeShowDay: function(day){
yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
if ($.inArray(yymmdd, target_days) == -1) {
return [false, ""];
}
else {
return [true, ""];
}
}
};
$(function(){
// datepicer実行
calendarTarget.datepicker(opt);
});
</script>
</body>
総合評価
総合評価は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。（※関連ファイル：jquery-3.4.1.min.js、circliful.js、circliful.css）
星の数を変更することができます「★１：star_img01.png」「★２：star_img02.png」「★３：star_img03.png」
総合評価
点
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-circle">
<div class="t-drive-circle-charts">
<div class="t-drive-circle-charts-title">総合評価</div>
<div id="hyouka-circle"></div>
<div class="t-drive-circle-charts-text">点</div>
</div><!-- /.t-drive-circle-charts -->
<div class="t-drive-cercle-image"><img src="images/drive/star_img03.png" alt=""></div>
</div><!-- /.t-drive-circle -->
</div><!-- /.t-drive -->
</section>
</body>
総合評価：円グラフの設定
円グラフの設定はvar totalPoint = ●●;の「●●」に数値（0から100）を設定してください。
<body>
<script type="text/javascript">
$(function(){
//総合評価グラフの生成
var totalPoint = 95;
var circle1 = circliful.newCircle({
id: 'hyouka-circle',
type: 'simple',
percent: totalPoint,
strokeGradient: ["#00d2ff", "#0064ff"],
animationStep: 8,
backgroundCircleWidth: 20,
foregroundCircleWidth: 20,
noPercentageSign: true,
});
});
</script>
</body>
アラームの検知
アラームの検知は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
車両からのアラームを検知しました。
詳細は「車両情報」をご確認ください。
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-alert">
<p>車両からのアラームを検知しました。<br>詳細は「車両情報」をご確認ください。</p>
<!-- /.t-alert --></div>
</div><!-- /.t-drive -->
</section>
</body>
詳細
詳細は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
評価の数値を変更することができます「１：charts01.png」「２：charts02.png」「３：charts03.png」「４：charts04.png」「５：charts05.png」
（※関連ファイル：jquery-3.4.1.min.js、component.js）
詳 細
項目ごとの評価
スピード
アクセル
ブレーキ
走行距離
99,999
99,999km
走行距離
走行距離
このドライブレポートが対象とるする走行における合計距離
自動運転走行
上記「走行距離」のうち、自動運転モードで走行した距離
ご注意
- 走行距離が運転診断を行う基準に達しない場合は、ドライブレポートが表示されません。そのため、各ドライブレポートに表示された走行距離の合計が、運転分保険料の算出に使用する走行距離と一致しない場合があります。
- 「自動運転走行」には、自動運転モードの起動直後および自動運転モードの終了直前の走行分の距離が含まれない場合があります。
<body>
<section class="t-container">
<div class="t-drive-detail">
<div class="t-drive-detail-title">
<h3>詳 細</h3>
<!-- /.t-drive-detail-title --></div>
<div class="t-drive-detail-combo">
<div class="t-drive-detail-combo-header">
<div class="t-drive-detail-combo-header-text">項目ごとの評価</div>
<!-- /.t-drive-detail-combo-header --></div>
<div class="t-drive-detail-combo-group">
<div class="t-drive-detail-combo-charts">
<div class="t-drive-detail-combo-item">
<div class="t-drive-detail-combo-image"><img src="../images/drive/charts04.png" alt=""></div>
<div class="t-drive-detail-combo-text">スピード</div>
<!-- /.t-drive-detail-combo-item --></div>
<div class="t-drive-detail-combo-item">
<div class="t-drive-detail-combo-image"><img src="../images/drive/charts03.png" alt=""></div>
<div class="t-drive-detail-combo-text">アクセル</div>
<!-- /.t-drive-detail-combo-item --></div>
<div class="t-drive-detail-combo-item">
<div class="t-drive-detail-combo-image"><img src="../images/drive/charts02.png" alt=""></div>
<div class="t-drive-detail-combo-text">ブレーキ</div>
<!-- /.t-drive-detail-combo-item --></div>
<!-- /.t-drive-detail-combo-charts --></div>
<!-- /.t-drive-detail-combo-group --></div>
<div class="t-drive-detail-distance">
<div class="t-drive-detail-distance-header">
<div class="t-drive-detail-distance-title">
<div class="t-drive-detail-distance-title-text">走行距離</div>
<!-- /.t-drive-detail-distance-title --></div>
<!-- /.t-drive-detail-distance-header --></div>
<div class="t-drive-detail-distance-body">
<div class="t-drive-detail-distance-text">
<span class="t-drive-detail-distance-text-icon t-modal-open" data-openMadal="modal01"></span>
<span class="t-drive-detail-distance-text-main">99,999</span>
<small class="t-drive-detail-distance-text-sub">99,999km</small>
<!-- /.t-drive-detail-distance-text --></div>
<!-- /.t-drive-detail-distance-body --></div>
<!-- /.t-drive-detail-distance --></div>
<!-- /.t-drive-detail-combobox --></div>
<div id="modal01" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">走行距離</div>
<!-- /.t-modal-card-title --></div>
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
<!-- /.t-modal-card-header --></div>
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-list">
<div class="t-modal-card-body-list-title">走行距離</div>
<div class="t-modal-card-body-list-text">このドライブレポートが対象とるする走行における合計距離</div>
</div>
<div class="t-modal-card-body-list">
<div class="t-modal-card-body-list-title">自動運転走行</div>
<div class="t-modal-card-body-list-text">上記「走行距離」のうち、自動運転モードで走行した距離</div>
</div>
<div class="t-modal-card-body-title">
<div class="t-modal-decoration">ご注意</div>
</div>
<ul class="t-list-dots">
<li>走行距離が運転診断を行う基準に達しない場合は、ドライブレポートが表示されません。そのため、各ドライブレポートに表示された走行距離の合計が、運転分保険料の算出に使用する走行距離と一致しない場合があります。</li>
<li>「自動運転走行」には、自動運転モードの起動直後および自動運転モードの終了直前の走行分の距離が含まれない場合があります。</li>
</ul><!-- /.t-annotation -->
<!-- /.t-modal-card-body-block --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card --></div>
<!-- /.t-modal-scroll --></div>
<!-- /.t-modal-inner --></div>
<!-- /.t-modal --></div>
<!-- /.t-drive-detail --></div>
</section>
</body>
詳細 - 走行距離：モーダル
走行距離のモーダルウィンドウは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
<body>
<section class="t-container">
<div class="t-drive-detail">
<div id="modal01" class="t-modal">
<div class="t-modal-inner">
<div class="t-modal-scroll">
<div class="t-modal-card">
<div class="t-modal-card-body">
<div class="t-modal-card-header">
<div class="t-modal-card-title">
<div class="t-modal-card-text">走行距離</div>
<!-- /.t-modal-card-title --></div>
<span class="btn-close t-modal-card-close t-modal-close">
<span class="t-modal-card-close-icon"></span>
</span>
<!-- /.t-modal-card-header --></div>
<div class="t-modal-card-body">
<div class="t-modal-card-body-block">
<div class="t-modal-card-body-list">
<div class="t-modal-card-body-list-title">走行距離</div>
<div class="t-modal-card-body-list-text">このドライブレポートが対象とるする走行における合計距離</div>
</div>
<div class="t-modal-card-body-list">
<div class="t-modal-card-body-list-title">自動運転走行</div>
<div class="t-modal-card-body-list-text">上記「走行距離」のうち、自動運転モードで走行した距離</div>
</div>
<div class="t-modal-card-body-title">
<div class="t-modal-decoration">ご注意</div>
</div>
<ul class="t-list-dots">
<li>走行距離が運転診断を行う基準に達しない場合は、ドライブレポートが表示されません。そのため、各ドライブレポートに表示された走行距離の合計が、運転分保険料の算出に使用する走行距離と一致しない場合があります。</li>
<li>「自動運転走行」には、自動運転モードの起動直後および自動運転モードの終了直前の走行分の距離が含まれない場合があります。</li>
</ul><!-- /.t-annotation -->
<!-- /.t-modal-card-body-block --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card-body --></div>
<!-- /.t-modal-card --></div>
<!-- /.t-modal-scroll --></div>
<!-- /.t-modal-inner --></div>
<!-- /.t-modal --></div>
<!-- /.t-drive-detail --></div>
</section>
</body>
タブメニュー
タブメニューは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
初期表示させたいタブ「t-drive-tab-item」クラスとコンテナ「t-drive-content-item 」クラスに「active」クラスを併記してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）
マップ
アドバイス
車両情報
ドライブレポートマップ
アドバイス
車両情報
<body>
<section class="t-container">
<div class="t-drive-tab">
<div class="t-drive-tab-item active">
<span class="t-drive-tab-item-main">マップ</span>
</div>
<div class="t-drive-tab-item">
<span class="t-drive-tab-item-main">アドバイス</span>
</div>
<div class="t-drive-tab-item">
<span class="t-drive-tab-item-main">車両情報</span>
</div>
</div><!-- /.t-drive-tab -->
<div class="t-drive-content">
<div class="t-drive-content-item active">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico09.png" alt=""></div>
<h4 class="t-drive-content-title">ドライブレポートマップ</h4>
</div><!-- /.t-drive-content-header -->
</div><!-- /.t-drive-content-item -->
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico02.png" alt=""></div>
<h4 class="t-drive-content-title">アドバイス</h4>
<!-- /.t-drive-content-header --></div>
</div><!-- /.t-drive-content-item -->
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico03.png" alt=""></div>
<h4 class="t-drive-content-title">車両情報</h4>
<!-- /.t-drive-content-header --></div>
</div><!-- /.t-drive-content-item -->
</div><!-- /.t-drive-content -->
</section>
</body>
タブメニュー（非活性化）
タブメニューは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
初期表示させたいタブ「t-drive-tab-item」クラスとコンテナ「t-drive-content-item 」クラスに「active」クラスを併記してください。
非活性化させたいタブ「t-monthly-tab-item」クラスに「inactive」クラスを併記してください。
（※関連ファイル：jquery-3.4.1.min.js、component.js）
マップ
（未選択）
アドバイス
車両情報
（お知らせなし）
ドライブレポートマップ
アドバイス
車両情報
<body>
<section class="t-container">
<div class="t-drive-tab">
<div class="t-drive-tab-item inactive">
<span class="t-drive-tab-item-main">マップ</span>
<small class="t-drive-tab-item-sub">（未選択）</small>
</div>
<div class="t-drive-tab-item active">
<span class="t-drive-tab-item-main">アドバイス</span>
</div>
<div class="t-drive-tab-item inactive">
<span class="t-drive-tab-item-main">車両情報</span>
<small class="t-drive-tab-item-sub">（お知らせなし）</small>
</div>
</div><!-- /.t-drive-tab -->
<div class="t-drive-content">
<div class="t-drive-content-item active">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico09.png" alt=""></div>
<h4 class="t-drive-content-title">ドライブレポートマップ</h4>
</div><!-- /.t-drive-content-header -->
</div><!-- /.t-drive-content-item -->
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico02.png" alt=""></div>
<h4 class="t-drive-content-title">アドバイス</h4>
<!-- /.t-drive-content-header --></div>
</div><!-- /.t-drive-content-item -->
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico03.png" alt=""></div>
<h4 class="t-drive-content-title">車両情報</h4>
<!-- /.t-drive-content-header --></div>
</div><!-- /.t-drive-content-item -->
</div><!-- /.t-drive-content -->
</section>
</body>
マップ
マップは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
ドライブレポートマップ
マップ用の記述
-
測定開始 -
測定終了 -
速度超過 -
急アクセル -
急ブレーキ
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-content">
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico09.png" alt=""></div>
<h4 class="t-drive-content-title">ドライブレポートマップ</h4>
</div><!-- /.t-drive-content-header -->
<div class="t-drive-content-map">
<div class="t-drive-content-map-iframe">
マップ用の記述
</div>
<ul class="t-drive-content-map-description">
<li class="t-drive-content-map-description-item">
<div class="t-drive-content-map-icon"><img src="images/drive/ico10.png" alt=""></div>
<div class="t-drive-content-map-text">測定開始</div>
</li>
<li class="t-drive-content-map-description-item">
<div class="t-drive-content-map-icon"><img src="images/drive/ico11.png" alt=""></div>
<div class="t-drive-content-map-text">測定終了</div>
</li>
<li class="t-drive-content-map-description-item">
<div class="t-drive-content-map-icon"><img src="images/drive/ico12.png" alt=""></div>
<div class="t-drive-content-map-text">速度超過</div>
</li>
<li class="t-drive-content-map-description-item">
<div class="t-drive-content-map-icon"><img src="images/drive/ico13.png" alt=""></div>
<div class="t-drive-content-map-text">急アクセル</div>
</li>
<li class="t-drive-content-map-description-item">
<div class="t-drive-content-map-icon"><img src="images/drive/ico14.png" alt=""></div>
<div class="t-drive-content-map-text">急ブレーキ</div>
</li>
</ul>
</div><!-- /.t-drive-content-map -->
</div><!-- /.t-drive-content-item -->
</div><!-- /.t-drive-content -->
</div><!-- /.t-drive -->
</section>
</body>
アドバイス
アドバイスは「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
アドバイス
スピード
＜★★★★☆＞速度超過した区間もありましたが、比較的速度を意識した良い運転ができています。道路状況に合わせた速度で走行しましょう。
アクセル
＜★★★☆☆＞急加速がありました。アクセルを強く踏み込みすぎず、道路状況に合わせたスムーズなアクセル操作を心がけましょう。
ブレーキ
＜★★☆☆☆＞急減速がありました。速度に合わせた十分な車間距離を保ち、周囲の状況をよく見て先読み運転を心がけましょう。
ワンポイントアドバイス
自動運転モードの使用を検知しました。これからも自動運転モードを使用することができる場面では有効に活用し、安全運転を心がけましょう。
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-content">
<div class="t-drive-content-item">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico02.png" alt=""></div>
<h4 class="t-drive-content-title">アドバイス</h4>
</div><!-- /.t-drive-content-header -->
<div class="t-drive-content-text">
<div class="t-drive-content-headline">
<h5 class="t-drive-content-subtitle">スピード</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">＜★★★★☆＞速度超過した区間もありましたが、比較的速度を意識した良い運転ができています。道路状況に合わせた速度で走行しましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-headline">
<h5 class="t-drive-content-subtitle">アクセル</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">＜★★★☆☆＞急加速がありました。アクセルを強く踏み込みすぎず、道路状況に合わせたスムーズなアクセル操作を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-headline">
<h5 class="t-drive-content-subtitle">ブレーキ</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">＜★★☆☆☆＞急減速がありました。速度に合わせた十分な車間距離を保ち、周囲の状況をよく見て先読み運転を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-headline">
<h5 class="t-drive-content-subtitle">ワンポイントアドバイス</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">自動運転モードの使用を検知しました。これからも自動運転モードを使用することができる場面では有効に活用し、安全運転を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
</div><!-- /.t-drive-content-item -->
</div><!-- /.t-drive-content -->
</div><!-- /.t-drive -->
</section>
</body>
車両情報
車両情報は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
車両情報
予防安全装置の作動状況
車両からのアラーム情報
エンジンオイル量の不足
エンジンオイル量が不足しているようです。エンジンオイルの補充もしくは交換をおすすめします。おクルマを購入された販売店等にご相談ください。
タイヤ空気圧の低下
タイヤ空気圧が低下しているようです。タイヤの点検をおすすめします。おクルマを購入された販売店等にご相談ください。
電気キーの電池消耗
電子キーの電池が消耗しているようです。電子キーの電池の交換をおすすめします。おクルマを購入された販売店等にご相談ください。
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-content">
<div class="t-drive-content-item active">
<div class="t-drive-content-header">
<div class="t-drive-content-icon"><img src="images/drive/ico03.png" alt=""></div>
<h4 class="t-drive-content-title">車両情報</h4>
<!-- /.t-drive-content-header --></div>
<div class="t-drive-content-subheader">
<p class="t-drive-content-minititle">予防安全装置の作動状況</p>
<!-- /.t-drive-content-subheader --></div>
<div class="t-drive-content-subitem">
<div class="t-drive-content-subheader">
<p class="t-drive-content-minititle">予防安全装置の作動状況</p>
</div><!-- /.t-drive-content-subheader -->
<div class="t-drive-content-text">
<div class="t-drive-content-title-headline">
<p class="t-drive-content-title-text">ABS</p>
<a href="javascript: void(0);" class="t-drive-title-btn">
<span class="t-drive-title-btn-icon">ABSとは</span>
</a>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">ブレーキの際のタイヤのロックを防止し、スリップを抑制する、「ＡＢＳ」の作動を検知しました。周囲や路面の状況に注意して、適切なブレーキ操作を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-title-headline">
<p class="t-drive-content-title-text">TRC</p>
<a href="javascript: void(0);" class="t-drive-title-btn">
<span class="t-drive-title-btn-icon">TRCとは</span>
</a>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">発進や加速の際のタイヤの空転を抑え、駆動力の確保に貢献する、「ＴＲＣ」の作動を検知しました。周囲や路面の状況に注意して、適切なアクセル操作を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-title-headline">
<p class="t-drive-content-title-text">VSC</p>
<a href="javascript: void(0);" class="t-drive-title-btn">
<span class="t-drive-title-btn-icon">VSCとは</span>
</a>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">カーブの際のタイヤの横滑りを抑え、車両の安定性を確保する、「ＶＳＣ」の作動を検知しました。周囲や路面の状況に注意して、適切なハンドル操作を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-title-headline">
<p class="t-drive-content-title-text">PCS</p>
<a href="javascript: void(0);" class="t-drive-title-btn">
<span class="t-drive-title-btn-icon">PCSとは</span>
</a>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">進路上の危険を検出して衝突の回避支援あるいは衝突被害を軽減する、「ＰＣＳ」の作動を検知しました。お怪我はありませんでしたでしょうか。</p>
</div><!-- /.t-drive-content-text -->
<div class="t-drive-content-text">
<div class="t-drive-content-title-headline">
<p class="t-drive-content-title-text">LDA</p>
<a href="javascript: void(0);" class="t-drive-title-btn">
<span class="t-drive-title-btn-icon">LDAとは</span>
</a>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">車線からの逸脱の危険をお知らせし、逸脱を避ける操作を支援する、「ＬＤＡ」の作動を検知しました。車線に沿った安全走行を心がけましょう。</p>
</div><!-- /.t-drive-content-text -->
<!-- /.t-drive-content-subitem --></div>
<div class="t-drive-content-subitem">
<div class="t-drive-content-subheader">
<p class="t-drive-content-minititle">車両からのアラーム情報</p>
</div><!-- /.t-drive-content-subheader -->
<div class="t-drive-content-description">
<div class="t-drive-content-headline">
<div class="t-drive-content-icon"><img src="../images/drive/ico06.png" alt=""></div>
<h5 class="t-drive-content-subtitle">エンジンオイル量の不足</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">エンジンオイル量が不足しているようです。エンジンオイルの補充もしくは交換をおすすめします。おクルマを購入された販売店等にご相談ください。</p>
</div><!-- /.t-drive-content-description -->
<div class="t-drive-content-description">
<div class="t-drive-content-headline">
<div class="t-drive-content-icon"><img src="../images/drive/ico07.png" alt=""></div>
<h5 class="t-drive-content-subtitle">タイヤ空気圧の低下</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">タイヤ空気圧が低下しているようです。タイヤの点検をおすすめします。おクルマを購入された販売店等にご相談ください。</p>
</div><!-- /.t-drive-content-description -->
<div class="t-drive-content-description">
<div class="t-drive-content-headline">
<div class="t-drive-content-icon"><img src="../images/drive/ico08.png" alt=""></div>
<h5 class="t-drive-content-subtitle">電気キーの電池消耗</h5>
</div><!-- /.t-drive-content-headline -->
<p class="t-drive-content-readtext">電子キーの電池が消耗しているようです。電子キーの電池の交換をおすすめします。おクルマを購入された販売店等にご相談ください。</p>
</div><!-- /.t-drive-content-description -->
<!-- /.t-drive-content-subitem --></div>
</div><!-- /.t-drive-content-item -->
</div><!-- /.t-drive-content -->
</div><!-- /.t-drive -->
</section>
</body>
ご注意
ご注意は「t-container」クラス内の「t-drive」クラス内に下記を参考に記述してください。
ご注意
- お車の通信環境等により、1回の運転が複数のドライブレポートに分かれて提供される場合があります。
- スコアは速度超過・急アクセル・急ブレーキの「発生回数」ではなく、「発生頻度」に基づいて算出されます。そのため、短い距離の運転の際に1回でも危険な運転挙動があると、スコアが悪くなる場合があります。
- なお、安全運転によるお得額を決めるスコアの計算は、「1か月分の累計の走行結果」に基づきます。当月分のスコアの途中経過は、マンスリーレポートをご確認ください。
<body>
<section class="t-container">
<div class="t-drive">
<div class="t-drive-note">
<h6 class="t-drive-note-title">ご注意</h6>
<ul class="t-list-dots">
<li>お車の通信環境等により、1回の運転が複数のドライブレポートに分かれて提供される場合があります。</li>
<li>スコアは速度超過・急アクセル・急ブレーキの「発生回数」ではなく、「発生頻度」に基づいて算出されます。そのため、短い距離の運転の際に1回でも危険な運転挙動があると、スコアが悪くなる場合があります。</li>
<li>なお、安全運転によるお得額を決めるスコアの計算は、「1か月分の累計の走行結果」に基づきます。当月分のスコアの途中経過は、マンスリーレポートをご確認ください。</li>
</ul>
</div><!-- /.t-drive-note -->
</div><!-- /.t-drive -->
</section>
</body>