HTML 罫線で区切ったメニュー

Question

罫線で区切ったメニュー表を作成しているところです。サイトをまんまコピーペーストしているにも関わらず同じメニュー表を作成することが出来ません。
参考にしているサイトはこちらです。
https://haniwaman.com/parts/post-3820

私が表示されているメニュー表はこちらになります。
・ホーム
・お知らせ
・ブログ
・当サイトについて
・お問い合わせ

どのように変えれば、サイトのメニュー表に変えられますか？
回答宜しくお願い致します。

Comments

[退会済みユーザー]

https://jsfiddle.net/rch0danz/

コピペしたりてないんじゃないの?

Answer 1

index.htmlファイルを作り、以下をコピペしてください。期待どおりになると思います。

<style>
.my-parts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.my-parts ul::after {
	content: "";
	display: block;
	clear: both;
}
.my-parts ul li {
	float: left;
	border-left: 1px solid rgba(0,0,0,.1);
}
.my-parts ul li:first-child {
	border-left: none;
}
.my-parts ul li a {
	display: block;
	padding: .4em .8em;
	text-decoration: none;
	color: #333;
	background: #fff;
	text-align: center;
}
.my-parts ul li a:hover {
	background: #eee;
}
</style>

<nav class="my-parts">
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">お知らせ</a></li>
		<li><a href="#">ブログ</a></li>
		<li><a href="#">当サイトについて</a></li>
		<li><a href="#">お問い合わせ</a></li>
	</ul>
</nav>

おそらく、うまく行かなかった理由はhtmlとcssをどこに書いて良いか、関係性が分からないからかなと思いました。

参考にしているサイトはhtmlとcssを分けて記述していますが、これは説明しやすく簡潔に書いているだけですね。

実際は、

1. htmlファイル一つだけで実現するなら、sytleタグを記述してそこにcssを書かなければならない
2. htmlファイルとcssファイルをそれぞれ作るなら、cssファイルにはサイトに記述しているcssをそのままコピペして、htmlファイルにはサイトに記述しているhtmlファイルをそのままコピペ+cssファイルを読み込む設定を書いてあげないと行けない。

実務などは2を使うことが多いとと思います。が、練習程度であれば1が楽なので1で良いと思います。