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

質問編集履歴

1

ソースを追加しました

2018/07/06 09:57

投稿

HiakruKuroda
HiakruKuroda

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,77 @@
1
+ ```ここに言語を入力
2
+ コード
3
+ HTML
4
+ <!DOCTYPE html>
5
+ <html>
6
+ <head>
7
+ <meta charset="utf-8">
8
+ <link rel="stylesheet" href="stylesheet.css">
9
+ <title>corp_sample1</title>
10
+ </head>
11
+ <body>
12
+ <header>
13
+ <p>テキストテキストテキストテキストテキスト</p>
14
+ </header>
15
+
16
+ <div class="top1">
17
+ <h1>BAAA Corporation</h1>
18
+ <ul>
19
+ <li>会社概要</li>
20
+ <li>事業紹介</li>
21
+ <li>採用情報</li>
22
+ <li>お問い合わせ</li>
23
+ </ul>
24
+ </div>
25
+
26
+ <img src="top-picture.jpg" class="top-picture">
27
+
28
+ <p class="notice">お知らせ</p>
29
+
30
+ </html>
31
+ </body>
32
+
33
+ css
34
+ header{
35
+ background-color:#4682b4;
36
+
37
+
38
+ }
39
+
40
+ header p{
41
+ color:white;
42
+ padding-left:100px;
43
+ }
44
+
45
+ .top1{
46
+ display:flex;
47
+ }
48
+
49
+ .top1 h1{
50
+ padding-left:100px;
51
+ display: inline-block;
52
+
53
+ }
54
+
55
+ .top1 li{
56
+ list-style:none;
57
+ padding:20px;
58
+ float:left;
59
+ display:inline-block;
60
+ }
61
+
62
+ .top-picture{
63
+ height:350px;
64
+ width:1200px;
65
+ padding-left:100px
66
+ }
67
+
68
+ .notice{
69
+ border-bottom: 2px solid #024881;
70
+ width:900px;
71
+ padding-left:100px;
72
+ }
1
- ![イメージ説明](f7f1adb939b6b4713898804cca25367b.png)
73
+ ```![イメージ説明](f7f1adb939b6b4713898804cca25367b.png)
2
74
  ![イメージ説明](3afe8bbf10ebbe6f66e5b566bfc4d67e.png)
3
75
  HTMLでサンプルをパクって練習をしています。
4
76
  「お知らせ」の下のボーダーラインを1枚目の画像のようにスタート位置を「お知らせ」の下に動かしたいです。
5
- cssでどう記述すれば良いでしょうか?
77
+ cssでどう記述すれば良いでしょうか?
6
-
7
- ```