teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問backgroundからタイトルをはみ出して反映させるには。

編集履歴

質問編集履歴

6

コード表記の修正

2020/12/10 06:47

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -4,16 +4,6 @@
4
4
 
5
5
 
6
6
  ```html
7
- <section class="kv">
8
- <div class="top-main-wrapper">
9
- <img class="logo2" src="img/logo_02.png" alt="TOUMAI LIFE">
10
- <div class="top-main-txt_1">
11
- 　 <p class="ttl_01">タイトル</p>
12
- 　 <p class="ttl_02">タイトル</p>
13
- 　 <p class="ttl_03">タイトル</p>
14
- </div> <!--/top-main-txt1-->
15
- </div><!--/top-main-wrapper-->
16
- </section>
17
7
  　 <section class="top-main-service-wrapper">
18
8
  <div class="top-service-menu">
19
9
  <p class="top-service-ttl-en">SERVICE</p>
@@ -27,20 +17,6 @@
27
17
  </div><!--/.top-main-ttl-1-->
28
18
  </section>
29
19
 
30
- <div class="top-main-news">
31
- <div class="news-box">
32
- <dl>
33
- <dt>2021.01.01<a href="#">お知らせ</a></dt>
34
- <dd>7日間無料メール講座をはじめました</dd>
35
- <dt>2020.12.01<a href="#">お知らせ</a></dt>
36
- <dd>ニュースニュースニュースニュース</dd>
37
- <dt>2020.07.31<a href="#">新着記事</a></dt>
38
- <dd>ニュースニュースニュースニュース</dd>
39
- <dt>2020.04.01<a href="#">お知らせ</a></dt>
40
- <dd>ニュースニュースニュースニュース</dd>
41
- </dl>
42
- </div><!--/news-box-->
43
- </div><!--/top-main-news-->
44
20
  </body>
45
21
  </html>
46
22
  ```

5

コード表記の修正

2020/12/10 06:47

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -4,29 +4,6 @@
4
4
 
5
5
 
6
6
  ```html
7
- <!DOCTYPE html>
8
- <html lang="en">
9
- <head>
10
- <meta charset="UTF-8">
11
-
12
- <title>株式会社TOUMAI│ビジネス・個人 コーチコンサルティング</title>
13
- <link rel="stylesheet" href="css/style.css">
14
- </head>
15
- <body>
16
- <header class="header_a">
17
- <div class="container">
18
- <a href="#"><img class="logo" src="img/logo_03.png" alt="TOUMAI LIFE"></a>
19
- </div><!--/container-->
20
- 　<nav class="nav">
21
- 　 <ul class="links">
22
- <li><a href="#">CONCEPT</a></li>
23
- <li><a href="#">SERVICE</a></li>
24
- <li><a href="#">コラム</a></li>
25
- <li><a href="#">よくある質問</a></li>
26
- <li class="contact"><a href="#">お問い合わせ</a></li>
27
- </ul>
28
- </nav>
29
- </header>
30
7
  <section class="kv">
31
8
  <div class="top-main-wrapper">
32
9
  <img class="logo2" src="img/logo_02.png" alt="TOUMAI LIFE">

4

コード表記の修正

2020/12/10 06:46

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,7 @@
3
3
  「えんのしたのまつしたさん」のタイトルのように、backgroundからはみ出した表現にするにはどう記述したらよいのか。
4
4
 
5
5
 
6
- ``html
6
+ ```html
7
7
  <!DOCTYPE html>
8
8
  <html lang="en">
9
9
  <head>

3

コード表記の修正

2020/12/10 06:45

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -26,9 +26,7 @@
26
26
  <li class="contact"><a href="#">お問い合わせ</a></li>
27
27
  </ul>
28
28
  </nav>
29
-
30
29
  </header>
31
-
32
30
  <section class="kv">
33
31
  <div class="top-main-wrapper">
34
32
  <img class="logo2" src="img/logo_02.png" alt="TOUMAI LIFE">
@@ -49,9 +47,7 @@
49
47
  <span class="top-main-ttl-01">
50
48
  <br>法人向け
51
49
  </span>
52
-
53
50
  </div><!--/.top-main-ttl-1-->
54
-
55
51
  </section>
56
52
 
57
53
  <div class="top-main-news">
@@ -68,10 +64,9 @@
68
64
  </dl>
69
65
  </div><!--/news-box-->
70
66
  </div><!--/top-main-news-->
71
-
72
67
  </body>
73
-
74
68
  </html>
69
+ ```
75
70
 
76
71
  ```css
77
72
  ソースコード
@@ -129,7 +124,7 @@
129
124
  padding: 0 0 400px 0;
130
125
  margin-left: 60px;
131
126
  }
132
-
127
+ ```
133
128
  ### 試したこと
134
129
 
135
130
  ここに問題に対して試したことを記載してください。

2

コード表記の修正

2020/12/10 06:44

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,7 @@
3
3
  「えんのしたのまつしたさん」のタイトルのように、backgroundからはみ出した表現にするにはどう記述したらよいのか。
4
4
 
5
5
 
6
- ### 該当のソースコード
6
+ ``html
7
7
  <!DOCTYPE html>
8
8
  <html lang="en">
9
9
  <head>
@@ -73,7 +73,7 @@
73
73
 
74
74
  </html>
75
75
 
76
- ```ここに言語名を入力
76
+ ```css
77
77
  ソースコード
78
78
  /* サービス　横幅 */
79
79
  .top-main-service-wrapper{

1

コードの追加

2020/12/10 06:42

投稿

rampram0924
rampram0924

スコア2

title CHANGED
File without changes
body CHANGED
@@ -4,10 +4,131 @@
4
4
 
5
5
 
6
6
  ### 該当のソースコード
7
+ <!DOCTYPE html>
8
+ <html lang="en">
9
+ <head>
10
+ <meta charset="UTF-8">
11
+
12
+ <title>株式会社TOUMAI│ビジネス・個人 コーチコンサルティング</title>
13
+ <link rel="stylesheet" href="css/style.css">
14
+ </head>
15
+ <body>
16
+ <header class="header_a">
17
+ <div class="container">
18
+ <a href="#"><img class="logo" src="img/logo_03.png" alt="TOUMAI LIFE"></a>
19
+ </div><!--/container-->
20
+ 　<nav class="nav">
21
+ 　 <ul class="links">
22
+ <li><a href="#">CONCEPT</a></li>
23
+ <li><a href="#">SERVICE</a></li>
24
+ <li><a href="#">コラム</a></li>
25
+ <li><a href="#">よくある質問</a></li>
26
+ <li class="contact"><a href="#">お問い合わせ</a></li>
27
+ </ul>
28
+ </nav>
29
+
30
+ </header>
31
+
32
+ <section class="kv">
33
+ <div class="top-main-wrapper">
34
+ <img class="logo2" src="img/logo_02.png" alt="TOUMAI LIFE">
35
+ <div class="top-main-txt_1">
36
+ 　 <p class="ttl_01">タイトル</p>
37
+ 　 <p class="ttl_02">タイトル</p>
38
+ 　 <p class="ttl_03">タイトル</p>
39
+ </div> <!--/top-main-txt1-->
40
+ </div><!--/top-main-wrapper-->
41
+ </section>
42
+ 　 <section class="top-main-service-wrapper">
43
+ <div class="top-service-menu">
44
+ <p class="top-service-ttl-en">SERVICE</p>
45
+ </div><!--/.top-service-menu-->
46
+ 　<div class="top-main-ttl-1">
47
+ <h2><span class="top-main-ttl-00">
48
+ コンサルティグ</span>
49
+ <span class="top-main-ttl-01">
50
+ <br>法人向け
51
+ </span>
52
+
53
+ </div><!--/.top-main-ttl-1-->
7
54
 
55
+ </section>
56
+
57
+ <div class="top-main-news">
58
+ <div class="news-box">
59
+ <dl>
60
+ <dt>2021.01.01<a href="#">お知らせ</a></dt>
61
+ <dd>7日間無料メール講座をはじめました</dd>
62
+ <dt>2020.12.01<a href="#">お知らせ</a></dt>
63
+ <dd>ニュースニュースニュースニュース</dd>
64
+ <dt>2020.07.31<a href="#">新着記事</a></dt>
65
+ <dd>ニュースニュースニュースニュース</dd>
66
+ <dt>2020.04.01<a href="#">お知らせ</a></dt>
67
+ <dd>ニュースニュースニュースニュース</dd>
68
+ </dl>
69
+ </div><!--/news-box-->
70
+ </div><!--/top-main-news-->
71
+
72
+ </body>
73
+
74
+ </html>
75
+
8
76
  ```ここに言語名を入力
9
77
  ソースコード
78
+ /* サービス　横幅 */
79
+ .top-main-service-wrapper{
80
+ width: 100%;
81
+ position: relative;
82
+ margin-top: 50px;
10
- ```
83
+ }
84
+ /* サービス　全体詳細 */
85
+ .top-service-menu{
86
+ width: 1086px;
87
+ height: 1200px;
88
+ margin: 0 auto;
89
+ display: flex;
90
+ justify-content: space-between;
91
+ position: relative;
92
+ background-color: #fff;
93
+ }
94
+ /* SERVICE フォント */
95
+ .top-service-ttl-en{
96
+ right:60px;
97
+ display: flex;
98
+ align-items: center;
99
+ position: absolute;
100
+ letter-spacing: .05em;
101
+ top: 40px;
102
+ font-size: 1.1rem;
103
+ font-weight: 700;
104
+ }
105
+ /* ─────　横線の配置 */
106
+ .top-service-ttl-en::before {
107
+ margin-right: 20px;
108
+ width: 80px;
109
+ content: '';
110
+ display: block;
111
+ height: 1px;
112
+ background-color: #000
113
+ }
114
+ .top-main-ttl-1{
115
+ position: absolute;
116
+ left: 20px;
117
+ font-size: 50px;
118
+ font-weight: 700;
119
+
120
+ }
121
+ .top-main-ttl-00{
122
+ writing-mode: vertical-rl;
123
+ padding: 0 0 200px 0;
124
+ margin-left: 60px;
125
+
126
+ }
127
+ .top-main-ttl-01{
128
+ writing-mode: vertical-rl;
129
+ padding: 0 0 400px 0;
130
+ margin-left: 60px;
131
+ }
11
132
 
12
133
  ### 試したこと
13
134