BEMってどうよ的な流れ。
闇鍋 @_346_ 前にも BEM の話で疑問に挙げたけど、.foo のクラスを持つ見出しモジュールがあったとして、見出しの横にリンクがついたりすると .foo の親要素として div 等が必要になるわけだけど、その時、BEM の視点からその div にクラスをつけるとしたらどうすべきなのか？ と。 the llama @roatnek @_346_ そのdivが.fooになって.fooだったものが.foo__elementになる。見出しの横に付いたりするリンク（fooのelement）はあったりなかったりするけどそれでいいと思う。 the llama @roatnek BEMは、というかああいう厳密なネーミングルールはJavaScriptから触るとすごく便利。でもそのちょっとしたメリットのために「すべてに名前を付ける罰ゲーム」をやらなあかんのは割に合わんのが実感。
CSS - OOCSS, SMACSS and more
This document provides an introduction to HTML and covers several key topics: 1. It explains what HTML is and that it is the skeleton or structure of web pages, describing elements with markup tags. 2. It reviews important HTML tags like headings, paragraphs, links, images, and lists and how they are used to provide structure and semantics to text. 3. It also discusses other useful tags like comme
SMACSSを日本語版を読んでみました ノート dotgraphy
最終的なアウトプットではなくてその前段階のプロトタイプをコード書きながら作っていくというのが以前からの課題なのですが、どうやっていこうかなぁと考えながら、こもりさんのスライド1を見ていたら、スライドに出てきたSMACSSって何だっけと思って、日本語版2があったので買って読んでみました。@cssradarこと斉藤祐也さんの翻訳で、それだけでポチってしまいました。（そもそも斉藤のブログ3がスタート地点な気がするし。） SMACSS（スマックス）は、Yahoo!のウェブデベロッパ/デザイナのJonathan Snookさんのスタイルガイドで、拡張性のあるプロジェクトでも対応できる、特定のHTML構造に依存せずに、メンテナンスしやすいCSSの書き方をまとめたものです。CSSプリプロセッサで書く場合もOOCSSやSMACSS4の書き方が基本のようで、本書の中でも紹介してありましたが、深い入れ子はたし
Methodology / BEM
Experts recommend BEM Harry Roberts Consultant Front-end Architect I use BEM notation on everything I build now as its usefulness has proved itself over and over. Mark McDonnell Technical Lead, BBC News Itʼs less confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognisable terminology. Connie Chan Design Director, Thoughtbo
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ – T2
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おｋ Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
Modular CSS naming conventions – TheSassWay.com
The more you write your own stylesheets, the more you begin to value using good names in your code. Naming is by far one the most difficult and debated activities of a developer. To many, naming is an art form. Rather than making up my own names I sometimes consult a pattern library like Dan Cederholm’s Pears or a front-end framework like Bootstrap to find a good name for a concept. Naming convent
【クリスマスだし】CSScomb for sublime text 2 CSSプロパティの順序をカスタマイズ【25日目の5】 | DevelopersIO
前回書かせていただいた、記事に引き続き。今回もCSScombを書こうと思います。 アジェンダ どうやってカスタムするの？ カスタムしてみる。 動作を確認してみる。 設定ファイルを作る まとめ どうやってカスタムするの？ 前回までは、プラグインが動作するまでは確認できました。 しかし、プロジェクトごとにコーディング規約があったり、自分なりのcssのプロパティ順序を指定したい場合があると思います。 そこらへんのカスタマイズをsublime text 2の preferences > packeges setting でできるもんだと思ってたんですが。。。キーバインドの設定しかない。。。こまった。 csscomb.phpで編集するみたいです。 ちょっといろいろ探ってみたところ、GitHubのissuesに何やら同じ質問されている方を発見！ https://github.com/miripirun
CSSの content プロパティの便利な使い方いろいろ
今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。 IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。 1. リストの最初の要素に”★new!”を表示する 更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。 デモ See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomoc
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
第45回 CSSのコンポーネント化がもたらすメリット | gihyo.jp
同じ記述の繰り返しを防ぎメンテナンス性や柔軟性を向上 W3Cによって策定された仕様の1つで、HTML／XMLの要素の表示をコントロールするために生まれたのが「CSS」（Cascading Style Sheets）です。HTMLとこのCSSを組み合わせることによって、文書構造（HTML）と見た目の表現（CSS）を切り離すことが可能になるほか、HTMLだけでは実現できないデザインやレイアウトが可能になるといった大きなメリットがあることから、Webサイトの構築やWebアプリケーションの開発において欠かせない技術となっています。 このCSSで現在注目を集めつつあるのが「オブジェクト指向CSS」や「Scalable and Modular Architecture for CSS」（拡張性のあるモジュールアプローチ）といった考え方です。これらは、CSSで記述する内容を「コンポーネント化」するこ
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
CSS3の新機能に触れる - モジュール化とマルチカラムレイアウト
HTML5の周辺技術とは HTML5には、以下の図にあるように、Canvasなどのユーザーインタフェースに関係する仕様から、Web Storageなどのデータに関係した仕様まで、かなり広範な仕様が含まれています。そうした様々な技術により、HTML5は優れたアプリケーションプラットフォームとしても位置づけられるようになりました。 しかし、図の下方に記したように、HTML5には含まれていないものの、HTML5と同時期に多くのWebブラウザでサポートされた有用な技術もあります。本連載では、HTML5の周辺技術といっても良いそうした技術の中から、主にCSS3とSVGに注目していきます（＊）。 （＊）どこまでがHTML5の機能で、どこからが周辺技術か、という区切りは厳密には付けづらいところです。今回扱うCSS3やSVGもひっくるめて広義のHTML5である、という扱い方もできるかと思います。 CSS3
intra-mart Accel Platform Tag Documentation
CSS Module List API Documentation クライアントサイド JavaScript Client Side JavaScript API Client Side JavaScript API (IWP v7.2) スクリプト開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) JavaEE開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) CSSモジュール一覧 CSSモジュール一覧 CSS Sprite CSS Sprite Image List Webサービス IM-Workflow Web サービス (IWP v7.2)
[CSS] モジュール化についてしっくりと理解できないので、ちゃんと考えてみました - YoheiM .NET
こんにちは、@yoheiMuneです。 「CSSのモジュール化」という言葉を聞いたことありますでしょうか？CSSにプログラミングなどにあるモジュール化という概念を当てはめて、 より効率的に、より実装しやすいCSSにしようという考え方です。 この「CSSのモジュール化」について、「それってどーゆう意味？」ということを考えたいと思い、ブログを書きました。 モジュール化とはなに？ 「CSSのモジュール化」という単語を理解するためには、モジュールとは何かを把握する必要があるようです。 グーグル先生に聞くと色々とモジュールの定義が出てきます。以下にはwikipediaから引用した文言を記載します。 モジュール (Module)とは、工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。 引用元：Wikipediaより また
![[CSS] モジュール化についてしっくりと理解できないので、ちゃんと考えてみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/51b4c4398de410543919833f9af84b9a598d1410/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F244.jpg)
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
shame.css – CSS Wizardry
17 April, 2013 shame.css Written by Harry Roberts on CSS Wizardry. Table of Contents The problem The solution Featured case study: NHS Not a blame game The rules Example Implementation Keep track of your hacks! Update: I did a short interview about shame.css with .net magazine. Something Chris Coyier, Dave Rupert and I joked about recently was the idea of a stylesheet dedicated to housing your nas
Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。 | DevelopersIO
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは？ Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは？ XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ？？ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
あなた色に染まるテキストエディタ『SublimeText2』
自分は男の子なもんで、「カスタマイズ」とか「自分仕様」とか「最強」とか、そういう言葉が大好きです。そんな言葉がぴったりで非常に優秀なテキストエディタ『SublimeText2』（以下ST2）というものをご紹介したいと思います。 最近は導入される方も増えてきているようで、導入方法や最低限の基本設定、プラグインの入れ方などはググればたくさん出てきますので、そちらはばっさり省略。自分の方ではこのエディタの魅力を伝え、そして「なんか気になる…使ってみようかな…」と思ってもらえるような記事が書けたらなと思います。（※主にコーダー向きの記事です） 『SublimeText2』のここがイイ！ カラースキーマ いきなり見た目部分のご紹介でアレなんですが…ST2では自分好みにカラースキーマを変更することができます。人によって見やすい色など違ってくると思うので、自分にピッタリなカラースキーマでゴリゴリコードを
Sublime Textでインデントを綺麗に治す方法 | DECONCEPTER
Sublime Textで気軽にコードフォーマットを行う方法を紹介します。 HTML Tidyなどのコードフォーマットプラグインがありますが、htmlやhead要素を自動で挿入してしまい、テンプレート系のファイルをいじっている時に困ります。 デフォルトの機能でフォーマットする機能がありますので、ショートカットを割り当てていつでも簡単に呼び出せるようにします。 整形したい行を選択して、メニューからEdit > Line > Reindentを選択すると親ノードに対してView > Indentation > Tab Widthで選んでる幅に整形されます。 このReindent機能にショートカットを割り当てます。 Sublime Text 2 > Preferences > Key Bindings – Userを選択するとDefault (OSX).sublime-keymapというファイル
Sublime Text 2 のDefault設定ファイルについて
sublimetext_default_settings.md 追記 この記事は古いです...。はてなブログの方に完全版を置いてあります。→ http://blue-ham-cake1024.hatenablog.com/entry/2012/09/07/Sublime_Text_2_のDefault設定ファイルを眺める はてなブログは調子が悪いようなので。 この記事ではDefault設定ファイルにどのような記述がされているか、その記述にどんな意味があるかを一つ一つ見ていきます。実際に設定をカスタマイズしてみたい方は、メニューのPreferencesタブの"Settings - User"からUser設定ファイルを開いてそこでいろいろ試してみましょう。 Sublime Text 2 のDefault設定ファイル 本文 Default設定ファイルとは、Sublime Text のデフォルトの
「Sublime Text」 完全入門ガイド！
こんにちは～ 仕事が恋人のデザイナー、王です φ(≖ω≖｡)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい！ やっと出会えたぞ！僕が探し求めていた幻のエディタに！！ 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう！本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです！ 見た目的には、このように、優雅（Sublime）そのもの！ Mac、Windows、Linux 三大プラットフォームで動くのも嬉しいですな！ 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能
ページ上のブロック要素の高さを揃えるjQueryプラグイン4選まとめ｜BLACKFLAG
Webページ作成時にリストやdivなど連続したブロック要素を並べた際に 中の要素量によって高さがまちまちになってしまった場合 個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。 Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、 ここ最近新たに話題になった高さを揃えるプラグインもいくつかあったので 自分用メモとしてまとめて4つほど紹介してみます。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R 言わずと知れた「to-R」さんの「jquery.heightLine.js」ですが 先日バージョンアップによってレスポンシブ対応され 今まで以上に便利なものになりました。 オプションでは ————————
colorsublime.com - colorsublime リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
サイト訪問者のペルソナを基に検索キーワードを考えてみる（前編：セグメント分け） | Moz - SEOとインバウンドマーケティングの実践情報
インバウンドマーケティングが注目を集めるなか、さまざまなインバウンドマーケティングを試行しているマーケターたちは、より包括的なアプローチでキーワードに取り組むことの重要性に気づき始めている。 検索キーワードは、サイトの構築を完全に終えた後に追加するのではなく、サイトの根幹に組み込んでいくものになりつつある。 この記事では、キーワードを利用することで、ペルソナを活用し、最終的にはサイト構築プロセスの向上につながるような影響を与える手法について、ルース・バーが解説する。 SEOmozファンのみんな、こんにちは。ホワイトボードフライデーにようこそ。私はルース・バー、SEOmozでSEOリーダーを務めている。 今回は、ペルソナを活用して、最終的にサイトマッピングプロセスを向上させるためのキーワードの使い方について話していきたい。 検索キーワードには、サイト構築初期のIAやUXの時点から取り組むべき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Starbucks React Pattern Library
re-dzine.net situs togel online toto 2023 -
東京都近郊｜エッチな出会いサイト【確実にセックスフレンドと会える信頼のサイトランキング】エッチ出会いクリエイト