What are the advantages/disadvantages of using the <i> tag for icons instead of <span>?
Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the <i> tag to display icons. However, from the HTML5 spec: The I element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographi
css3 Fillter Effects -webkit-filterを試してみました。
css3ではFillter Effectsも実装予定となっております。 開発用webブラウザ、webkitにて以下の画像を使い検証を行いました。 webkit http://nightly.webkit.org/ 以下の画像を元にcssで変化させます。 -webkit-filter: blur(3px); -webkit-filter:brightness(30%); -webkit-filter:contrast(30%); -webkit-filter:grayscale(); -webkit-filter:sepia(); -webkit-filter: invert(); -webkit-filter: opacity(30%); -webkit-filter: saturate(50%); -webkit-filter:hue-rotate(90deg); -webkit-fil
Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い | Cappee Design
東京でも桜が開花しましたね、@cappeeです。 色々と検証した結果、私も「Normalize.css」を本格導入することにしました。 勘違いしがちなのは、「Normalize.css と リセットCSS どっちがいいの？」ということではなく、この２つはまったく別物なので比較しようがないのです。 Normalize.css を実際使ってみての注意点や、リセットCSSのデメリットなどメモしておきたいと思います。 デフォルトスタイルシート まず、Normalize.css と リセットCSSを説明する前に知っておきたいのが、ブラウザごとに定義されている「デフォルトスタイルシート」です。 CSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。 だたしデフォルトスタイルシートはブラウザによっ
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
指定したサイトのCSSを徹底的に解析してくれるサイト「CSS Stats」 | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita
新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。 Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。 Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる（はずだと筆者は判断している）。 コンテンツファースト アクセシビリティファースト モバイルファースト インブラウザーデザイン といった考え方や手
ウェブ・フォントの読み込み - Weblog - Hail2u.net
ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり、どのようなメリット、そしてデメリットがあるのだろうか。 TypeKit等に頼るにしろ、自前でホスティングするにしろ、もちろん最終的にはウェブ・フォントをブラウザーに送りつける必要がある。読み込みとはまさにその部分の話だ。話がややこしくなるので、多様な実装を意識した安全な書き方などについては触れない。 普通に@font-face定義を利用 @font-face定義をただ普通に書く場合のメリットは、
『StyleDoccoによるCSSスタイルガイドの導入』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、アメーバ事業本部 teens事業部の谷です。業務ではフロントエンドデベロッパーとして、主にHTML/CSSの設計・実装をおこなっています。 今回は、以前斉藤が書いた「モバイル時代におけるCSSの設計と実装」という記事で触れられていたコンポーネントリストもといスタイルガイドについてのお話です。 スタイルガイドの事例と、スタイルガイドを生成するツール StyleDocco の紹介をします。スタイルガイドとは先の記事より引用すると、ページ上の部品（コンポーネント、モジュール）を集めたリスト、ページのことです。どれがコンポーネントで、どれがモジ
チームで扱う「CSS設計」 | MARU-MEMO
覚書です。Web CSS 2014年12月20日 ※この記事は「CSS Architecture Advent Calendar 2014」21日目にエントリーさせていただきました。 せっかくブログを作成したので何か書かせていただこうと思い、「よ～し、この機会にパパ勉強しちゃうぞ！」と張り切って登録したところインフルエンザで寝込んでしまい、あっという前に今日がやってきましたこんにちは。予防接種ってなんだったのかな…？ このカレンダーも今日で21日目なわけですが、「おお！これはいいな！私も参考にしよう！」というものから「うん…うん、うん！なんかすごいのはわかった！（訳：私レベルの人間には難しかった）」まで、興味深い記事が盛り沢山で本当に素晴らしい企画ですね！ ……という感想からもお分かりの通り、私は正直ここに参加して良いレベルの人間ではありませんが、まあ1日くらいは息抜き的な記事があってもい
構造的な CSS のための命名規則とルール（CSS Architecture Advent Calendar 2014：前編） - #tech
これは CSS Architecture Advent Calendar 2014 の20日目の記事です。 昨日は GeckoTang さんでした。 CSS のメンテナンスがどれだけ難しいか、 変更を加える事がどれだけ大変かという問題にぶつかったのは、 自分で作っている WEB サービスの機能拡張をしている時だった。 CSS 上に、ほとんど同じだが、微妙に値の異なるスタイルが溢れかえり、 日々、増え続けていくスタイルの定義に、歯止めをかけることができなかった。 私は、もうそれをコントロールすることができなくなっていた。 結局、そのときの HTML と CSS は、デザイン更新のタイミングで、すべて捨てることになった。 CSS は難しい。 CSS は、記述を冗長にしないようにするための言語機能、 スタイルの影響範囲をコントロールするための言語機能などが不足している為、 そこに一定のルール、思
CSSの詳細度を雑に上書きする - sys9kdr’s diary
CSSの詳細度 詳細度はCSSをメンテナンス・スケールさせるうえでもっともトラブルを生む要因となりうるものの1つです。詳細度を意識せず、適切にCSSを設計しないと、新しくルールセットを作成しても意図したように変更が反映されない、あるいは意図しないところに変更が反映されてしまう問題が生じます。これらの問題は多くの場合、HTML/CSSの書き直しで修正できますが、その場しのぎの修正はより事態を複雑にしメンテナンスコストを高めます。 この記事ではCSSの詳細度(Specificity)、詳細度問題への事前・事後の対処方法について紹介することでよりよい詳細度ライフを皆さんに送っていただくことを目標とします。 CSSはどう適用されるのか CSSでは最も詳細度が高く、一番後ろにあるルールセットをもとに、ある要素のプロパティと値が決まります。 詳細度の算出については後述しますがidよりclassが強いこ
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
スタイルは適度に小さく正確に - CHROMA
CSS Architecture Advent Calendar 2014 の12日目。 SMACSS や BEM など、去年のように新しい CSS の設計手法は今年学ぶ機会が作れなかった。その代わり、いくつかのサイトを作る中で気づいたことや、自分なりに気にかけたことがあるのでそれを書いておこう。 コードを載せたら少し長くなってしまったので、ページ内リンクを貼っておく。 要素本体と変化しやすいスタイルを分ける 表現したい内容を正確に表す ショートハンドは少なめに CSS を書く以上はプロパティや値の扱いを軽視することはできない。もしかしたら設計の話からは逸れているかもしれないが、2つ目と 3つ目ではプロパティや値に注意して書くことで予期した結果が得られるというようなことを書いた。 要素本体と変化しやすいスタイルを分ける 基準となるものは除いて、配置場所によって内容が変化しやすいスタイルは主
少し細かいBEMい話 - Qiita
BEMってむずかしい？ 2014年はたくさんのサイトでBEM 、もといBEMな命名規則が採用されたのではないかとおもってます。（拙著でも取り上げてます。） しかし、実際に導入されているサイトのコードをみてみると、んー、と感じることがあったり、または周りの開発者が、BEMむずかしい、といってるのを聞くことがある。 「これで合ってるの？」 むずかしい、と感じるのはたぶんBlockとElementとの関係やバランス、あとはクッソ名前が長くなってしまうことの不安にあるのではないかと考えてます。 例えば、ふとこのQiitaの記事ページのサイドバーにある、関連投稿モジュールをみてみましょう。 これをどうマークアップするか、どういうセレクタを書くかっていうのは人やプロジェクトによって全然違うし、このパターンがQiitaの中でどのくらい・どのように存在するかで変わります。 ただBEMを意識しはじめたことだ
極力、タイプセレクタを使わない
CSS Architecture Advent Calendar 2014 17日目の記事です。 ぶっちぎってますが、17日目の記事です。 僕は、タイプセレクタ（ E { … } ）をたくさん使うCSSはあまり好きじゃありません。 タイプセレクタを使ったCSS例えばこんなCSSがあったとします。 /*css*/ h1 { font-weight: bold; margin: 0; padding: 0; } header h1 { font-size: 30px; border-bottom: 1px solid #ccc; } article h1 { font-size: 20px; background-color: #ccc; } .subContent h1 { font-size: 18px; } こういったCSSが書かれると僕はおこです。 なぜおこなのかheader要素の中の
px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック Schemaの特徴 Schemaのデモ Schemaの特徴 Schema UI Frameworkの特徴 SchemaはMITライセンスのオープンソースのプロジェクトで、軽量でクリーンなフロントエンド用のフレームワークです。 セマンティックなマークアップ Web標準で、きれいなマークアップが使用されています。 LESSベース
チャットワークがLESSを使う理由 | チャットワーククリエーターズブログ
ChatWork デザイン部の赤堀巴絵です！ ChatWork Advent Calendar５日目を担当します〜。 ご存知の方もいらっしゃると思いますが、チャットワークアプリ側はLESSで運用されています。なんでLESSで運用してるの？と聞かれることがあるのでブログで紹介したいと思います。 チャットワークがLESSを選んだ経緯まずCSSプリプロセッサの導入を社内で検討し導入しようとなった時期が2011年11月頃でした。導入にあたって問題になったことがありました。 社内のOSの開発環境がWinとMacでバラバラ社内でCSSプリプロセッサの知識が浸透していないまず、SassだとみんなにRubyをいれてもらうというハードルがありました。スタイルシートはデザイナーもコーダーもシステムエンジニアも触る状況だったので全員の環境に合わせて構築するのが難しいと考えました。 また、社内でまだCSSプリプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference
SMACSSを参考にしたCSSコーディング規約 - Qiita
Home Page | Cntlog