これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画） セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。 黎明期 プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。 BootstrapのようなCSS
CSSを書いたり管理したりするにはなんらかの方法論があった方が良い、と広く考えられている。しかし実際に取り入れられている手法の中には、セマンティクス上の品質や、長期にわたるメンテナンス性に悪影響を与えるものもある。ここでは、CSSの「フレームワーク方法論」として提唱されているテクニックの問題点や、その問題を僕たちウェブ・ディベロッパーがどうすれば解決できるかについて論じてみようと思う。 現在、CSS開発におけるフレームワーク方法論として、BEMなど類似のテクニックがいくつかあるが、もっとも有名なのはOOCSSだろう。これらの方法論はCSSにオブジェクト指向プログラミングの原則を適用しようと試みる。しかしながら、両者の間にはそもそも宣言型スタイル言語とオブジェクト指向ソフトウェア設計原則というコンセプト上の不一致がある。その結果、経験の浅いディベロッパーが気づきにくいような複雑な問題を持ち込
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
Twitter殺しなタイトルだ。Firefox NightlyにCSS Conditional Rulesの@supportsが入った。 Bug 649740 - Implement @supports Support for @supports in Firefox Nightly • Cameron McCormack's blog 仕様がまだ初期段階なので、他のベンダーや仕様の動きが思わしくない場合は設定でオフにされる可能性もあるらしいけれど、嬉しいね。 Feature Queries @supportsはCSSのat-ruleで、あるプロパティと値のペアをサポートしている/いない状態にだけ、ブロック内の宣言を適用するというもの。仕様書の例を見るほうが早いか。 @supports ( display: flexbox ) { body, #navigation, #content {
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
Facebookでいろいろ書いてたらそこそこ反響あったのでメモ書き程度にブログに投げておきます CSSフレームワーク、その次の話 Twitter Bootstrapの登場によってCSSフレームワークはこれまで以上に便利なものになったと思う。 でも「Twitter Bootstrap」のようなものはエンジニアが「ダサいUIから脱却するためのもの」からまだ抜け出せていない状況だと思う。 HTML+CSSを書く人としては CSSフレームワークを読むのがまず大変 汎用性のためにある余計なコードを削りたくなる class名がダサい とか色々とあるみたいで使っている人は少ないみたい。 ただ世の中を見ているとそこで世界が止まってしまっている（ように見える） パーツ単位でのコードの共有のようなものはブログで見かけるけど、「これが私の書いた理想のbase.cssだ！」というようなものをほとんど見かけない。
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
CSS Custom Properties for Cascading Variables Module Level 1 W3C Candidate Recommendation Snapshot, 16 June 2022 More details about this document This version: https://www.w3.org/TR/2022/CR-css-variables-1-20220616/ Latest published version: https://www.w3.org/TR/css-variables-1/ Editor's Draft: https://drafts.csswg.org/css-variables/ Previous Versions: https://www.w3.org/TR/2021/CRD-css-variables
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 これまで Closure Library を使っていろいろと開発をしてきましたが、 CSS の扱いについてはいつも不満でした。 JavaScript コードについては Closure Compiler との組み合わせで極限まで最適化できるのに、 CSS についてはほとんどサポートがなく、仕方がないので自作の Rakefile と YUI Compressor を使
2011/09/21 #ESウェブブラウザ通信 前回はESウェブブラウザを使ってグーグルで検索できるようするところまで進めました。今回はESウェブブラウザがAcid1テストをパスするようになったので、その報告です。AcidテストはウェブブラウザのWeb標準への準拠具合を調べる目安として使われているテストページです。最近では先週最新のAcid3テストが改訂されて、Internet Explorer 9.0とFirefox 6.0.2もAcid3をパスした、というニュースが流れていました。今回ESウェブブラウザがパスするようになったAcid1は、今から13年前に作られた最初のAcidテストだそうです。ウェブブラウザがWeb標準を正しく実装していれば、Acid1テストのページは以下の様に表示されます。 リファレンス レンダリング(http://style.cleverchimp.com/boxa
ちまたではPHPのflush()を使ったWordPressのプラグインが話題のようですが、Webサイトの表示速度を改善したかったら、もう少しサイトの作り方を根っこから考えなおした方がいいんじゃないか？、と思いましてね…。 公開されているプラグインにどうこう言うつもりはなく、諸手を挙げて喜んでらっしゃる世間様の様子を見ながら「なんかなぁ…」「入れる前にできることあるんじゃないかな？」と。ちなみにボクも昔flush()での手法を試したことがあるんですけど、結局すぐやめちゃいました。 回線速度自体は昔に比べたら格段にあがってるのは事実ですが、いまとなっては環境としては比較的貧弱なスマートフォンみたいなデバイスも増えています。 サーバの負荷が気になるとか自分とこじゃできないなどの理由で、テキストデータをGzip化（データサイズが半分以下になる）しないのであれば、その他の部分でサイトの全体的な転送デ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
