クラス名などのHTML、CSSの参考サイトを探しています。

クラス名などのHTML、CSSの参考サイトを探しているのですが、
下記のようなブートストラップのテンプレートが一番信頼度が高いでしょうか？
それとも下記のようなテンプレートは、誰もが勝手に作れるので、製作者の技能もピンキリなので、
もっとよい物がありますでしょうか？

http://coliss.com/articles/build-websites/operation/work/bootstrap-free-themes-2015.html

下記などはどうでしょうか？
http://peterfinlan.com/
http://bootswatch.com/cosmo/

下記はclass="text-center"とあるのであまりちゃんとしていないかなと思っています。
http://www.gettemplate.com/demo/progressus-pro/

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrapの公式サイトにあるドキュメントやファイルそのものを参考にしたら良いのでは？
当たり前のことですが、すべてのBootstrapテーマはBootstrapで作られているわけですから。
ちなみに、これは他のCSSフレームワークでも同様だと思いますよ。

下記はclass="text-center"とあるのであまりちゃんとしていないかなと思っています。

そんな事を言われましても、そのクラスはBootstrapで元々定義されているものなので……。

もしかして、命名規則とCSSフレームワークを同一視してしまっているのでしょうか。

投稿2016/03/17 11:42

flat

総合スコア617

退会済みユーザー

2016/03/17 13:02

見出しにclass="text-center"とついているのですが、ブートストラップではそのようにクラス名が決まっているのですね。見出しはheaddingなどが正しいので、参考になりませんね。 Bootstrapは、クラス名の参考になると聞いたのですが、あまりなりそうにないのですかね。もっと参考になるサイトはありませんか？

flat

2016/03/17 14:31 編集

各CSSフレームワークの公式のドキュメントが参考になると回答しているのですが……。 > 見出しはheaddingなどが正しいので、参考になりませんね。 h要素自体に見出しとしてのスタイルが定義されていれば、そもそもh要素に .heading などというクラスを付ける必要がありません。また、仮に .heading というクラスにして、そこに text-align: center; を適用した場合、左寄せにした見出しが必要になった時に、今度は .heading-left などのスタイルを作らなければいけません。そんな事を繰り返していたら拡張性が損なわれますし、コードが冗長になることで保守性も損なわれます。 CSSフレームワークは開発速度・拡張性・保守性・明瞭性などを重視して作られるものなので、補助的なスタイルが定義されるのは仕方のない事です。どうしても論理構造に基づいたクラス名じゃないと嫌だというのであれば、CSSフレームワークを使わずに自分でクラス名を命名して定義を作るしかありません。 > もっと参考になるサイトはありませんか？「クラス名などの」とタイトルにありますが、表現が曖昧で何を知りたいのか非常に分かり難いです。 CSSフレームワークについてですか？それとも命名規則についてですか？もしくは命名の仕方そのものでしょうか？

退会済みユーザー

2016/03/18 00:21 編集

当たり前のことですが、モディファイヤーで、.heading-left をマルチクラスにしたら良いですね。 CSS設計の教科書にあります。

flat

2016/03/18 04:43

.heading-left は正しくは .heading--left です。申し訳ありません、私の記述ミスです。ただ、私が話しているのは使い回しのきかないクラスを定義しなければならないのは保守性や拡張性が損なわれて非効率的だという話です。ケースバイケースではありますが、部分的に文字の位置を調整するためだけにModifierを追加したりマルチクラスでスタイルを定義するのは、やはり非効率的だと思います。また、私は議論をするために回答をしているわけではありません。上記のコメントも別にあなたを説き伏せたいわけではなく「こういう理由で .text-center というクラスが用意されているんです」と説明しているだけなのですが、誤解を生んでしまったのであれば謝罪します。あと、前のコメントにも書きましたが「クラス名などのHTML、CSSの参考サイト」というと漠然としていてどういう事柄について知りたいのか分かり難いです。私は「セマンティックな構造のウェブサイトを知りたいのかな？」と思って開いたらBootstrapを例に出しているので「あれ、知りたいのはBootstrap(またはCSSフレームワーク)の事だったのかな？」と思って回答したわけですが、何だか認識のズレを感じます。もう少し質問を具体的に書いて下さると助かります。

退会済みユーザー

2016/03/18 05:58

わかりにくくてすいませんでした。お聞きしたいのは、セマンティックな構造のウェブサイトと、クラス名をどうするかいつも迷うので、クラス名が参考になる、プロが見てもしっかりとしているサイトがあればありがたいです。 NHKは良くあがりますが、フロントの人が見てここのソースは非常に良いのでここをまねしていればセマンティックもクラス名もまず問題ないというサイトがあれば教えてください。

flat

2016/03/18 11:19

クラス名については[codic](https://codic.jp/)や[weblio](http://ejje.weblio.jp/)を利用したり、CSSフレームワークなどから該当するクラス名を真似たりする事で大体解決すると思います。「このクラス名は何だか気に入らないなあ」と思ったら、そこは除外したり、別のクラス名にアレンジしたりして気に入った所だけ取り入れるのも良いと思います。また、セマンティックなマークアップという点でもCSSフレームワークは参考になりますよ。 [Bootstrap](http://getbootstrap.com/) [Foundation](http://foundation.zurb.com/) [Pure](http://purecss.io/) [Semantic UI](http://semantic-ui.com/) [Skeleton](http://getskeleton.com/) [Bulma](http://bulma.io/) etc...

退会済みユーザー

2016/03/19 04:52

下記サイトに紹介されているhttps://www.lyft.com/などなら、個人が作ったレベルの高いとは限らないテンプレートとは違い、ツイッター社が作ったクラス名もプロレベルのサイトなのですね。タグの使い方もセマンティックなのですね。 http://getbootstrap.com/ ただ下記のようにものすごい数のマルチクラスにしていることが気になるのですが、このあたりは、ブートストラップの特殊性で、フルスクラッチで行う私は真似しないほうがよいですよね。マルチクラスは5つ以内が良いと聞きます。ほかにもここはまねしないほうが良いということがあれば教えてください。 <span class="h2 text-snow text-book m-x-s m-y-m-sm m-b-s m-r-m-sm" data-reactid=".1r54lhx9w5c.3.2.0.0.0.0">Take the wheel.</span><a href="/click/drive" class="btn btn-clear text-thin border border-snow p-x-l p-y-s bg-screen-hover" data-reactid=".1r54lhx9w5c.3.2.0.0.0.1"><span class="text-snow text-uppercase" data-reactid=".1r54lhx9w5c.3.2.0.0.0.1.0">Drive with Lyft</span></a> ・その他のサイトはdivばかりですが、下記はセマンティックっぽいですね。 http://getskeleton.com/ ダウンロードしてみてみたのですが、ほとんどHTMLのソースコードがないですね。上記ページしかソースはないのでしょうか？

flat

2016/03/19 13:30

> ツイッター社が作ったクラス名もプロレベルのサイトなのですね。彼らは紛うことなきプロであり、Bootstrapで採用されたクラス名は今やデファクトスタンダードになっていると言っても過言ではないくらいです。 > タグの使い方もセマンティックなのですね。マークアップについては「divやspanばっかりで何か嫌だな」と感じたとしても、他にグループ化するための適切な要素がなければdivやspanを使う事は何らおかしな事ではありません。 CSSフレームワークの目的と利点は作業時間の短縮と保守・運用のしやすさです。プログラム全般にも言える事ですが、予測しやすい・保守しやすい・再利用しやすい・拡張しやすいという点はとても大事なのです。コードを見た人が「ああ、ここは文字を .text-center で中央寄せにしてるんだ」とすぐに分かるクラス名であることは、後に修正や変更が必要になった時にCSSを書き換えること無く該当するクラスを外すか別のクラスにするだけで良いため、作業時間を短縮できます。ちなみに、これは作業に携わる人間が自分ひとりであったとしても重要なポイントです。文書構造を基にしてCSSを整理し、セマンティックなウェブサイトを構築したいというのはとても共感できるのですが、現実問題として「ここだけ少しスタイルを変えたい」などの要求がある以上は対応しなければならないので、そのようなクラスが必要になる場面も多々あるわけです。なので、セマンティックという点では「このクラス名、意味じゃなくて装飾・外観を指してる」というところはあるのですが、全てが全てそうというわけではないので、気に入ったところだけを取り入れると良いと思います。(定められたコーディング規約などがあれば話は別です) 取り入れるものも、例えばクラス名の付け方であったり、マークアップの仕方であったり、採用している命名規則やライブラリ(Normalize.cssやjQuery、FontAwesome等々)など、それぞれから良いとこ取りしてしまうと良いでしょう。残念ながら「これさえ押さえておけば完璧！」というものではないのですが、「参考にする」という点においてはCSSフレームワークは中々に良い参考書だと思っています。 > ものすごい数のマルチクラスにしていることが気になるのですがマルチクラスについては設計にもよりますが、大体レイアウトを指定する部分で冗長になりがちです。 IE8やIE9を窓から放り投げることが出来たら、flex-boxでもっと簡単にレイアウトできるんですけどね……。あとはオススメできるかどうかは別として属性セレクタを使って対応する事も出来そうです。 > フルスクラッチで行う私は真似しないほうがよいですよね。マルチクラスをフル活用していますと言わんばかりのレイアウトを避けたいのであれば、[FOX CSS](http://fox-css.com/)の[Grid System](http://fox-css.com/documents/#grid-system)あたりはシンプルなので、この様なシンプルなクラスを採用しているフレームワークを参考にするのも良いと思います。勿論、自分で必要最低限のクラスを定義しても良いです。 > ほかにもここはまねしないほうが良いということがあれば教えてください。あまり思い浮かばないですが、個人的に「これはちょっと……」と思うのがFontAwesomeなどを始めとしたアイコン用の要素です。まず、要素を用いてアイコンを表示させる場合は「とりあえず空のi要素」とするのではなく、きちんと適切な要素を用いて意味のあるテキストを用意します。また、このテキストは前後にあるテキストと繋げても意味が成り立つ文言にする必要があります。しかし、アイコンフォントだと、テキストを視覚的に非表示(display: none; や visibility: hidden; はNGなので小細工が必要です)にして、アイコン(擬似要素)だけを視覚的に見せる事は出来ても、スクリーンリーダーに対してテキストだけを読み上げてもらい、アイコン(Unicode)は読みあげないようにするという方法がありません。実際にはCSS Speech Moduleの speak というプロパティでこれが可能になるはずなのですが、スクリーンリーダー側がこのプロパティに対応していないので実質的に無理です。詳しく書くと非常に長くなるので、スクリーンリーダーについては「アイコンスクリーンリーダー」などで検索して調べてみてください。そんなわけで、FontAwesomeなどのアイコンフォントは便利なのですが、面倒な部分もあるので個人的にはSVGを利用する事をおすすめします。なお、適切なテキストが思い浮かばないときはアイコン用の要素は用いずに background-image などのプロパティを利用してアイコンを表示させると良いです。 ×  <div class="message--warning"> <p><i class="fa fa-exclamation-triangle"></i><strong>この先は熊が出没するため立ち入り禁止です。</strong></p> </div> △  <div class="message--warning"> <p><i class="fa fa-exclamation-triangle">警告。</i><strong>この先は熊が出没するため立ち入り禁止です。</strong></p> </div> △  <div class="message--warning"> <p><i class="fa fa-exclamation-triangle" aria-hidden="true">警告。</i><strong>この先は熊が出没するため立ち入り禁止です。</strong></p> </div> ○  <div class="message--warning"> <p><strong><strong class="sign--signal_warning">警告。</strong>この先は熊が出没するため立ち入り禁止です。</strong></p> </div> 大分長くなってしまいましたが、参考になれば幸いです。また、これ以上は最初の質問内容から大きく外れた内容になってしまうため、こちらでの回答はここまでにしておきます。

退会済みユーザー

2016/03/20 10:01

ありがとうございます。じっくり見せてもらいます。

行動規範の内容に同意します