見出し画像

日本一周準備中、10日目

今回も沖縄一周三日目の話をしたいと思います。
二日目と一日目も投稿しておりますので、よかったらそちらから見てください。
沖縄一周、二日目
沖縄一周、一日目

あと、前回もやったように僕のポートフォリオページの進捗も報告したいと思います。
まずポートフォリオページの進捗をご報告します。

今はこのようになっております。

前回とはサイトの形もあんまり変わっておりませんが、Aboutの文を書いたり、このサイトをスクロールするとヘッダーという一番上にある「TSUBASA YAMAGUCHI         ABOUT   ACTIVITIES」がついてくる機能を作っていました。

コードも公開します。

HTML

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<header>
			<a href="#" class="title">TSUBASA YAMAGUCHI</a>
			<nav class="nav">
				<ul class="menu-group">
					<li class="menu"><a href="#">ABOUT</a></li>
					<li class="menu"><a href="#">ACTIVITIES</a></li>
				</ul>
			</nav>
		</header>
			<div class="top">
				<h1>TSUBASA YAMAGUCHI<br>PORTFOLIO</h1>
			</div>
			<div class="sns-group">
				<a href="https://twitter.com/tsubacrafter" target="_blank"><img src="img/twitter.png" alt="Twitter"></a></li>
				<a href="https://note.com/tsubasuchan" target="_blank"><img src="img/note.png" alt="note"></a></li>
				<a href="https://github.com/TsubaCrafter" target="_blank"><img src="img/github.png" alt="github"></a></li>
				<a href="https://www.instagram.com/tsubasu_chan/" target="_blank"><img src="img/instagram.png" alt="instagram"></a></li>
				<a href="https://www.tiktok.com/@tsubasa06090" target="_blank"><img src="img/tiktok.png" alt="tiktok"></a></li>
			</div>
		<div class="main">
			<div class="my-list">
				<div class="about">
					<h1>ABOUT</h1>
					<hr color="#545454" size="1" noshade>
					<h2>山口 翼 - Yamaguchi Tsubasa</h2>
					<p>
						2006年、沖縄県生まれ高校などは行っていなく家で電子工作やアプリ開発、
						音楽などやっております。
						<br>
						僕はゲームも好きでよくネットやゲーム内で知り合った仲間たちと一緒にプレイしています。
						<br>
						特に、
						<a href="https://www.minecraft.net/ja-jp">Minecraft</a>
						というゲームをよくやりまして、2020年の
						<a href="https://minecraftcup.com/" target="_blank">MinecraftCup</a>
						という大会に出場し、そこで最優秀賞を取りました。
						<br>
						今はいろいろと挑戦したく2022年の121日では沖縄一周を自転車でしました。
						今度は日本一周を自転車で計画中です。
						<br>
						
					</p>
				</div>
				<div class="activities">
					<h1>ACTIVITIES</h1>
					<hr color="#545454" size="1" noshade>
				</div>
				<div class="contact">
					<h1>CONTACT</h1>
					<hr color="#545454" size="1" noshade>
				</div>
			</div>
		</div>
		<footer>
			<p>@2022 Tsubasa Yamaguchi</p>
		</footer>
	</body>
</html>

CSS

CSS

body {
	margin:0;
	background-color: #f8f8ff;
}
header {
	position: sticky;
	top:0;
	margin-left:auto;
	margin-right:auto;
	background-color:rgb(248 248 255 / 80%);
	max-width:1000px;
	display: flex;
	width: 100%;
	height: 60px;
	align-items: center;
	font-family:cursive;
	font-weight: bold;
}
.title {
	margin:10px;
	margin-right: auto;
	font-size: 20px;
	color: #545454;
	text-decoration: none;
}
.title:hover {
	color:#a9a9a9;
}
.menu {
	list-style: none;
	display: inline-block;
	margin: 10px;
	font-size: 20px;
}
.menu a{
	color: #545454;
}
.menu a:hover {
	color:#a9a9a9;
}
.top {
	max-width:1000px;
	margin-left: auto; 
	margin-right: auto;
	margin-top:10%;
	text-align:center;
}
.top h1 {
	color:#545454;
	font-family:Palatino Linotype;
	font-size:50px;
	border-bottom: 2px solid gray;
	max-width: 700px;
	margin-left: auto; 
	margin-right: auto;
	margin-bottom:10px;
}
.sns-group {
	position: sticky;
	top:10;
	text-align: center;
	max-width:1000px;
	margin-left: auto; 
	margin-right: auto;
}
.sns-group img {
	height:40px;
	margin-right:20px;
	margin-left:20px;
	display: inline-block;
	opacity: 0.6;
}
.sns-group img:hover {
	opacity: 0.2;
}
.main {
	max-width:1000px;
	margin-left: auto; 
	margin-right: auto;
	list-style: none;
}
.my-list {
	margin-top:60px;
}
.my-list h1 {
	font-size:30px;
	color:#545454;
	text-align:left;
	font-family:cursive;
	margin-bottom:1px;
}
.my-list p {
	font-family:Yu Gothic;
	font-size:18px;
	font-weight: bold;
	color:#545454;
}
.about {
	margin-bottom:100px;
}
.about h2 {
	font-family:Yu Gothic;
	color:#545454;
}
.about a {
	color:#545454;
}
.about a:hover {
	color:#a9a9a9;
}
.activities {
	margin-bottom:1000px;
	
}
.contact {
	margin-bottom:100px;
}
footer {
	background-color:#696969;
	color:#f8f8ff;
	padding: 50;
	text-align:center;
	margin-top:40px;
}

これが僕のポートフォリオページを動かす、HTML,CSSというプログラミングです。

ここで僕のポートフォリオページの進捗、報告を終わります。
続きましては沖縄一周、3日目の話をしようと思います。

僕たちは今大宜味村でおじいちゃんの友達の宿泊所で泊っております。
この時僕たちは旅の疲れで長く寝てしまい起きたら11時になっておりました。
できたら8時か9時に起きて出発する予定でしたが寝坊してしまいました。
そこでおじいちゃんの友達が来て寝起きの僕たちに昼飯なのか朝飯なのかわからないのですが、ご飯を用意してくれました。
ご飯も食べ12時過ぎに僕たちは沖縄地方最北端の辺戸岬に向かう準備をしました。

出発前に宿泊所から撮った写真です。

ここの宿泊所は緑にあふれていて景色もいいのでとてもいいところでした。
そして僕たちは準備を終え、出発をしました。

沖縄一周のルートの国道58号線に行きそこからは自転車で真っ直ぐ目的地へ向かうだけでした。
周りは海だらけで辺戸岬まではまだ30kmもあるところで休憩がてら周辺を回りました。
そして風もよく、映えそうな場所を見つけしばらくそこで休んでいました。

これが映えそうな場所と僕たちの休憩したところです。
こんな感じに休憩をしました。

休憩も終え、気を取り直して辺戸岬へ出発をしました。
だいたい16ぐらいに辺戸岬に到着しました。
そしてしばらく辺戸岬の断崖絶壁を眺めてました。

そして辺戸岬も見終わり、次は宿を探しました。
GoogleMapを見たり調べたりすると、沖縄の安田というところにあるアダガーデンホテルという宿泊所を見つけましたがちょっと問題がありました。
アダガーデンホテルはチェックインが20時ぐらいですし、距離が24kmもあり、今の時間が17時ぐらいで、間に合うかどうかが心配でした。
けどとりあえず行ってみることにしました。
アダガーデンホテルに向かっているときは何もなく緑と山と海しか見えませんで
した。

街頭もないので夜は何も見えませんでした。

そして奇跡的に間に合い20時前につきチェックインできました。
ここで沖縄一周3日目の話は終わります。

長文になってしまいましたがここまで見てくださりありがとうございます。
また明日続きを上げたいと思います。
最後まで見てくださり本当にありがとうございました。
tiktokとツイッター、インスタもやっておりますのでよかったら見てください!!

Twitter
Instagram
TikTok

この記事が気に入ったらサポートをしてみませんか?