はじめてのBEM 勉強会コンテンツ紹介｜yiio
社内で行なった勉強会のコンテンツまとめです。 対象・複数人チームでのWebフロント開発初心者 ・html, css, scss書いたことはある BEMとはなんぞやCSS設計、命名規則のひとつ。わりかしメジャーです。ベムとよみます。 そもそもCSS設計って色々あるけどその違いは？こちらのブログがめちゃわかりやすいです。わたしは小さいWebページならBEMでいいんじゃないかと思います。 BEMのメリット・ブロックは独立パーツなので他のパーツに汚されない ・他の人が書いたクラス名でもだいたいの意図を予測できる ・（BEMに限らないが）命名の方針があることで無駄な時間ロスしない ・ゴツすぎないので取り入れやすい 基本の考え方・Block：デカイくくり ・Element：くくった中にある要素 ・Modifier：上記2つに状態とかのバリエーションつけたいときに使う 例えばこんなかんじのリスト要素があ
プログラミングで変数名や関数名のネーミングに迷ったときに便利なカンニングペーパーまとめ
僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ
アンダースコアとハイフンで効率よいファイル・フォルダ命名方法 | ClockMaker Blog
SEOでは一般的にアンダースコアとハイフンは意味合いが違うと言われています。URL最適化5つのSEOポイント | Web担当者Forumによれば、次の通りの使い分け方法があるようです。 ハイフンとアンダースコアは検索エンジンに対する意味合いが異なります。ハイフンは文字通り単語を分離するために使われる記号なので、ハイフンの前後の単語は個別のキーワードとして認識されます。逆に、アンダースコアは前後の単語を連結するので、アンダースコアも含めた1つのキーワードとして認識されます。 本記事で紹介したいのは、この使い分けはSEO以外でも一般的だということです。試してみたところWindows / Mac でも同様の現象が確認できます。 アンダースコア(_)をつけたファイル名でダブルクリックした場合 アンダースコアは連結された単語と見なされるため、全て選択される ハイフン(-)をつけたファイル名でダブルク
プログラマーが困った時に読むメモ | ファイルの命名規則を考えてみる。
Hi! From "Upgr", in comparison with a standard complete set only on 6 disks in a luggage carrier. Itself has installed Magik System - the domestic signal system with remote and on the timer start. In the winter, and the car spent the night only in the street, it allowed to go without problems in any frost. Before there went on Toyota the Sprinter. Two greaterbig differences. Road Novosibirsk-2
class名のつけ方 | Takazudo Clipping*
デカいサイトでのclass名のつけ方って、すごい難しいと思う。 だけど、CSSいじったりし始めたりした人は、その、すごい難しいってことに気付かないと思う。 別にCSSだけの話じゃなくて、プログラム書くときの関数名とか構造も同じだと思うんだけれど。 ベストなclass名のつけ方は、完全にサイトの構造を把握してないと無理だと思う。 そして、そのサイトに要素が追加されたときにも柔軟に対応できるルールを持ったclass名のネーミングルールが必要だ。 破綻が起きて、CSSが混沌になってしまわないように。 今自分がこれがイケテルーと思うのは、こんなかんじ。 まず、ページで使われる要素を、モジュール化する。 （みんなやっていることだとは思うが） このモジュールの中で使われるclass名は放っておくとして、この、モジュール単位のクラス名が超重要。具体的には、見出しとかリストとか、ナビのリス
HTML CSS ガイドライン – Kangaroonote
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -（ハイフン）を使用親要
Class名とID名の命名規則 | Blog hamashun.com
Class名とID名の命名規則(1) Class名とID名の命名規則(2) Class名やID名を付ける時、それも2単語以上で構成される名前を付ける時には、どんな規則で付けていますか？ 今日は、Class名とID名の命名規則に関して書いてみようと思います。 色んなサイトを見ていると、大きく分けて3つのパターンがあるように思います。 そのまま系 id="maincontent"のように、全て小文字で記述するパターンです。 動作に問題は無いのですけど、可読性の点が若干気になるかもしれません。 ちなみにこのサイトはこのパターンを採用しています。 理由は後述します。 アンダースコア系 id="main_content"のように、単語と単語をアンダースコアで繋ぐパターンです。 可読性は向上しますけど、実はIE3、IE4、NN4.x（MAC）、NN6（初期Ver,）等のブラウザで認識されないバグがあり
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
ある技術者の備忘録 » スタイルシートのクラス名の命名規則
稀に、HTML中に”red”などという名前のクラス名を使ったサイト見かけることがあります。このように見た目をクラス名やID名にすると変更に弱くなり、スタイルシートの適用によって得られる利益が半減してしまうように思います。 例えば、仕事でWebページを製作していたとします。スタイルシートでデザインを別途定義できるようにし、変更にも強くなっています。ですがエラー メッセージに対して適用するクラス名は”error”ではなく”red”になっています。完成が近づいたある日、あなたの顧客や上司が「エラーメッセージ の文字は赤色でなく黄色にしないといけない」と要求してきた場合、変更に対する仕事量はどのくらいになるでしょうか。 全てのHTML中の”red”クラスを”yellow”とするなら、全てのHTMLを見直す必要があります。全てのHTMLをひとつずつ開いて”red”を検索し、それがエラー文字列に対して
スタイルシートのclass、大文字・小文字の違いに注意 [ホームページ作成] All About
スタイルシートのclass、大文字・小文字の違いに注意正しい文法規則では、大文字と小文字は別の文字であると解釈される場面があります。普段、大文字と小文字の違いについて気にしていないと、厳格な文法解釈をされたときに望み通りの表示にならない可能性があります。 大文字・小文字に注意 スタイルシートのクラス名を付ける際、大文字・小文字を意識していますか？ 例えば、コンテンツ（Contents）というクラス名を付けようとした際、 様々な付け方があります。 先頭のみ大文字を使った「Contents」、全部大文字にした「CONTENTS」、全部小文字にした「contents」、 他にも「ConTenTs」など様々な書き方があります。 ※8文字ですから256通りの組み合わせ（書き方）があります。 これらの違いを意識したことはありますか？ 文法に厳しい標準モードでは大文字・小文字が区別される 最近の代表的な
![スタイルシートのclass、大文字・小文字の違いに注意 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
(X)HTML の id/class における命名規則 on CSS Flight - Jun, 15th 2006 (6)
(X)HTML の id/class における命名規則 purprin, <purprin [at] gmail.com> 2006.6.15 at CSS Flight プロフィール 1/2 purprin -「プルプリン」と読みます- コトノハ をきっかけにこの業界に 「purprin」は「パープリン」としか発音できなくね？とこっそり思ってる paperboy&co.所属 I love penguin(o e o)/ プロフィール 2/2 (X)HTML, CSS に魅せられた経緯 もともと Web は大好きで、趣味でひどいテーブルレイアウトのページをつくっていた ２年ほど前に友達に依頼されてつくったサイトでMovable Type を導入して改造をしながら勉強 ある時 HINAGATA で Kaminogoya 君の書く beautiful な(X)HTML+CSS に心奪われる -
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.isoffice.com/index.php?R%27s%20side%2FStartup%20Java%20Programing%2F1_3