回答編集履歴
6
CSSの命名規則について追加
test
CHANGED
|
@@ -98,3 +98,43 @@
|
|
|
98
98
|
↑こんな感じのレイアウトにすれば楽だと思います。
|
|
99
99
|
|
|
100
100
|
もちろんご希望のロゴと横並びにするレイアウトも可能ですが、現在書かれているコードとは違うHTML構造と、CSSにしないといけないと思います。
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
### CSSの命名規則について
|
|
105
|
+
コメント欄にてご質問いただいた、クラス名の「-」と「__」の違いについて回答です。
|
|
106
|
+
|
|
107
|
+
クラス名の付け方って迷うと思うんですけど、なのでいろんな人がルールをつくってくれていて（CSSの命名規則と呼ばれるようです）、BEMとかSMACSSとかが有名です。
|
|
108
|
+
で、私がお送りしたサンプルコードはBEMっぽいルールです。
|
|
109
|
+
|
|
110
|
+
##### 「__」について
|
|
111
|
+
BEMは`.block__element--modifier`というルールです。
|
|
112
|
+
- .block： 要素の塊、大きなくくり
|
|
113
|
+
- __element： 塊の中の一要素
|
|
114
|
+
- --modifier： 修飾語。パターン違い
|
|
115
|
+
|
|
116
|
+
例）
|
|
117
|
+
```html
|
|
118
|
+
<h1>好きなフルーツランキング</h1>
|
|
119
|
+
<ol class="ranking">
|
|
120
|
+
<li class="ranking__item">パパイヤ</li>
|
|
121
|
+
<li class="ranking__item">マンゴー</li>
|
|
122
|
+
<li class="ranking__item">キウイ</li>
|
|
123
|
+
<li class="ranking__item">パイナップル</li>
|
|
124
|
+
</ol>
|
|
125
|
+
|
|
126
|
+
<!-- 見た目ほぼ一緒で色違いの場合 -->
|
|
127
|
+
<button class="btn btn--red">赤色ボタン</button>
|
|
128
|
+
<button class="btn btn--green">緑色ボタン</button>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
##### 「-」について
|
|
132
|
+
ハイフンは単語を繋げたい時に使います！
|
|
133
|
+
例えば、「apple juice」という一つのクラス名をつけたい場合、
|
|
134
|
+
- ❌ `<p class="apple juice">`と書くと、`.apple` `.juice`別のクラスになってしまいます。
|
|
135
|
+
- ▲ `<p class="applejuice">`は読みにくい。
|
|
136
|
+
- ✅ `<p class="apple-juice">`読みやすいし、1つのクラスになる。
|
|
137
|
+
|
|
138
|
+
SMACSSやFLOCSS等はもっと細かくルールが決められているようです。
|
|
139
|
+
より詳しい情報はお調べくださいませ。
|
|
140
|
+
私の命名法は自己流がかなり入っていると思うので正しくないです。
|
5
softer
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
とりあえず無理やりだいたいご希望の見た目にはできましたが、HTMLの構造とCSSの書き方に
|
|
1
|
+
とりあえず無理やりだいたいご希望の見た目にはできましたが、HTMLの構造とCSSの書き方に無理があるので、全体的に最初からやり直すことをおすすめします。
|
|
2
2
|
ご希望であればアドバイスも可能です。
|
|
3
3
|
|
|
4
4
|
見本ではメガメニューが全幅にちゃんとなっている理由は、親要素のwidthが画面に対して100%だからです。
|
|
@@ -97,4 +97,4 @@
|
|
|
97
97
|
```
|
|
98
98
|
↑こんな感じのレイアウトにすれば楽だと思います。
|
|
99
99
|
|
|
100
|
-
もちろんご希望のロゴと横並びにするレイアウトも可能ですが、
|
|
100
|
+
もちろんご希望のロゴと横並びにするレイアウトも可能ですが、現在書かれているコードとは違うHTML構造と、CSSにしないといけないと思います。
|
4
possible
test
CHANGED
|
@@ -96,3 +96,5 @@
|
|
|
96
96
|
-----------------------------------
|
|
97
97
|
```
|
|
98
98
|
↑こんな感じのレイアウトにすれば楽だと思います。
|
|
99
|
+
|
|
100
|
+
もちろんご希望のロゴと横並びにするレイアウトも可能ですが、見本のコードとはかなり違うHTML構造と、CSSにしないといけないと思います。
|
3
全く同じにしたい場合
test
CHANGED
|
@@ -84,3 +84,15 @@
|
|
|
84
84
|
|
|
85
85
|
あと疑問としては、スマホの見た目にした時に、スマホメニューの中身が⭐️2つ分しかなくて、「メニュー、メニュー、メニュー」はないですけど大丈夫ですか？
|
|
86
86
|
「メニュー、メニュー、メニュー」もリンクになるのかなぁと思ったのですが…
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
見本のサイトのHTMLとCSSをほぼそのまま使いたければ
|
|
91
|
+
```
|
|
92
|
+
Logo
|
|
93
|
+
menu menu menu ⭐️ ⭐️
|
|
94
|
+
-----------------------------------
|
|
95
|
+
megamenu megamenu megamenu
|
|
96
|
+
-----------------------------------
|
|
97
|
+
```
|
|
98
|
+
↑こんな感じのレイアウトにすれば楽だと思います。
|
2
remarks
test
CHANGED
|
@@ -81,3 +81,6 @@
|
|
|
81
81
|
|
|
82
82
|
}
|
|
83
83
|
```
|
|
84
|
+
|
|
85
|
+
あと疑問としては、スマホの見た目にした時に、スマホメニューの中身が⭐️2つ分しかなくて、「メニュー、メニュー、メニュー」はないですけど大丈夫ですか？
|
|
86
|
+
「メニュー、メニュー、メニュー」もリンクになるのかなぁと思ったのですが…
|
1
add sample
test
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
とりあえず無理やりだいたいご希望の見た目にはできましたが、HTMLの構造とCSSの書き方にかなり無理があるので、全体的にやり直すことをおすすめします。
|
|
1
|
+
とりあえず無理やりだいたいご希望の見た目にはできましたが、HTMLの構造とCSSの書き方にかなり無理があるので、全体的に最初からやり直すことをおすすめします。
|
|
2
2
|
ご希望であればアドバイスも可能です。
|
|
3
3
|
|
|
4
4
|
見本ではメガメニューが全幅にちゃんとなっている理由は、親要素のwidthが画面に対して100%だからです。
|
|
5
5
|
質問者様のメガメニューの親要素は⭐️の幅しかありませんので、狭くなっちゃってるのです。
|
|
6
|
+
|
|
7
|
+
- 動作確認サンプル：https://jsfiddle.net/0qeko2m8/
|
|
6
8
|
|
|
7
9
|
変更箇所抜粋
|
|
8
10
|
```css
|