aokashi/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css">
    <link rel="stylesheet" href="style.css">
    <title>旅行記テスト</title>
</head>
<body>

    <header class="header">
        <h1 class="header__title">旅行記テスト</h1>
    </header>

    <div id="page">
        <spot title="ホテル">
            <p>ホテルに忘れ物が無いか確認。ホテルをあとにしました。</p>
            <p>前日五稜郭のグッズを買おうと焦り、五稜郭タワーへ急ぎました。</p>
        </spot>
        <transport
            title="函館市電 5系統 函館どつく前行き"
            type="tram"
            from="五稜郭公園前"
            to="函館駅前"
            start="08:26"
            end="08:42"
        >
            <p>通勤に加えて遠足輸送も兼ねていたのですごく混んでいた。予定より1つ早い便だったが特急に乗れないじゃないかと心配していた。</p>
        </transport>
        <spot title="函館駅">
        </spot>
        <transport
            title="函館本線/室蘭本線 特急スーパー北斗5号 札幌行き"
            :index="22"
            type="train"
            from="函館"
            to="東室蘭"
            start="08:54"
            end="11:12"
        >
            <p>テスト</p>
        </transport>
    </div>

    <script src="./script.js"></script>
</body>
</html>

## script.js
"use strict";

var spot = {
    props: {
        title: {
            type: String,
            required: true
        }
    },
    template: `
        <section class="spot">
            <header class="spot__header header">
                <h2 class="header__text">{{ title }}</h2>
            </header>
            <article>
                <slot></slot>
            </article>
        </section>
`
};

var transport = {
    props: {
        title: {
            type: String,
            required: true
        },
        index: {
            type: Number,
            default: 0
        },
        type: {
            type: String,
            required: true
        },
        from: {
            type: String
        },
        to: {
            type: String
        },
        start: {
            type: String
        },
        end: {
            type: String
        }
    },
    computed: {
        ridingTime: function() {
            var startTime = this.start.split(':');
            var endTime = this.end.split(':');

            var hour = parseInt(endTime[0]) - parseInt(startTime[0]);
            var minute = parseInt(endTime[1]) - parseInt(startTime[1]);
            if (minute < 0) {
                hour--;
                minute += 60;
            }
            return `${hour}:${minute}`;
        }
    },
    template: `
        <section class="transport">
            <header class="transport__header header">
                <div class="header__index" v-if="index != 0">{{ "第" + index + "走者" }}</div>
                <h2 class="header__text">{{ title }}</h2>
                <div class="header__time time">
                    <span class="time__start">{{ from }} {{ start }}</span> →
                    <span class="time__end">{{ to }} {{ end }}</span>
                    <span class="time__time">( {{ ridingTime }} )</span>
                </div>
                <div class="header__comfort"></div>
            </header>
            <article>
                <slot></slot>
            </article>
        </section>
`
}

var page = new Vue({
    el: '#page',
    components: {
        'spot': spot,
        'transport': transport
    },
    methods: {
        date: function(hour, minute) {
            var date = new Date(hour + ":" + minute);
            return {
                hour: date.getHours(),
                minute: date.getMinutes()
            };
        }
    }
});

## style.css
body {
    margin: 1rem;
}

.spot {
    border: 2px solid #c0c0c0;
    border-radius: .5rem;
    margin: 0 .5rem;
    padding: 1rem;
}

.transport {
    border-left: .5rem solid #808080;
    margin: 0 3rem;
    padding: 1rem;
}

.transport__header .header__index,
.transport__header .header__time {
    color: #404040;
    font-size: .85rem;
}

.transport__header .header__text {
    margin: .5rem 0 1rem 0;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css">
	<link rel="stylesheet" href="style.css">
	<title>旅行記テスト</title>
	</head>
	<body>

	<header class="header">
	<h1 class="header__title">旅行記テスト</h1>
	</header>

	<div id="page">
	<spot title="ホテル">
	<p>ホテルに忘れ物が無いか確認。ホテルをあとにしました。</p>
	<p>前日五稜郭のグッズを買おうと焦り、五稜郭タワーへ急ぎました。</p>
	</spot>
	<transport
	title="函館市電 5系統函館どつく前行き"
	type="tram"
	from="五稜郭公園前"
	to="函館駅前"
	start="08:26"
	end="08:42"
	>
	<p>通勤に加えて遠足輸送も兼ねていたのですごく混んでいた。予定より1つ早い便だったが特急に乗れないじゃないかと心配していた。</p>
	</transport>
	<spot title="函館駅">
	</spot>
	<transport
	title="函館本線/室蘭本線特急スーパー北斗5号札幌行き"
	:index="22"
	type="train"
	from="函館"
	to="東室蘭"
	start="08:54"
	end="11:12"
	>
	<p>テスト</p>
	</transport>
	</div>

	<script src="./script.js"></script>
	</body>
	</html>
	"use strict";

	var spot = {
	props: {
	title: {
	type: String,
	required: true
	}
	},
	template: `
	<section class="spot">
	<header class="spot__header header">
	<h2 class="header__text">{{ title }}</h2>
	</header>
	<article>
	<slot></slot>
	</article>
	</section>
	`
	};

	var transport = {
	props: {
	title: {
	type: String,
	required: true
	},
	index: {
	type: Number,
	default: 0
	},
	type: {
	type: String,
	required: true
	},
	from: {
	type: String
	},
	to: {
	type: String
	},
	start: {
	type: String
	},
	end: {
	type: String
	}
	},
	computed: {
	ridingTime: function() {
	var startTime = this.start.split(':');
	var endTime = this.end.split(':');

	var hour = parseInt(endTime[0]) - parseInt(startTime[0]);
	var minute = parseInt(endTime[1]) - parseInt(startTime[1]);
	if (minute < 0) {
	hour--;
	minute += 60;
	}
	return `${hour}:${minute}`;
	}
	},
	template: `
	<section class="transport">
	<header class="transport__header header">
	<div class="header__index" v-if="index != 0">{{ "第" + index + "走者" }}</div>
	<h2 class="header__text">{{ title }}</h2>
	<div class="header__time time">
	<span class="time__start">{{ from }} {{ start }}</span> →
	<span class="time__end">{{ to }} {{ end }}</span>
	<span class="time__time">( {{ ridingTime }} )</span>
	</div>
	<div class="header__comfort"></div>
	</header>
	<article>
	<slot></slot>
	</article>
	</section>
	`
	}

	var page = new Vue({
	el: '#page',
	components: {
	'spot': spot,
	'transport': transport
	},
	methods: {
	date: function(hour, minute) {
	var date = new Date(hour + ":" + minute);
	return {
	hour: date.getHours(),
	minute: date.getMinutes()
	};
	}
	}
	});
	body {
	margin: 1rem;
	}

	.spot {
	border: 2px solid #c0c0c0;
	border-radius: .5rem;
	margin: 0 .5rem;
	padding: 1rem;
	}

	.transport {
	border-left: .5rem solid #808080;
	margin: 0 3rem;
	padding: 1rem;
	}

	.transport__header .header__index,
	.transport__header .header__time {
	color: #404040;
	font-size: .85rem;
	}

	.transport__header .header__text {
	margin: .5rem 0 1rem 0;
	}