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

質問編集履歴

1

headerのソースコードを追加

2020/03/08 12:48

投稿

kazuhito0106
kazuhito0106

スコア8

title CHANGED
File without changes
body CHANGED
@@ -50,4 +50,48 @@
50
50
 
51
51
  ### 補足情報(FW/ツールのバージョンなど)
52
52
 
53
- html5, css3,
53
+ html5, css3,
54
+
55
+ ### 追加ソースコード
56
+ header部分
57
+ ```html5
58
+ <header>
59
+ <div class="container">
60
+ <div class="header-left">
61
+ <img src="./img/logo.png" width="160" height="60" alt="ロゴ">
62
+ </div>
63
+ <div class="header-right">
64
+ <button type="button" class="btn btn-pink">お問い合わせ</button>
65
+ </div>
66
+ </div>
67
+ </header>
68
+ ```
69
+ ```css3
70
+ header {
71
+ height: 90px;
72
+ width: 1280px;
73
+ margin: 0 auto;
74
+ }
75
+
76
+ .container {
77
+ width: 1080px;
78
+ margin: 0 auto;
79
+ }
80
+
81
+ .header-left {
82
+ float: left;
83
+ }
84
+
85
+ .header-left img {
86
+ padding: 15px 0;
87
+ }
88
+
89
+ .header-right {
90
+ float: right;
91
+ }
92
+
93
+ .header-right {
94
+ padding: 21px 0 ;
95
+ }
96
+
97
+ ```