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

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

ただいまの
回答率

90.48%

  • CSS

    6040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

コーディングルールはグーグルのガイドラインなどたくさんありますが、 最新でよいといわれているものはどれだと思いますか?

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 825
退会済みユーザー

退会済みユーザー

コーディングルールはグーグルのガイドラインなどたくさんありますが、
最新でよいといわれているものはどれだと思いますか?

私が知っているのは下記ですが、ほかでもかまいません。

CSS設計の教科書

http://article.enja.io/articles/css-architecture.html

下記は世界で有名なのでしょうか?
https://github.com/kiwanami/CSS-Guidelines

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2016/04/11 18:50

    こちらの質問が他のユーザから「問題・課題が含まれていない質問」という指摘を受けました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

回答 1

+2

上記の設計の中に書かれている内容はモダンなスタイルですので、
どれも選択にはよいと思います。
しかし、一部sassやlessのようなcssメタ言語を用いたルールも含まれています。
BEMはメタ言語を用いた際でないと使用してもただclass名が長くなるだけであまり意味がありません。
htmlの文書構造もシンプルに書けないと当然cssのネストも深くなります。
また
<h1 id="sitetitle></h1>

h1#siteitle {}
とcss中で記述をするのは明らかな設計上のミスです。
sitetitleがh1で必ずしもマークアップするとは限らないからです。

個人的におススメなのはwordpressのデフォルトテーマのマークアップ方法、cssの記述ルールに関しては非常に参考になると思います。
SMACSSやBEMもwebサイトの種類によっては適応しにくい場合もありますので、これが正しいとは一概にいえませんが、なぜそのルールを採用するのがよいか明確な理由があるか考えて記述を行っていくと個人で判断ができるようになると思います。

http://article.enja.io/articles/css-architecture.html
のサイトのcssプリプロセッサより手前に書かれていることはある程度技術のあるコーダーの共通認識であると思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/05 22:52

    ありがとうございます。

    下記でデフォルトのテーマを探したのですが、見つかりませんでした。
    もしご存知でしたらお教えください。
    また下記のような有償テーマもソースコードは完璧に近く参考になるでしょうか?
    https://ja.wordpress.org/themes/commercial/


    また参考のサイトはまさにCSS設計の教科書と同じですね。

    キャンセル

  • 2016/05/05 23:24

    https://ja.wordpress.org/themes/twentysixteen/
    こちらはwordpressのデフォルトテーマになります。
    ブログのようなサイトの構造はマークアップで用意されている要素との相性もよく、手本となります。
    企業サイトの場合はどうしても無理やり要素をhtmlの構造に当てはめるわけですから、デザイン上htmlの要素に適応する箇所に悩むことも慣れるまでは多いかもしれません。

    キャンセル

  • 2016/05/05 23:33 編集

    ご参考に上げて頂いたサイトはheaderやsectionなどのhtml5の要素をdivの代わりに使用しているものも多いので、個人的にはおススメではありません。
    またwordpressのテーマを参考にする場合の注意として、wordpressがphp側で吐き出すclass名のルールになっている点は注意が必要です。
    そもそも完璧という考え方をやめて、ベター程度に考え柔軟性を持った方がコーダーとして仕事に柔軟に対応でき、信用を得られると思います。
    つまり様々な派生系があるのですが、これは駄目といった暗黙の認識がまずあって、あとは要件によって対応とした方がよいです。
    規模の大きなサイトほどコーディングルールは最初の内に決めた方がよいと思います。
    保守性やチームでの運用、可読性など様々な視点から検証が必要ですので、毎回何かテーマを持ってコーディングに望むとよいと思います。
    自分の場合は小規模サイトやLPなどページ数が少ないもので検証したりします。納品後さわらないようなソースであれば、崩れなければ誰も迷惑しないですから。

    キャンセル

  • 2016/05/06 12:41


    https://ja.wordpress.org/themes/default/の
    index.phpを開いた所下記のようなソースが出ました。
    ブラウザでは開けませんでした。

    <?php
    /**
    * @package WordPress
    * @subpackage Default_Theme
    */

    get_header(); ?>

    <div id="content" class="narrowcolumn" role="main">

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time(__('F jS, Y', 'kubrick')) ?> <!-- by <?php the_author() ?> --></small>

    <div class="entry">
    <?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
    </div>

    <p class="postmetadata"><?php the_tags(__('Tags:', 'kubrick') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link(__('No Comments &#187;', 'kubrick'), __('1 Comment &#187;', 'kubrick'), __('% Comments &#187;', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?></p>
    </div>

    <?php endwhile; ?>

    <div class="navigation">
    <div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
    <div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')) ?></div>
    </div>

    <?php else : ?>

    <h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
    <p class="center"><?php _e('Sorry, but you are looking for something that isn&#8217;t here.', 'kubrick'); ?></p>
    <?php get_search_form(); ?>

    <?php endif; ?>

    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    キャンセル

  • 2016/05/06 12:43

    WordPress.orgが制作者の下記テンプレートなら、すべて、ちゃんとしたテンプレなので、
    phpが絡まない部分は参考になるのですね。

    https://ja.wordpress.org/themes/author/wordpressdotorg/

    キャンセル

  • 2016/05/06 12:56

    phpはサーバー側で処理されますから、phpファイルをそのまま開いても駄目ですよ
    https://ja.wordpress.org/themes/author/wordpressdotorg/
    はサーバー側で処理されたphpがhtmlを吐き出しています
    https://thinkit.co.jp/story/2014/06/05/4879
    HPの仕組みのことももう少し勉強しないと駄目ですね

    キャンセル

  • 2016/05/06 15:14

    サーバサイドのスクリプトなので、WEBサーバ上で処理させるのを忘れていました。
    理由は分かりますので、分かっていない訳ではありません。

    ただその処理結果では、HTML5のソースとして参考になるかは微妙ですね。
    ツイッターブートストラップの方が良いかもしれないですね。

    下記はこの認識でよろしいでしょうか?
    >>>
    WordPress.orgが制作者の下記テンプレートなら、すべて、ちゃんとしたテンプレなので、
    phpが絡まない部分は参考になるのですね。

    https://ja.wordpress.org/themes/author/wordpressdotorg/

    キャンセル

関連した質問

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

  • CSS

    6040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • トップ
  • CSSに関する質問
  • コーディングルールはグーグルのガイドラインなどたくさんありますが、 最新でよいといわれているものはどれだと思いますか?