サイトコーディングでid名、class名を決定する際の注意点とよく使う名前一覧 | 株式会社WEB企画
コーディング初心者の樋口です。これまで「コーディングってアレでしょ、divとかのやつでしょ。」程度の知識しかなかった私ですが、実際にコーディングを行うようになり多くのことにつまづく毎日です。 今回はその中でも、個人的に悩まされたid、classの名前の付け方について、命名の仕方やその注意点をまとめてみました。 id名、class名を決定する際の基本ルールと落とし穴 まず原則としてこの「id」や「class」は自由に命名することが出来ますが、メンテナンス性の観点から、サイトにおける位置や内容に基づいた英単語を使って命名するのが一般的です。 [例] サイト上部の要素 → #header、#head、#headlineなど 全体を囲う要素 → #wrap、#layoutなど ただこの命名規則に基づいて名前を決めていたにも関わらず、私はid名やclass名の命名に多くの時間を費やしました。その理
CSSの汎用クラスのつかいどころ | inkdesign
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
CSS Nite LP26に行ってきました | Webデザインのタネ
だいぶバタバタした年末年始でしたが、明けましておめでとうございます。今年もマイペースに更新していきますので、どうぞよろしくお願いします。 さて、昨日土曜日はCSS Nite LP26へ行ってきました。今回はCSSプリプロセッサ特集ということでSassやLESS、Stylusを中心に、これからどのような書き方をすれば、大規模サイトでも追加・変更しやすく、しかも軽いサイトにできるのかというお話でした。 僕自身は1年前にSassを使い始めて途中からCompassも使うようになりました。業務でも使っています。ECサイトやランディングページのような売り上げに貢献するためのサイトを作る一方、勤務先がシステム会社なので、いわゆる業務用の管理画面のような使い回せるものも作る機会があります。 今回は「社内でスムーズに使えるようにするには？」ということと、「巧いCSSの書き方って何だろう？」と2つの課題を持っ
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
テンプレートタグ/body class - WordPress Codex 日本語版
説明 WordPress 2.8 から、テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素（通常 header.php にある）に異なる class 属性を付与し、さらに任意の class を追加することもできます。 使い方 <body <?php body_class( $class ); ?>> body_class は、class 属性として次の値を一つ以上表示します。 rtl home blog archive date search paged attachment error404 single postid-(id) attachmentid-(id) attachment-(mime-type) author author-(user_nicenam
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite LP26に行ってきました | Webデザインのタネ
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index