CSSが破綻する4つの理由 - Qiita前回の「破綻しにくいCSS設計の法則 15」は思いがけず大変なご好評をいただきました。ただ書いた当人としては、まとまりに欠けていたように思えましたので、今回はもう少し本質的なところを書いてみたいと思います。 CSSとは実際のところ何か CSSが破綻する理由 破綻しないCSS設計とは 1. CSSとは実際のところ何か CSSはJSONと同様にシンプルなフォーマットで、基本的には以下のような構造になっています。
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
Susy: Responsive grids for Compass
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea
何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使います。 $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style : 上から順番に 何カラム使うか。上では１２カラム。 １カラムあたりの幅はどれだけか。 カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。 グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたい
視覚整形モデル - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
WAH LAU! CSS CAN BE TESTED TOO!
This is a talk presented on 18 May 2012 at RedDotRubyConf, SG. ----- Your stylesheets are always in a mess. How can you fix this? The answer: TEST YOUR CSS! Then you will be able to refactor your CSS with confidence! Also presenting a Proof of Concept CSS Testing Framework, Cactus, which I have created - http://www.github.com/winston/cactus.
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
RubyMotion で Nimbus CSS を使ってみる - satococoa's blog
Nimbus? 最近 新Google Mapsアプリ採用のフレームワーク NimbusKit がいい感じ で話題になった NimbusKit というフレームワークに興味を持ってちらっと調べてみたのですが、なんと CSS でアプリの View の定義ができるらしいということがわかりました。 しかも、CSS を変更するとリアルタイムにその変更が反映されるそうじゃないですか！ デモ動画はこちらです。 さっそく、RubyMotion からも使えるか、試してみました。 インストール 普通に motion-cocoapods でインストールできます。 Rakefile にこんな感じに書いて、いつも通り$ rakeでOKです。 1 2 3 app.pods do pod 'Nimbus' end コード Nimbus CSS 関連のコードだけ貼ります。基本的には公式のドキュメントの Nimbus: Ni
新Google Mapsアプリ採用のフレームワーク NimbusKit がいい感じ | fladdict
iPhoneの新しいGoogle Mapsのアプリ、色々弄り倒してますがステキな感じ。 でこれひょっとして、「NimbusKit使ってない？」って思ったら、案の定で使ってた。 NimbusKitはiOS用のヘルパークラスと、コンポーネントと、デバッグツールの集合体。 以下のような機能がサクサクとつけられる。 CSSスキニング インターフェースの外見にCSSを適用できる。ビューのカスタマイズがラクチンに。 TextLabel iOSの微妙なTextLabelにリッチテキストやリンクがつけられるように。 バッジ 通知件数などのバッジを簡単に作成。 他アプリとの連動 他アプリ・・・マップ、ストア、電話、SMS、FB等の連携をラクチンに。 アプリ内ホーム画面 ホーム画面的なUIをアプリ内に簡単に追加できる。 キャッシュ／非同期通信つきのImageView 画像ローダー付きのImageView拡張。
CSS3 Solutions for Internet Explorer — Smashing Magazine
CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the ma
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
アスタリスクをプロパティ名の頭につけるというCSSハック
CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack (勝手に命名)は健在だったりとか。 Asterisk HackはUnderscore Hackとほとんど同じで、 #menu { position: fixed; *position: absolute; } というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixed
Bootstrap 3 で何が変わるのかをまとめてみた
Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行 サイトの URL を http://getbootstrap.com に変更 CSS はレスポンシブ用スタイルも含めて1ファイルにする IE7, Firefox3系 のサポート廃止 Glyphicon のフォント版を採用 Apache ライセンスから MIT ライセンスへ移行 *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更 過去バージョンのダウンロードにタグを使う コミュニティの
画像ボタンでよく使うinput type="image" と "submit"の違い - console.lealog();
画像ボタンでformを送信するには、だいたい以下のパターンが考えられると思います。 type="submit"とCssのbackground-image type="image" img要素でJavaScriptから送信 その他要素とCssのbackground-imageでJavaScriptから送信 下2つはもはやなんでもありなので置いておくとして、今回のメインはinput要素のsubmitとimageについて。 input要素のtype="image"は、画像ボタンが設定できるtype="submit"の上位互換！とか思ってた時期が私にもありました。 実際は、ちょっと挙動が違うんですね。 type="submit" と type="image"で画像ボタンを作る場合 その他指定はあると思いますが、これら要素に対して指定しそうなものと、その組み合わせ。 type="submit" va
Talks To Help You Become A Better Front-End Engineer In 2013 — Smashing Magazine
Many of us care deeply about developing our craft. But staying up to date can be a true challenge, because the quantity of fresh information we’re regularly exposed to can be a lot to take in. 2012 has been no exception, with a wealth of evolution and refinement going on in the front end. Great strides have been made in how we approach workflow, use abstractions, appreciate code quality and tackle
box-flex－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 div.sample { width:300px; height:100px; background-color:yellow; padding:5px; display:-moz-box; display:-webkit-box; display:-o-box; display:-ms-box; } div.aka1 {background-color:red;} div.midori1 {background-color:green;} div.ao1 {background-color:blue;} div.aka2 {background-color:red; box-flex:1.0;} div.midori2 {background-color:green; box-flex:2.0;} div.ao2 {backgro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Templates and More on WrapBootstrap
misais.me - Registered at Namecheap.com
GitHub - cavalle/steak: DISCONTINUED - The delicious combination of RSpec and Capybara for Acceptance BDD
