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

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

ただいまの
回答率

90.52%

  • HTML5

    4966questions

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

html のクラスについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 565

o-ban

score 8

すみません。すごく初歩的な質問で恐縮なんですが、html5のクラスについて教えてください。

先日HPのコードを提出したのですが、「こんな古臭い書き方じゃ今時通用しないよ。」と言われてしまいました。
いろいろ調べたところ、html5になってからPCにも分かりやすい、セマンティックWEBなる考え方でマークアップするようになってるんですね。

個々の要素全てにクラス名を付けて、独立したブロックにして親要素に依存しない書き方をする。ということらしいですが、このクラス名の付け方がよくわからないのです。

古臭いと言われたところはBEMでコードを書いてあるようだったんですが。ほかにもいろいろ記述方法があるみたいで、どれを参考にすればいいのかも分からないし。なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。

こういう記述方法はどこを参考にすればうまくかけるようになるのでしょう。本とかサイトとかあるのでしたら教えていただきたいです。

すみません。すごい素人くさい質問なんですが、独学でWEBデザインの勉強をしているため、他に聞ける人がいないものでこちらで質問させていただきます。よろしくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Zuishin

    2017/03/07 11:59

    誰に言われたのかわかりませんが、極論だと思います。

    キャンセル

  • o-ban

    2017/03/07 12:21 編集

    そうなのですか?でも今の書き方ってil1つ1つにもクラスつけてあったりしますよね?あとnavとかnav navbar navbar-defolt...みたいな感じでやたらクラスついてたりしますよね??あれはなぜなんででしょうか。

    キャンセル

回答 2

checkベストアンサー

+3

私も同じような境遇に陥った人間で、親近感(というと失礼かもしれませんが)を抱いたので、ぜひお助けしたいです。

書籍であればWeb制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法がとてもおすすめです。

なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。 

端的に言ってしまうと、
「一つのクラスやセレクタだけでは表現しきれない。しようとするとコードがスパゲティになる」
と言ったところでしょうか。

また、今はCMSやECなどのフロントエンドとして使うことを考えると、状態に応じて表示が変えやすいというのが利点だと思います。

また、Bemなどを採用することで、それがチームの共通言語ともなり
「あー、このクラスはこの要素のある子要素がこういう状態の時に使うのね」
というのがパッとわかるようになります。

一番それがわかりやすく作られていると思うのが、個人的にはMCSS(Multilayered CSS)です。ソースを読むと、略語はちょっと表を見ないとわからないところではありますが、うまく整理されていることがわかると思います。

余談ですが、私は一応BemとMCSSの合わせ技っぽいのでコーディングしています。ただし個人サイトはまだそう言ったリニューアルはしてません。

それとさらにお節介だと思いますが、ここ最近はCSSを楽に書く仕組みとしてSaSSStylusという「ビルドするとCSSが吐き出せる」仕組みがあったりします。私はStylus派です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/07 12:51

    ありがとうございます!やっぱり最初は分からないものなんですね。安心しました(笑)早速本買って勉強します!!

    キャンセル

  • 2017/03/07 13:28

    わからないものですね。僕も7年前の知識で挑んでいったら「使えない」と言われまして、例の本を勧められたので一読して目からウロコでした。
    なんと言いますか、HTML,CSSはなんとなく書いても形になるのがいいところでもあり、悪いところでもある。で、最近悪いところが顕著に出てきたのでWebコーダーの人たちの間でのみ知識が共有されているという偏見があります。
    なのでバックエンドのプログラマでBemとかMCSSを意識してコーディングできる人って、逆に少ないのではと思ったりします。

    キャンセル

  • 2017/03/07 14:09 編集

    なるほど。コーディングって覚えることが沢山で大変ですけど、thmlもしばらくはバージョンアップしないだろうし、ここが踏ん張りどころと思って頑張ります。まあ、覚えてしまえばこっちのものですしね!

    キャンセル

  • 2017/03/28 11:43

    回答後、色々考えてやっぱりお節介コメントをすることにいたします。

    > なんで1つの要素に2つも3つもクラスがついてるんですか?

    という質問文がちょっと気になったのと、自分も最近個人サイトをリニューアルするときに気づきがあったので。

    最近のコーディングだとBootstrapやZerb FoundationやSemantic UIといったHTML/CSS/JSフレームワークを使ってレイアウトを組むことがありますが、あれらはあくまで *レイアウトを組むだけ* で、自分が望む装飾はまた別に実装する必要があることがままあります。

    そういうことでMCSSではBaseレイヤーCSSにBootstrapを使って、さらに自分のページらしく仕上げるのにProjectレイヤーCSSやCosmeticレイヤーCSSで独自のCSSを組みます。

    さて、なんで一つの要素にいくつもclassがつくようになったのかという話ですが、これはIE10のバグが発端で、IE10ではセレクタを駆使してCSSを指定すると、CSSの優先順位を決める点数が1000点を超えた指定は適応されない。というようなバグがあったらしいです。

    そこでclassは一つの要素に複数付けることが可能なのと、クラス名でその要素の状態や所属などを判別するのが容易な点で、
    「じゃあクラスでうまく装飾するべきじゃね?」
    という風にフロントエンド技術が発展していったものと自分は思います。

    ということで、HTMLやCSSのバージョンだけの話ではなく、その後の保守や改造のしやすい設計をしやすいHTMLやCSSを書くように意識できるようになると、多分他の人も幸せになれると思います。

    今までの(今もかな?)HTMLやCSSは何となくで書いてそれなりに綺麗にかけちゃったのですが、CMSなどのシステムが発展してきた今、バックグラウンドから吐き出したデータを綺麗にするための綺麗なHTML/CSSの実装というのが求められている昨今だと思います。

    と、少し熱く語ってしまいましたが、少しでも「設計も大事」が伝わると幸いです。

    キャンセル

0

プログラミングの勉強でしたら、
Progate リンク内容
ドットインストール リンク内容
あたりが初心者には分かりやすいと思われます。

他にも、「○○ 入門」などとGoogleで検索すれば、たくさん出てきますよ!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/07 12:49

    ありがとうございます。早速のぞいてみます!!

    キャンセル

同じタグがついた質問を見る

  • HTML5

    4966questions

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