ついに完成
やあやあ！みさです。
Webサイト、遂に完成しましたーーーーー！！！
わああああああああ！！！！
まだまだCSS勉強していかないとなって思いました。
これからもWebサイト作っていきます。
とりあえず次はPHPを学習しながら占いアプリなんかを作ってみたいなと思っております。頑張れ私。
完成したWebサイトの画像です。昨日から変わったとこだけ載せます。
表を見やすくしたのと各流星群のページもホームと同じように変えてみました。
あっあと各流星群のページにホームへ戻るボタンを追加しました。
この前できなかった原因は</table>がなかったため<table>タグが終わってなかったからではないかと思われます。
以下ホームページのソース、CSSのソース、各流星群のページのソースです。
ホームページ
<!doctype html>
<
<html>
<head>
<meta charset="UTF-8">
<title>流星群まとめ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<br>
<h1 id="ryuuseigunn">流星群まとめサイトへようこそ</h1>
<br>
<p>このサイトは主な流星群の特徴や時期,極大日をまとめたサイトです。</p>
<p>流星群の眼視観測,電波観測をする際にこちらの情報を役立てていただけたら幸いです。</p>
<br>
<img src="ryuuseigunn.jpg" width="800" height="350" ait="ryuuseigunn">
<h2 id="schedule">流星群スケジュール2017</h2>
<div class="schedule">
<table>
<table border="3">
<tr>
<th>観測時期</th>
<th>極大日</th>
<th>流星群名</th>
</tr>
<tr>
<td> 1月1日～5日 </td>
<td> 1月3日 </td>
<td><a href="しぶんぎ座流星群.htm"> しぶんぎ座流星群 </td>
</tr>
<tr>
<td> 4月16日～25日 </td>
<td> 4月22日 </td>
<td> <a href="4月こと座流星群.htm">4月こと座流星群 </td>
</tr>
<tr>
<td> 4月19日～5月28日 </td>
<td> 5月6日 </td>
<td><a href="みずがめ座η流星群.htm">みずがめ座η流星群</td>
</tr>
<tr>
<td> 5月～7月 </td>
<td> 各流星群による </td>
<td> <a href="昼間流星群.htm">昼間流星群 </td>
</tr>
<tr>
<td> 6月22日～7月22日 </td>
<td> 6月27日 </td>
<td> <a href="うしかい座流星群.htm">うしかい座流星群 </td>
</tr>
<tr>
<td> 7月12日～8月19日 </td>
<td> 7月30日 </td>
<td> <a href="みずがめ座δ流星群.htm">みずがめ座δ流星群 </td>
</tr>
<tr>
<td> 7月3日～8月15日 </td>
<td> 7月31日 </td>
<td> <a href="やぎ座流星群.htm">やぎ座流星群 </td>
</tr>
<tr>
<td> 7月17日～8月24日 </td>
<td> 8月13日 </td>
<td> <a href="ペルセウス座流星群.htm">ペルセウス座流星群 </td>
</tr>
<tr>
<td> 10月6日～10日 </td>
<td> 10月9日 </td>
<td> <a href="りゅう座流星群.htm">りゅう座流星群 </td>
</tr>
<tr>
<td> 10月2日～11月7日 </td>
<td> 10月21日 </td>
<td> <a href="オリオン座流星群.htm">オリオン座流星群 </td>
</tr>
<tr>
<td> 9月25日～11月25日 </td>
<td> 11月上旬 </td>
<td> <a href="おうし座流星群.htm">おうし座流星群 </td>
</tr>
<tr>
<td> 11月10日～23日 </td>
<td> 11月18日 </td>
<td> <a href="しし座流星群.htm">しし座流星群 </td>
</tr>
<tr>
<td> 12月7日～17日 </td>
<td> 12月14日 </td>
<td> <a href="ふたご座流星群.htm">ふたご座流星群 </td>
</tr>
<tr>
<td> 12月17日～26日 </td>
<td> 12月22日 </td>
<td> <a href="こぐま座流星群.htm">こぐま座流星群 </td>
</tr>
</table>
</body>
</html>
各流星群のページ
例:しぶんぎ座流星群
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>しぶんぎ座流星群</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<h1>しぶんぎ座流星群</h1>
<br>
<p>1月1日～1月5日にかけて観測できる流星群</p>
<p>3大流星群の中の1つである</p>
<br>
<ul>
<li>特徴</li>
<p>活動が顕著になるのはピークの頃から数時間程度と短い</p>
<p>放射点北天にあるため事実上北半球でしか観測できない</p>
<br>
<li>観測条件</li>
<br>
<div class="schedule">
<table>
<table border="3">
<tr>
<th>年</th>
<th>電波観測</th>
<th>眼視観測</th>
</tr>
<tr>
<td>2017</td>
<td>〇</td>
<td>〇</td>
</tr>
<tr>
<td>2018</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2019</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2020</td>
<td>×</td>
<td>×</td>
</tr>
</table>
</ul>
<br>
<a href="homepage.htm">ホーム</a>
</body>
</html>
CSSのソース
@charset "UFT-8";
body{
margin:0 0 0 0;
padding:0 0 0 0;
background-color : #afeeee;
}
.wrapper{
margin:0 auto 0 auto;
width:800px;
}
h1{
color:#8b4513;
font-size:48px;
}
h2{
color:#8b4513;
font-size:40px;
}
.schedule{
border-bottom-color:#8b4513
}
.schedule th,.schedule td{
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
}
徐々に完成に近づく
やあやあ！みさです。
今日はバイトから17時30分頃に帰ってきまして外での現場だったからか熱中症なりかけの状態でCSSファイル書いてみました。
やったこととしては背景色の変更、タイトルの色とサイズ変更、画像の挿入、余白設定、中央寄せですかね。
画像のせます。
こんな感じです。homeしかいじってないのでこんな感じ。
明日に表の余白設定、各詳細ページの変更をしたら完成ですかね！！
なんとか明日完成させられそうです。頑張ります。
<!doctype html>
<
<html>
<head>
<meta charset="UTF-8">
<title>流星群まとめ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<br>
<h1 id="ryuuseigunn">流星群まとめサイトへようこそ</h1>
<br>
<p>このサイトは主な流星群の特徴や時期,極大日をまとめたサイトです。</p>
<p>流星群の眼視観測,電波観測をする際にこちらの情報を役立てていただけたら幸いです。</p>
<br>
<img src="ryuuseigunn.jpg" width="800" height="350" ait="ryuuseigunn">
<h2 id="schedule">流星群スケジュール2017</h2>
<table class="schedule">
<table>
<table border="3">
<tr>
<th>観測時期</th>
<th>極大日</th>
<th>流星群名</th>
</tr>
<tr>
<td> 1月1日～5日 </td>
<td> 1月3日 </td>
<td><a href="しぶんぎ座流星群.htm"> しぶんぎ座流星群 </td>
</tr>
<tr>
<td> 4月16日～25日 </td>
<td> 4月22日 </td>
<td> <a href="4月こと座流星群.htm">4月こと座流星群 </td>
</tr>
<tr>
<td> 4月19日～5月28日 </td>
<td> 5月6日 </td>
<td><a href="みずがめ座η流星群.htm">みずがめ座η流星群</td>
</tr>
<tr>
<td> 5月～7月 </td>
<td> 各流星群による </td>
<td> <a href="昼間流星群.htm">昼間流星群 </td>
</tr>
<tr>
<td> 6月22日～7月22日 </td>
<td> 6月27日 </td>
<td> <a href="うしかい座流星群.htm">うしかい座流星群 </td>
</tr>
<tr>
<td> 7月12日～8月19日 </td>
<td> 7月30日 </td>
<td> <a href="みずがめ座δ流星群.htm">みずがめ座δ流星群 </td>
</tr>
<tr>
<td> 7月3日～8月15日 </td>
<td> 7月31日 </td>
<td> <a href="やぎ座流星群.htm">やぎ座流星群 </td>
</tr>
<tr>
<td> 7月17日～8月24日 </td>
<td> 8月13日 </td>
<td> <a href="ペルセウス座流星群.htm">ペルセウス座流星群 </td>
</tr>
<tr>
<td> 10月6日～10日 </td>
<td> 10月9日 </td>
<td> <a href="りゅう座流星群.htm">りゅう座流星群 </td>
</tr>
<tr>
<td> 10月2日～11月7日 </td>
<td> 10月21日 </td>
<td> <a href="オリオン座流星群.htm">オリオン座流星群 </td>
</tr>
<tr>
<td> 9月25日～11月25日 </td>
<td> 11月上旬 </td>
<td> <a href="おうし座流星群.htm">おうし座流星群 </td>
</tr>
<tr>
<td> 11月10日～23日 </td>
<td> 11月18日 </td>
<td> <a href="しし座流星群.htm">しし座流星群 </td>
</tr>
<tr>
<td> 12月7日～17日 </td>
<td> 12月14日 </td>
<td> <a href="ふたご座流星群.htm">ふたご座流星群 </td>
</tr>
<tr>
<td> 12月17日～26日 </td>
<td> 12月22日 </td>
<td> <a href="こぐま座流星群.htm">こぐま座流星群 </td>
</tr>
</table>
</body>
</html>
CSSのソース
@charset "UFT-8";
body{
margin:0 0 0 0;
padding:0 0 0 0;
background-color : #afeeee;
}
.wrapper{
margin:0 auto 0 auto;
width:800px;
}
h1{
color:#8b4513;
font-size:48px;
}
h2{
color:#8b4513;
font-size:40px;
}
HTMLファイル作成の一日
やあやあ！みさです。
今日はとりあえずHTMLファイルを作りまくりました。
ホームとリンクページの画像です。
なんとシンプル！！！
明日と明後日でCSSを用いていろいろ変えてやろうと思ってます。
画像入れてないし背景色も変えたいしね。
あっそういえば各詳細ページにホームに戻れるようにリンクを表の下に入れようとしたらどうやっても表の上にリンクできちゃって困りました
明日そこらへんも考えよう。
明日は早朝4時起きでバイトに行くので寝ます。
以下ソースコード
ホーム
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>流星群まとめ</title>
</head>
<body>
<br>
<h1>流星群まとめサイトへようこそ</h1>
<br>
<p>このサイトは主な流星群の特徴や時期,極大日をまとめたサイトです。</p>
<p>流星群の眼視観測,電波観測をする際にこちらの情報を役立てていただけたら幸いです。</p>
<br>
<h2>流星群スケジュール2017</h2>
<table>
<table border="3">
<tr>
<th>観測時期</th>
<th>極大日</th>
<th>流星群名</th>
</tr>
<tr>
<td> 1月1日～5日 </td>
<td> 1月3日 </td>
<td><a href="しぶんぎ座流星群.htm"> しぶんぎ座流星群 </td>
</tr>
<tr>
<td> 4月16日～25日 </td>
<td> 4月22日 </td>
<td> <a href="4月こと座流星群.htm">4月こと座流星群 </td>
</tr>
<tr>
<td> 4月19日～5月28日 </td>
<td> 5月6日 </td>
<td><a href="みずがめ座η流星群.htm">みずがめ座η流星群</td>
</tr>
<tr>
<td> 5月～7月 </td>
<td> 各流星群による </td>
<td> <a href="昼間流星群.htm">昼間流星群 </td>
</tr>
<tr>
<td> 6月22日～7月22日 </td>
<td> 6月27日 </td>
<td> <a href="うしかい座流星群.htm">うしかい座流星群 </td>
</tr>
<tr>
<td> 7月12日～8月19日 </td>
<td> 7月30日 </td>
<td> <a href="みずがめ座δ流星群.htm">みずがめ座δ流星群 </td>
</tr>
<tr>
<td> 7月3日～8月15日 </td>
<td> 7月31日 </td>
<td> <a href="やぎ座流星群.htm">やぎ座流星群 </td>
</tr>
<tr>
<td> 7月17日～8月24日 </td>
<td> 8月13日 </td>
<td> <a href="ペルセウス座流星群.htm">ペルセウス座流星群 </td>
</tr>
<tr>
<td> 10月6日～10日 </td>
<td> 10月9日 </td>
<td> <a href="りゅう座流星群.htm">りゅう座流星群 </td>
</tr>
<tr>
<td> 10月2日～11月7日 </td>
<td> 10月21日 </td>
<td> <a href="オリオン座流星群.htm">オリオン座流星群 </td>
</tr>
<tr>
<td> 9月25日～11月25日 </td>
<td> 11月上旬 </td>
<td> <a href="おうし座流星群.htm">おうし座流星群 </td>
</tr>
<tr>
<td> 11月10日～23日 </td>
<td> 11月18日 </td>
<td> <a href="しし座流星群.htm">しし座流星群 </td>
</tr>
<tr>
<td> 12月7日～17日 </td>
<td> 12月14日 </td>
<td> <a href="ふたご座流星群.htm">ふたご座流星群 </td>
</tr>
<tr>
<td> 12月17日～26日 </td>
<td> 12月22日 </td>
<td> <a href="こぐま座流星群.htm">こぐま座流星群 </td>
</tr>
</table>
</body>
</html>
詳細ページ
例:しぶんぎ座流星群
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>しぶんぎ座流星群</title>
</head>
<body>
<h1>しぶんぎ座流星群</h1>
<br>
<p>1月1日～1月5日にかけて観測できる流星群</p>
<p>3大流星群の中の1つである</p>
<br>
<ul>
<li>特徴</li>
<p>活動が顕著になるのはピークの頃から数時間程度と短い</p>
<p>放射点北天にあるため事実上北半球でしか観測できない</p>
<br>
<li>観測条件</li>
<br>
<table>
<table border="3">
<tr>
<th>年</th>
<th>電波観測</th>
<th>眼視観測</th>
</tr>
<tr>
<td>2017</td>
<td>〇</td>
<td>〇</td>
</tr>
<tr>
<td>2018</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2019</td>
<td>◎</td>
<td>×</td>
</tr>
<tr>
<td>2020</td>
<td>×</td>
<td>×</td>
</tr>
</ul>
</body>
</html>
