【連続記事】プログラミング初心者が作るWebサイト制作 part2 「ヘッダー・アイキャッチ」
皆さんこんにちは、irityannです！
今回は、グローバルナビとヘッダーを作成しようと思います。
パーツ名称などは、こちらのサイトを参考にしました。
まず、Caret modで新規ファイルを作成します。index.htmlとstyle.cssを作成します。
次に、<link href="style.css" rel="stylesheet">でcssファイルをリンクさせます
「ヘッダーを作成」
最初はヘッダー作成です。自分はヘッダーにグローバルナビを入れたいので
埋め込みます。
<h2>
<a href="ファイル名" class="button07">グローバルナビ1</a>
<nav class="crumbs">
<ul style="display: inline;">
<li class="crumb"><a href="ファイル名" class="button02">グローバルナビ2</a></li>
<li class="crumb"><a href="ファイル名" class="button02">グローバルナビ3</a></li>
<li class="crumb"><a href="ファイル名" class="button02">グローバルナビ4</a></li>
</ul>
</nav>
</h2>これはグローバルナビのプログラムです。「class="button07"」や「class="button02"」は自分のサイトのボタンのプログラムのCSSのclassなので気にしないでください。
「a herf=" "」の中にファイル名やサイトのURLを埋め込むと、見せたいページに飛ばすとこができます。
「スライドアイキャッチを作成」
スライドアイキャッチとは、いろいろなサイトに使われている画像が切り替わる広告のようなものです。
これは難しかったので、AIに聞いてしました。
html
<style>
.slideshow-container {
position: relative;
max-width: 800px;
margin: auto;
}
.slide {
display: none;
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* フェードイン効果 */
.fade {
animation: fadeEffect 2s;
}
@keyframes fadeEffect {
from { opacity: 0.4; }
to { opacity: 1; }
}
</style>css
.hero-content {
position: relative;
z-index: 2; /* オーバーレイの上に表示 */
}
.hero-content h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
h3{
text-align: center
}
.button09 {
display: inline-block;
background-color: #fff;
border: solid 2px #0000ff;
color: #0000ff;
border-radius: 10px;
padding: 10px 30px;
text-decoration: none;
font-size: 1em;
transition: all .3s ease 0s;
}このスライドアイキャッチについてはAIに聞いたほうが早いと思うのであまり参考にしないでくださいｗ
個人的な意見ですが、アイキャッチをつけるとサイトっぽくなってかっこいいです。なので皆さんも真似してみてはいかがですか？
Part-2はヘッダーのグローバルナビとスライドアイキャッチについてでした。次は、グローバルナビの項目のページ作成や、bodyについてやっていきます。
最後に、僕は「鉄道&車同好会」というDiscordサーバーをやっています。
鉄道や車が好きな方はもちろん、雑談したい方も大歓迎です！ぜひ参加してください！
上のリンクからぜひ来てください！お待ちしています。
それではまた、次回の投稿でお会いしましょう！