数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来

先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ

この2つのCSSの違いについてはよく、「visibility: hiddenは空白を残す」ということだけ説明されている。しかし、詳しく説明するとそれ以外の違いもある。 レイアウトへの影響 visibility: hiddenはレイアウトへの影響を残す。 具体的には次の3つ。 要素の表示領域を残す 「要素が生成するボックスのみ残り、要素自体は無くなる」と考えると分かりやすい 要素の表示域が空白になる。 クリックなどのマウスイベントを受け付けなくなる。 子孫要素を表示可 visibility: visibleを指定することで、指定の子孫要素以下を可視化できる。 他の要素への影響を残す marginやfloatなども有効なままで、単に空白を残すだけではない これを利用して、疑似要素と合わせたclearfixがよく使われていた display: noneはその要素の表示と、影響を完全に無くす。 子

styles.css 0� V /** * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units * * To overcome this, create media queries that target the width, height, and orientation of iOS devices. * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing * the height of element `.foo` —which is a full width and height cover image. *

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

これを、 コピペすると、 こうなる。 ・・・ ・・・なんでそんなことが起こるのかと色々考えたけど、調べてみると結局はTwitterの心遣いだった。 い・・・invisible！！！ いんびずぃぼぅ！！ ちょっと感動した。 見習おう。 【追記】jQueryプラグインにしました せっかくなのでjQueryのプラグインにしました。 ダウンロード jquery-twellipsis(Github) 実行サンプル sample(jsbin) Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do wit

CSSの埋め込み方まで詳細に説明している所がなかったのでまとめてみました。 デモプレビュー 書き出しサンプル + デモデータ 一式 1. フォントダウンロード 2. アプリインストール サブセットフォントメーカー WOFFコンバータ OTF → WOFF + EOT WOFF → TTF http://opentype.jp/woffconv.htm 3. サブセット化 サブセットフォントメーカーを使用してフォントをサブセット化しファイルサイズを削減します。 以下、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化すると 16MB→700KB 位になります アスキー文字 !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ

私はここ最近、いわゆるシングルページWebアプリケーションのパフォーマンスの最適化に取り組んでいます。そのアプリケーションは非常に動的かつインタラクティブで、新しいCSS3の利点が詰め込まれたものです。単に角丸やグラデーションの効果にとどまらず、影やグラデーション、要素の変形がふんだんに使われており、加えてtransition効果（時間的変化）や多彩な半透明色、疑似要素をベースにしたCSSの巧妙なトリック、それに実験的なCSSの特徴がちりばめられています。 分析する際には、Javascript/DOM側のボトルネックだけではなく、CSSの領域にも踏み込んでみました。上に挙げたすばらしいUIの要素が、パフォーマンスにどのような影響を及ぼしているかを見たかったからです。このアプリケーションのベースにあるJavascriptのロジックは以前（表面的な装飾のないバージョン）からさほど変わってはいま

日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．

We recently overhauled our payment statement tables for mobile web in Merchant Center. Our goal was to meet the following requirements: No javascript. You can find all sorts of plugins to but it’s nice to go with a pure CSS solution if at all possible. The text must be localized so no storing plain text in the stylesheets, nullifying Chris Coyer’s recommendation though the end result is built upon

・チャイルドセレクタ使えない ・属性セレクタ ・隣接セレクタ ・間接セレクタ ・疑似クラス ・チェインクラス ・display:table-cell IE7 ・親と子の間にHTMLコメントがある場合、チャイルドセレクタは機能しない ・display:table-cell IE8 ・角丸のborder-radiusが使えない ・色と不透明度を同時に指定できるrgbaが使えない ・影をつけるbox-shadowとtext-shadowが使えない ・media max-width min-width が使えない ・:last-child が使えない ・:nth-child() が使えない ・擬似要素を::after(または::before)の書式で書けない ・擬似要素にz-indexがきかない ・擬似要素にfilterがきかない 有名なIE6,7のCSSのバグ doctype宣言(IE6) ・d

infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。 サポートブラウザ 今回サポート対象となったブラウザ（OS）は以下になります。 Safari（iOS） Android Browser（Android） IE（Windowsタブレット） DOCTYPE宣言 HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。 <!DOCTYPE HTML> 現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。 また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。 なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。 iOSのiFrameにお

ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー

セキュリティソリューション事業部からのお知らせ セキュリティソリューション事業部のブログサイトを新たに開設いたしました。 https://blog.sie-security.com/ 今後のセキュリティニュースの投稿は上記URLのサイトからとなります。よろしくお願いいたします。 担当：TY …More Read