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

質問編集履歴

1

画像からコード

2019/02/24 03:06

投稿

ntttt
ntttt

スコア49

title CHANGED
File without changes
body CHANGED
@@ -6,9 +6,65 @@
6
6
  ### 該当のソースコード
7
7
 
8
8
  ```ここに言語名を入力
9
+ htlm
10
+ <header>
11
+ <div class="container">
12
+ <img src="https://#" alt="logo" width="164px" height="50px" class="logo">
13
+ <div class="menu">
14
+ <ul class="menus">
15
+ <li><a href="#"><i class="fas fa-flag fa-fw"></i> 特徴</a></li>
16
+ <li><a href="#"><i class="fas fa-book fa-fw"></i> 使い方ガイド</a></li>
17
+ <li><a href="#"><i class="fas fa-cloud-download-alt"></i> ダウンロード</a></li>
18
+ </ul>
19
+ </div>
20
+ </div>
21
+ </header>
22
+ css
23
+ * {
24
+ margin: 0px;
25
+ padding: 0px;
26
+ text-decoration: none;
27
+ cursor: pointer;
28
+ list-style: none;
29
+ }
9
- ソースコード
30
+ body {
31
+ background-color: #e8ece9;
32
+ font-family: "Helvetica","Arial","BIZ UDGothic",YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ",Meiryo,sans-serif;
33
+ }
34
+ table {
35
+ border-collapse: collapse;
36
+ border: none;
37
+ }
38
+ header {
39
+ height: 62px;
40
+ background-color: #58a9ef;
41
+ }
42
+ .container{
43
+ margin: 0 auto;
44
+ width: 1000px;
45
+ }
46
+ img.logo{
47
+ padding: 6px 6px 6px 0px;
48
+ }
49
+ .menu{
50
+ float: right;
51
+ }
52
+ .menus>li{
53
+ list-style: none;
54
+ float: left;
55
+ height: 62px;
56
+ line-height: 62px;
57
+ font-size: 16px;
58
+ padding: 0px 10px;
59
+ }
60
+ .menus>li>a{
61
+ color: #fff;
62
+ transition: .5s
63
+ }
64
+ .menus>li>a:hover{
65
+ border-bottom: 2px solid white;
66
+ }
10
67
  ```
11
- ![htmlとcss](b089d2d47cdd5700ae139f0138003c95.png)
12
68
  ![実際のイメージ画像](790878ebdf50b4f9a42c3d3fc8d000f9.png)
13
69
  ### 試したこと
14
70