新しめのCSS設計まとめ 〜2016年冬〜 - Qiita
最近新たに色々なCSSの設計が提唱されているので、学習を兼ねて簡単にまとめました。 どれも実際に実践してないものばかりなので、表面を舐めたいなくらいの気持ちで読んでください。 ググればもっと詳しく解説してくれている良記事があります。 以降のCSS設計へ影響を及ぼした３大アーキテクチャ 派生したCSSの設計たちは、ほぼこれらの考え方に影響を受けている。 はじめに簡単におさらい。 OOCSS 米Yahoo!のNicole Sulivan氏提唱。 構造と見た目を切り分けて考える。オブジェクト指向型CSS。 .box { width: 100px; height: 100px; } .box-red { background-color: red; } .box-blue { background-color: blue; }
Making of CSS Radar @ Twitter
Making of CSS Radar @ Twitter CSS Radar @ Twitterの(短い)歴史 ほとんど更新されないのがコンセプトのCSS Radarの代わりにTwitterを使って海外のフロントエンドな情報を共有しはじめたのがいつのことだったかはあんまり定かではない。 当の本人は結構やってるんじゃないかと思ったりもするが、きっとそんなことはないのだろう。 紹介する記事のトピックや量は時間の経過と共に変化してきたが、変わらないことが1つだけ。 それはどの記事も必ず読んでから紹介すること。 今年に入って、Gistを使って5件ずつ紹介しはじめたのは、Twitterでは説明しきれていない部分が多すぎると思ったからだ。 (それなりに)長い間、文字数制限に囚われていたので、癖が残ってる部分は多々あるが関連する記事へのリンクや、クオート、そして少しばかり詳しい説明をなるべく入れていこ
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
セレクターのネスト
Sass等のCSSプリプロセッサーではネストを使ってくだくだしい(単に長い)セレクターを意識することなく自然に書けてしまうので、あとでちょっとだけ上書きしようかなとか言う時に面倒なことになったりする。CSSのカスケーディングは魔窟だし！ 特にSassでは@extendでセレクターの順序が変わってハマるなどということもあるので、CSSの感覚にネストを組み合わせて書いていると簡単に破綻する。 つまりCSSプリプロセッサーによるセレクターの抽象化がCSSのセレクターの詳細度と順序を想像しづらくしてしまうということ。もちろんこれはCSSプリプロセッサー側の問題ではなく、ユーザー側がその抽象化プロセスをきちんと理解していないことが原因なんだけど。 また、セレクターのネストはHTMLのネストをそのまま再現するのに使ったりすると把握しやすいのだけど、それだとセレクターを書く手間が少し減る程度の利点しかな
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
ウェブリブログ：サービスは終了しました。
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
CSS 3 Properties and support in Browsers
CSS3 property tests This information is now maintained in our Wiki. Head over and see the latest details, and even contribute yourself. While the assumption has been that the version of Safari in the iPhone is very close to Safari 3 for the Mac and Windows in terms of support for CSS, that does not seem to be the case. While Safari 3 supports just about all of the following properties, at least in
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
Blockquote Examples by CSS-Tricks
Better Blockquotes Blockquote examples By CSS-Tricks [DOWNLOAD EXAMPLE] Blockquotes are html elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take contro
モダンCSSにおける黄金比とは？ | CREAMU
CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne
グラデーション角丸＋リキッドレイアウトをCSSでコーディングする時の考え方 | Blog hamashun.com
追記 2007-11-03 サンプルのDLを追加 ご注意 この記事は、「考え方」を紹介する物です。 「サンプルソースをコピペして使いまわせる！」という類の物ではありませんので、ご注意ください。 魔の角丸 マークアッパーの頭を悩ませるデザインの一つに、角丸があります。 ただの角丸ならまだいいんですが、グラデーションがかかっていて可変幅だったりすると途端に厄介な存在になります。 安直に考えたスライス 厄介さの原因は、画像の枚数の多さです。 グラデ角丸＋可変幅の場合、通常であれば8枚の画像をスライスする事になります。 CSS2.1では1つの要素に指定できる背景画像は1枚だけなので、要素も8つ必要になります。 もちろんdivを8個使ってしまえば実現は容易ですが、その手法は躊躇するべきです。 文書の意味付けにならないdivを増やす事になるので。 考え方とサンプル ではどうするかと言うと、その文書に元
Big Red Angry Text - Accessites.org[要訳] - Trans
Big Red Angry Text - Accessites.org 自分で作ったvalidなサイトとかをほかの人に更新任せておくと、いつの間にか全然validじゃないものになってしまったりするよね。特に、CMSのWYSIWYGとか使ってると。だから、こんなコードをデフォルトのCSSに入れておけばいいんじゃないの？。 コードはこんな感じで。 /* CSS Begin */ font, center, div[align], p[align], table[align], font[color] { color : #cd0000; font-weight : bold; background : #eecc11 url(images/warning.gif) repeat 0 0; margin : 10px; padding : 10px; border : 2px dashed #c
![Big Red Angry Text - Accessites.org[要訳] - Trans](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4627a36743b1ec35b5cc392b6c5b7bbc7dc82b4/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523135%2F1460995386)
CSS+JavaScriptで画像に柔軟なレイアウトを作る。（日本語訳） - Trans
著者: Aaron Gustafson件名: If I Told You You Had a Beautiful Figure...日付: 2007年9月25日URL: http://www.alistapart.com/articles/figurehandler訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[s]. If I Told You You Had a Beautiful Figure... 率直に言って、画像というのは本当にイライラさせる。OK、ところで、たぶん画像自体が問題なのではない。しかし、画像をデザインの中でかちっとレイアウトするのは難しい。画像を使って、うまくコンテンツの意味を訪問者に知らせたいときは、特にそうだ。 もちろん、ちゃ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第27回HTML5とか勉強会 / ウェブデザイナのためのLESS 斉藤祐也 @cssradar
CSSの制作・検証に役立つChromeの機能拡張のまとめ
WordPress テーマ - Vicuna
