teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

コードの追加

2021/08/21 06:54

投稿

Kelvin525
Kelvin525

スコア1

title CHANGED
File without changes
body CHANGED
@@ -17,7 +17,7 @@
17
17
  <head>
18
18
   <meta charset="utf-8">
19
19
   <meta name="viewport" content="width=device-width, initiai-scale=1,shrink-to-fit=no">
20
-  <title>警報・注意報お知らせaibo </title>
20
+  <title>タイトル</title>
21
21
 
22
22
  </head>
23
23
 

1

コードの追加

2021/08/21 06:54

投稿

Kelvin525
Kelvin525

スコア1

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,18 @@
11
11
  ### 該当のソースコード
12
12
 
13
13
  ```HTML
14
+ <!DOCTYPE html>
15
+ <html lang="ja">
16
+
17
+ <head>
18
+  <meta charset="utf-8">
19
+  <meta name="viewport" content="width=device-width, initiai-scale=1,shrink-to-fit=no">
20
+  <title>警報・注意報お知らせaibo </title>
21
+
22
+ </head>
23
+
14
24
  <body>
25
+ <!-- ナビゲーション -->
15
26
  <nav>
16
27
  <ul>
17
28
  <li><a href=”#”>TOP</a></li>
@@ -21,7 +32,15 @@
21
32
  <li> <a href=”#”>CONTACT</a></li>
22
33
  </ul>
23
34
  </nav>
35
+ <!-- ページ概要 -->
36
+ <header>
37
+ <div class="about">
38
+ <h1>ページ概要</h1>
39
+ <img src="~">
40
+ <p class="lead">ページ説明
41
+ <br>ページ説明</p>
24
- </body>
42
+ </div>
43
+ </header>
25
44
  ```
26
45
 
27
46
  ```CSS
@@ -43,9 +62,26 @@
43
62
  nav ul li{
44
63
  list-style: none;
45
64
  display: inline-block;
46
- width: 10%;
65
+ width: 10%;
47
66
  }
48
67
 
68
+ nav ul li a {
69
+ text-decoration: none;
70
+ color: #333;
71
+ }
72
+
73
+ nav li:hover{
74
+ border-bottom: 2px solid #FF7A37;
75
+ }
76
+
77
+ header {
78
+ text-align: center;
79
+ }
80
+
81
+ header p{
82
+ font-size: 1.3em;
83
+ }
84
+
49
85
  ```
50
86
 
51
87
  ### 試したこと