SMACSS - Scalable and Modular Architecture for CSS (日本語)
SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在においてCSSを使わずにサイトを制作するだろうか!? このアプローチのすべてを活用するのも、部分的に活用するのも、どちらでも最適な方を選んでほしい。もちろん使わなくてもかまわない。このアプローチがすべての人の好みに合わないのは理解できる。ウェブ開発においてほぼすべての質問に対する回答は『時と場合による』だからだ。 Options $ 15.00 CAD - E-book
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
Rails3.1 + SCSS で幸福実現してみる
CSSはWebページにおいて構造とデザインを分離するとても重要な仕組みです。しかし、デザインが複雑になるに連れてどんどん肥大化していき、うまくコントロールしないとメンテナンスが容易ではなくなってしまいます。よく、新しいデザインを追加したと思ったら他のデザインとぶつかってしまったなんてことがあったり、一箇所にクラスの定義がなくバラバラになっていて途方にくれてしまうなんてことはよくあります。 SCSSはこのような悩みをほどよく解決してくれるシンタックスを持つCSS用のメタ言語で、Rails 3.1から採用されました。SCSSについての詳細は、Sass、そしてSassy CSS (SCSS) をご覧ください。 今回は、黒田努氏のはじめる！Rails3(達人出版)のサンプルプログラム:hinagikuで、7.3 スタイルシートの作成に登場するサンプル(public/stylesheets/task
テーブルにスクロールバーをつける
<div style="height:100px; width:300px; overflow-y:scroll;"> <table border=1 height="100" width="300" bgcolor="#9999ff"><tr><td> 表示したいテーブル </td></tr></table> </div> overflow-y:scroll （テーブル横にスクロールバーの表示） overflow-x:scroll （テーブル下にスクロールバーの表示） overflow:scroll （テーブル横・下にスクロールバーの表示） overflow-y:auto （内容に応じて横にスクロールバーの表示） overflow-x:auto （内容に応じて下にスクロールバーの表示） overflow:auto （内容に応じて横・下にスクロールバーの表示）
こーすりゃいいかもviewport
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / スマートフォン用のviewport指定、このいずれかかと思うんだけどどうなんだろう。 リキッドパターン iPhoneの場合、縦の時：幅320px、横の時：幅480pxにviewportが調節される。それ以外の幅のデバイスでは、そのデバイスの幅に合わさってリキッドになる。 user-scalable=noなので、ユーザーによるピンチイン、ピンチアウトのズームが不可能。この時点でかなり嫌だが、これは、iOSが、縦→横にorientationさせた時、ズーム率を自動で調節するという機能を殺すため。（iPhoneであれば縦→横でズーム率が1.5倍になる） この自動ズーム率調節機能がイキでいいのであれば
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
background-imageで設定した背景画像を、上書きで背景画像無しにする方法 - kanonji’s diary
background-image:none; とても単純ですが、こう書きます。 勘違いしてた方法 background-image:url(); どこかで、これでも可能という話を知って、使っていましたが、意図した通り背景画像を消してくれないブラウザがありました。 全然検証はしてませんが、MacのSarafi3では背景画像は消えませんでした。 おかしいと思って、よく調べてみたら、noneが使える事に気がついたという。 読み直したらタイトルが間違ってたので修正。
Stu Nicholls | CSS PLAY | Cross browser CSS slide show
CSS DEMOS › Cross browser CSS slide show Date : 12th April 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. CSS PLAY : SLIDE SHOW Hover the mouse over Set 1, Set 2 or Set 3 above to drop down the projector screen and show a 4x4 array of photographic slides in both portrait and landscape format. Click the mouse on any of these photographic sl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to Animate.css
Heroku Status
screw-axis.com
Mike-O-Matic 損 A CSS Crossfader Demo