前提
皆さんこんにちは、質問させてください。
以下の同じ方のサイトを参考に「画像を平行にする」、「ナビゲーションを作成する」をやったのですが、
画像を平行にする
メニューバー（ナビゲーション）を作成する
画像の方では、htmlに以下のスクリプトが入っています。
li { list-style: none; }メニューバーの方は、CSSに
list-style: none; が入っています。
やっていくうちにごちゃごちゃしてきて、画像にリンクを貼ったのに、
リンクがつかなくなりました。
どうしたらいいでしょうか？
宜しくお願い致します。
該当のソースコード
css
nav { width: 100; height: 70px; background-color: dimgray ; padding-top: 5px; box-sizing: border-box; position: : fixed; top: 0; left: 0;}ul { display: flex; justify-content: center;}li { list-style: none;} a { display: block; text-decoration: none; color: white; margin-right: 35px ;}a:hover { color: rgb(214, 237, 248);}
実現したいこと
「ナビゲーション」と「画像を平行に並べる」を両方使って、画像にリンクが貼れるようにしたいです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="style.css"> <title>ポートフォリオ</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <body> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="mform1/index.html" target="_blank">お問い合わせ</a></li> <li><a href="#">Portforio</a></li> <li><a href="mform1/index.html">Contact</a></li> </ul> </nav> </header> <ul> <li><img src="HP1/img/hp1.jpg" width="300" height="200"alt="HP1"></li> <li><img src="HP2/img/hp2.jpg" width="300" height="200" alt="HP2"></li> <li><img src="mform1/img/mr1.jpg" width="300" height="200" alt="お問い合わせフォーム"></li> </ul> <style> ul { display: flex; justify-content: center; } li { list-style: none; } li:nth-child(2) { margin: 0 10px; } </body></html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント