質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1378閲覧

下記のように問い合わせフォームの見出し2がある場合、どのようにクラス名をつけますか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/12/14 03:43

下記のように問い合わせフォームの見出し2がある場合、どのようにクラス名をつけますか?

基本的に自分はh1はhedding-primary、その他はhいくつになってもいいように、すべてhedding-section(タグ名ではなく章節という役割の意味)としています。
章節という役割はおそらく、asideでもarticleでも使って問題ないのですよね?

ただ章節とは、もしかすると、asideの補足情報は該当しないでしょうか?
article、sectionは大丈夫でしょうが。
hedding-asideにすべきでしょうか?
おそらくasideもタグ名でなく補足という役割名でしょうから。

<aside id="js-height-adjustment" class="c-inquiry-wrap"> <div class="c-inquiry-inner"> <h2 id="js-inquiry" class="c-long-shadow--white hedding-section">CONTACT</h2>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まず重要な点ですが、hedding ではなく、heading が正しい綴りだと思います。
スペルミスは複数人での作業の場合に混乱の元になるので
気を付けられたほうがいいですよ。

章節という役割はおそらく、asideでもarticleでも使って問題ないのですよね?

ただ章節とは、もしかすると、asideの補足情報は該当しないでしょうか?
article、sectionは大丈夫でしょうが。
hedding-asideにすべきでしょうか?

article、aside、nav、section はいずれもセクショニング・コンテンツを指定するタグです。
article というセクション (書き方を借りるなら章節) を定義していると考えれば、
クラス名に ****-section と付けること自体に違和感はありません。

しかし、aside タグに aside というクラス名を付ける必要は無いと思います。

たとえば、aside タグが右カラムに使われるような場合は、
下記のようなクラス名の命名が想定されます。

HTML

1<aside id="js-height-adjustment" class="c-inquiry-wrap"> 2 <div class="c-inquiry-inner"> 3 <h2 id="js-inquiry" class="sub-form-title">CONTACT</h2>

あと個人的には c-long-shadow--white のように見た目を
クラス名にするのは避けるようにしています。
色などが変わった際にクラス名も変えないといけなくなりますからね。

投稿2016/12/14 05:05

MEBITUS

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/14 05:22

ありがとうございます。 articleでもasideでもsectionでもすべて章節なので、headding-section1さらにその子孫はheadding-section2,3,4であっても全く問題ないのですね。 ただおっしゃる通り、asideは横にある広告に使う可能性はありますね。 その場合はさすがにおかしいでしょうか? 章節とは、メインコンテンツのカラムにある上記タグのみ使えるクラス名ですかね? 横の広告の場合はadvertising-headdingとクラス名を変えたほうがよさそうですね。 いつも汎用性とわかりやすさの境目で悩みますが、これが妥協点でしょうか? 最後に--はmodifierです。
MEBITUS

2016/12/14 06:06 編集

> ただおっしゃる通り、asideは横にある広告に使う可能性はありますね。 > その場合はさすがにおかしいでしょうか? CSS でクラス名を指定する時、 私は要素名を書かないことも多いですが、 aside や article、main、など特定の意味を持つ要素については、 記述してもいいと考えています。 一方で、div や span、p などを指定してしまうと、 予期しない子孫や別ページなどで反映されてしまうことがあるので、 避けています。 つまりそういった場合に、 下記のような記述をすると冗長的になってしまうので、 クラス名にはタグ名を含めないようにしています。 aside.aside-form { } > 横の広告の場合はadvertising-headdingとクラス名を変えたほうがよさそうですね。 この場合も、要素名が aside であれば、 下記のように書けば問題ないと考えています。 /* 副次的 . 広告の - 見出し (和訳) */ aside.advertising-heading { } (※ heading は d が 1 つです!)
退会済みユーザー

退会済みユーザー

2016/12/14 07:48

タグ名自体は私は、再利用性を考えて使わない派なのですが、section-headingというクラス名は、タグを含むという意味だったのですね。 私はすべてクラス名としてというつもりで言っていました。
MEBITUS

2016/12/14 08:13 編集

細かい話になってしまい恐縮ですが…。 タグ名自体は再利用性を考えて使わないというのは私も同じです。 section-heading というクラス名自体も、 下記の理由により、私は特に問題ないと考えています。 まず私は各要素を下記のように分けて考えております。 (※ 結構主観的な分け方です。) ▼ 構造+意味を持たせるタグ (いわゆるセマンティックなマークアップ) main, article, aside, nav, header, footer, mark, strong, em, ol, h1~h6, address, caption, figure, b, i, small …… (※ i や b, small のように HTML5 から特別な意味が付け加えられたタグも含みます。) ▼ 構造を形作るだけのタグ (主に CSS での修飾用に使う要素など) section, div, span, p, a, input, ul, li, dl, dt, dd, table, thead, tbody, tr, th, td, hr, br, img … このうち、構造+意味を持たせるタグについては、 クラス名にタグ名を含めないようにしていますが、 構造を定義するだけのタグの場合は、 クラス名に含めてしまっても問題ないと思います。 section という記述を避けたところで、 container や wrapper といった 同じ意味の単語を使うことになるだけですので…。
退会済みユーザー

退会済みユーザー

2016/12/14 08:24

詳細度をきにしなければたしかにそうかもしれないですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問