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

質問編集履歴

2

質問内容の情報を追加

2020/10/09 02:32

投稿

EleAco
EleAco

スコア15

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,9 @@
1
1
  ![イメージ説明](56a370168c5563607c9972fa39e93229.jpeg)
2
2
  ###ヘッターをdisplay: flexで綺麗に並べたいのですがうまくできません…
3
+ アイコンは左端、タイトルは真ん中、ハンバーガーマークは右端におきたいとと考えています
4
+ 全体の親要素top-page-headerにjustify-content: space-around
5
+ をつけていますが現状PhotoロケのアイコンがPhotoロケアイコンの親要素photoroke-iconからはみ出てしまいます
6
+
3
7
  原因としてヘッターの左にあるアイコンにトップページに戻るようにを指示する為に記述している
4
8
  ####a要素
5
9
  が原因です

1

HTML、CSSのコードを記述、現状のレイアウトを追加

2020/10/09 02:32

投稿

EleAco
EleAco

スコア15

title CHANGED
File without changes
body CHANGED
@@ -3,4 +3,75 @@
3
3
  原因としてヘッターの左にあるアイコンにトップページに戻るようにを指示する為に記述している
4
4
  ####a要素
5
5
  が原因です
6
- 解決策ご存知の方いらっしゃいましたらご回答よろしくお願いいたします!
6
+ 解決策ご存知の方いらっしゃいましたらご回答よろしくお願いいたします!
7
+
8
+ hetena19様よりご指摘いただきましたので情報追加いたします!
9
+ hetena19様ありがとうございます!
10
+
11
+ ```html
12
+ <header>
13
+ <div class='top-page-header'>
14
+ <%#ロゴの情報が入る%>
15
+ <div class='photoroke-icon'>
16
+ <a href="/">
17
+ <img class='photoroke-icon-photo'src="/assets/Photoroke_logo.png">
18
+ <%# <%= link_to image_tag("Photoroke_logo.png",class:"photoroke-icon"),"/" %>
19
+ </a>
20
+ </div>
21
+
22
+ <%#ページの名前が入る%>
23
+ <h2 class='top-page-name'>
24
+ ここに各ページの名前が入ります
25
+ </h2>
26
+
27
+ <%#ハンバーガーアイコンが入る%>
28
+ <p class='hamburger'>tekisuto</p>
29
+ </div>
30
+ </header>
31
+ ```
32
+
33
+ ```CSS
34
+ .top-page-header {
35
+ width: 100vw;
36
+ height: 15vh;
37
+ display: flex;
38
+ background-color:#DDDDDD;
39
+ justify-content: space-around;
40
+ align-items: center;
41
+ position: fixed;
42
+
43
+ }
44
+ /* a{
45
+ box-sizing: border-box;
46
+ text-decoration: none;
47
+ width: 20%;
48
+ margin-left: 5vw; */
49
+
50
+ .photoroke-icon{
51
+ width: 100%;
52
+ margin-left: 5vw;
53
+ height: 100%;
54
+ }
55
+
56
+ .photoroke-icon-photo{
57
+ max-width: 100%;
58
+ }
59
+
60
+ .top-page-name{
61
+ background-color: cornflowerblue;
62
+ height: 50%;
63
+ font-size: 3vh;
64
+ }
65
+
66
+ .hamburger{
67
+ background-color: darkgreen;
68
+ width: 100px;
69
+ height: 50px;
70
+ margin-right: 5vw;
71
+ }
72
+ ```
73
+ 現在のコードはこのようになっています
74
+ 質問させていただいた時と少し形が違いますがまだ解決はできていません。
75
+
76
+ ![![イメージ説明](32aa3853c167f1e00a4da58f2a88162b.png)
77
+ このグレーの帯にアイコン、各ページの名前、ハンバーガーマークを入れたいと考えています