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

質問編集履歴

1

コードの追加をいたしました。

2021/08/23 01:24

投稿

sawayakaunagi
sawayakaunagi

スコア17

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,37 @@
2
2
  写真のBicycleから下の右側がなぜか空白になってしまいます。なぜでしょうか?
3
3
  ```html
4
4
  コード
5
+ <!DOCTYPE html>
6
+ <html>
7
+ <head>
8
+ <meta charset="utf-8">
9
+ <title>Profile</title>
10
+ <link rel="stylesheet" href="../css/level1.css">
11
+ </head>
12
+ <body>
13
+ <div class="header">
14
+ <div class="header-contents">
15
+ <p class="header-left">Profile</p>
16
+ <div class="header-right">
17
+ <a href="#" class="btn-About" href="#index">About</a>
18
+ <a href="#" class="btn Bicycle" href="#index2">Bicycle </a>
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </div>
23
+ <div class="main">
24
+ <div class="main-contents">
25
+ <div class="main-photo">
26
+ <img src="https://code-step.com/demo/html/profile/img/mainvisual.jpg" alt="bike-image" class="main-image">
27
+ </div>
28
+ <h3 id="index">About</h3>
29
+ <div class="main-icon">
30
+ <img src="https://code-step.com/demo/html/profile/img/about.jpg" alt="icon-image">
31
+ <h4>KAKERU MIYAICHI</h4><br><p>テキストmain</p>
32
+ </div>
33
+ <div class="option">
34
+ <div class="main-intro">
5
- <p id="index2" class="bicycle">Bicycle</p>
35
+ <p id="index2" class="bicycle">Bicycle</p>
6
36
  <div class="intro-image">
7
37
  <img src="https://code-step.com/demo/html/profile/img/bicycle1.jpg" alt="intro-image">
8
38
  <p>タイトルタイトル</p>
@@ -33,6 +63,58 @@
33
63
  ```
34
64
  ```css
35
65
  コード
66
+ .header-contents p btn{
67
+ float: left;
68
+ }
69
+ .header-left{
70
+ padding: 4px 24px;
71
+ background-color: black;
72
+ color: white;
73
+ font-size: 24px;
74
+ float: left;
75
+ }
76
+ .header-right{
77
+ font-size: 16px;
78
+ padding: 32px 16px 0 0;
79
+ display: inline-block;
80
+ float:right;
81
+ color: black;
82
+ }
83
+ .header-right a{
84
+ color: black;
85
+ text-decoration: none;
86
+ padding: 24px 8px 0 0;
87
+ }
88
+ .main-photo img{
89
+ display: block;
90
+ width:100%;
91
+ }
92
+ .main-contents h3{
93
+ text-align: center;
94
+ font-size: 32px;
95
+ padding: 8px 0 8px 0;
96
+ text-decoration:underline;
97
+ text-decoration-thickness: 3px
98
+ }
99
+ .main-icon{
100
+
101
+ }
102
+ .main-icon img{
103
+ height:80px;
104
+ width: 80px;
105
+ border-radius: 50%;
106
+ float: left;
107
+ margin-left: 80px;
108
+ }
109
+ .main-icon h4{
110
+ margin:40px 0 0 184px;
111
+ }
112
+ .main-icon p{
113
+ margin: 0 0 0 184px
114
+ }
115
+ .last{
116
+ width: 100%;
117
+ }
36
118
  .bicycle{
37
119
  font-size: 32px;
38
120
  text-align: center;
@@ -64,5 +146,4 @@
64
146
  .option{
65
147
  position:absolute
66
148
  }
67
-
68
149
  ```