• 締切済み

cssのクラス名のつけ方について

Sublime Textのプラグインの「Goto-CSS-Declaration」 を使えるよいクラス名のつけ方はないでしょうか？ ・クラス名としては良いが、エスケープシーケンスをgotocssが認識しない .u-centering-length\+block { display: block; margin: auto; } ・下記のようなときはどうしますか？180per-remのようにしますか？一見わかりにくくないでしょうか？ .u-fz-1dot8rem{ font-size: 1.8rem !important; } ただそうすると、下記とかぶりやすいですよね。180per-remとすれば違うクラス名にできるのでありでしょうか？ .u-fz-180per{ font-size: 180% !important; }

noname#226032
noname#226032
  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.1

意味を考え内容を表す抽象的な名前を付けましょう。page-title, news-title, news-contents, navilink, copyrightなど。スタイルの値をclass名にするなんてありえないことです。 もう少し文字を大きくしたくなったらどうするのですか？class名もすべて変えるのですか？文字サイズを変更する大中小ボタンを設置することにしたらどうなるのですか？すべて書き換えるのですか？ そのような造りにすると、変更に弱くなってしまいます。そんな造りにしてはいけないのです。そのような造りにするくらいなら、インラインでスタイルを書いたほうがマシです。

noname#226032
質問者

補足

拡張性のことはもちろんcsっ設計の教科書で知っています。 そういうレベルのはなしではないです。 smacssのutilityの話です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • クラス名のネーミング

    スタイルシートでクラス名を宣言してbody内で使う場合は、 クラス名だけ見てどんな動きをするのかわからなくなってしまわないですか？ 例えば、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY .pe { font-size: 200% } --> </STYLE> </HEAD> <BODY> <SPAN class="pe">ｔｅｓｔ</SPAN><Br> </BODY> </HTML> の時、ソースを見たときに、「<SPAN class="pe">って何を宣言してるんだっけな？」と分からなくなり、いちいちスタイルシートの宣言部分を確認しに行っています。 なので、どんな動きをするかわかりやすいクラス名をつけたいのですが、 （例　pe 　→　font-size） ネットでサンプルコードを見ていると、皆動作とは関係ないクラス名をつけてますよね。 わけわかんなくなんないのでしょうか？ こんがらがるのは私だけなのでしょうか？

    • ベストアンサー
    • HTML
  • CSSでクラス名を指定してもうまくいかない

    下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。

    • ベストアンサー
    • CSS
  • スタイルシートなのですが、（important）

    下記のように二つならべてスタイルシートを表記しているものがあります。「important」を優先的に設定させる働きがあるのは調べたのですが、 「important」 をつけたあとに直ぐにまたフォントサイズを設定していますが、優先のあとにある意味はなんでしょうか？ .text12{ font-size:11px!important; font-size:12px; }

    • ベストアンサー
    • HTML
  • CSSの記述方法について

    スタイルシートに以下のような記述がありました。 *html .mainPanel input{margin:-10px 0 0 0;} 例えば、 .largefont{font-size:300%; line-height:100%} といった記述方法なら分かるのですが、 *html　.クラス名 といった記述の意味することは何でしょうか？

    • ベストアンサー
    • HTML
  • ＣＳＳの整理方法

    ＣＳＳの初心者です。 現在、「common.css」にて ***ＣＳＳ内表記*** -------------------- ページ名１ -------------------- td.xxx{ color:#ffffff; font-size:10px; } ---------------------- ページ名２ ---------------------- td.yyy{ color:#ffffff; font-size:10px; } ***ＣＳＳ内表記終わり*** 上記の様に１枚で整理しておりますが、 他に良い表記方法、整理方法はありますでしょうか？ １つのページ内に「td.」クラスが１０個ほどあります。 ちなみに「td.」クラス内の量が１０列ほど、 　　　　 ページ数は現在１０ページほどです。 他に書き方や、書き方の講座の良いＨＰがございましたら 教えて頂けますと助かります。 よろしくお願いいたします。

  • wordpressナビゲーションの固定をしたい

    wordpressテンプレートtwentytwelveを使用しています。 このナビゲーションメニュー（main-navigation）を、リキッドデザインではなく、ブラウザサイズを縮小しても、メニューボタンを縦に改行しないように固定にしたいのですが、方法がわかりません。 いろいろと方法を試したのですが、解決の糸口がつかめません。 どなたかお分かりになる方いらっしゃいますでしょうか？ ----------------------------------------------- /* Assistive text */ .assistive-text, .site .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); } .main-navigation .assistive-text:focus { background: #fff; border: 2px solid #333; border-radius: 3px; clip: auto !important; color: #000; display: block; font-size: 12px; padding: 12px; position: absolute; top: 5px; left: 5px; z-index: 100000; /* Above WP toolbar */ } /* Navigation Menu */ .main-navigation { margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li { margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143; } .main-navigation a { color: #5e5e5e; } .main-navigation a:hover { color: #21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: inline-block; }

    • ベストアンサー
    • CSS
  • ｃｓｓで中央よせ

    CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に 中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--Android 1.6対応--> <style type="text/css"> <!-- div#topCouponSearch { background-image: url("./top_coupon_search_bg.jpg"); display: block; height: 26px; margin-bottom: 1px; width: 100%; } .topCouponSearcha { display: block; font-weight: bold; height: 15px; padding: 5px 0 0 1px; width: 100%; } .topCouponSearcha2 { background-color: #FFFFFF; background-image: url("./spacer.gif"); color: #999999; height: 10px; padding: 3px 0 0; width: 40%; font-size: 10px; } .topCouponSearcha3 { font-size: 11px; font-weight: normal; margin-left: 3px; } button#getad { font-size: 10px; } --> </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>

    • ベストアンサー
    • CSS
  • WordPress レスポンシブテーマのCSS

    http://atsumare.wp.xdomain.jp/ 上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。 クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。 下記のものがスマホ用スタイルシートです。 /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ #main-1 { max-width: 100%; width: 100%; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; padding-left: 5px; padding-right: 5px; box-sizing: border-box; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; height:auto; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin:15px 15px 15px 15px; position:absolute; } /* フッターエリア */ footer { max-width:100%; width:500px; display:block; text-align:center; margin-left:auto; margin-right:auto; } .footer { width:130px; display:inline-block; text-align:left; color: #000; font-size: 10pt; margin-left:auto; margin-right:auto; } small { font-size:10pt; } } どなたかご教示ください。

    • 締切済み
    • CSS
  • Dimensionクラスの使い方

    Javaを始めたばかりの者です。 参考書を読みながら進めていて下記のソースコードで Dimensionクラスを使用している箇所で行き詰まりました。 使われていたのは、以下のコード --------------------------------------------------------------------------------------------------------------------- import java.awt.*; import javax.swing.*; import java.util.*; class xxx{ 　static public void main(String[] argv){ 　/*標準入力からmsgに文字列を入力*/ 　String msg = scan.next(); 　/*JLabelクラス型のオブジェクト型変数を作成し、インスタンスを生成*/ 　JLabel label = new JLabel(msg); 　/*JLabelのインスタンスのコンストラクタに入力されたmsgのサイズを取得*/ 　Dimension dim = label.getPreferredSize(); 　・・・etc 　} } ---------------------------------------------------------------------------------------------------------------------- 自分が今まで使ってきたクラスは下記のような感じで使っていましたが、ここではnewしていない。 これは、どういうことなんでしょうか？ クラス名 dim = new クラス名(); インスタンス作成 = コンストラクタの呼び出し。 new演算子はクラスのコンストラクタを呼び出している理解ですが Dimension dim = label.getPreferredSize(); 上記のコードではDimentionクラスのインスタンスは作られていないということだと思います。 ということは、 ここでは何をしているのでしょうか? どなたか、教えて下さい。

    • ベストアンサー
    • Java
  • cssのclassについて

    よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？ きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する