[B! CSS] an-ironic-manのブックマーク

an-ironic-man id:an-ironic-man

CSSに関するan-ironic-manのブックマーク (9)

SASSIENCE ～世界が嫉妬するCSSへ
SASSIENCE ～世界が嫉妬するCSSへ
an-ironic-man 2011/05/27
サービス内容もだけど、デザインとか文言が素敵。

CSS

UI
リンク
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
A new micro clearfix hack デモページ [ad#ad-2] 「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。今回紹介するのは、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。この新しいclearfixの対応ブラウザは、下記の通りです。 Firefox 2+ Safari 2+ Chrome Opera 9.27+ IE 6+, IE Mac IE6 にも対応しているのは嬉しいところです。
an-ironic-man 2011/04/26
display: table;なんてあるのか

CSS
リンク
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
an-ironic-man 2011/04/21
基本だし守ったほうがいいけど、致命的なもの以外こだわりすぎないことも大事かと

HTML

CSS
リンク
ベターJavaScript!? CoffeeScriptが注目されるワケ：Rails Hub情報局：エンジニアライフ
JavaScriptへコンパイルして実行することを前提としたスクリプト言語「CoffeeScript」がちょっとした注目を集めています。CoffeeScript自体は2009年末に登場し、その1年後の2010年12月にバージョン1.0がリリースされていますが、注目を集めたのは、数日前（2011年4月13日）にRuby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して議論が巻き起こったからです。 Yes, it's true, Rails 3.1 is going to ship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It's bad ass.
an-ironic-man 2011/04/19
Rails 3.1。CoffeeScriptとSCSSいいな。

Rails

JavaScript

CSS
リンク
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日ブログ作りなおそうかなーと思って、この Webサイトをみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せてみたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
an-ironic-man 2011/04/13
zoom来た。

CSS
リンク
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
an-ironic-man 2011/04/13
相変わらずclearfixというかCSS周りは気持ち悪いのが残ってるなぁ。IEェ……

HTML

CSS
リンク
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
an-ironic-man 2011/02/20
Mobile

HTML

CSS

JavaScript

まとめ

Tool
リンク
紙を折ったようなエフェクトを実装するチュートリアル | コリス
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。デモページ紙を折ったようなエフェクトの実装紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
an-ironic-man 2010/12/21
Web

CSS
リンク
11. Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫
an-ironic-man 2009/01/23
CSS

Web

ギャラリー

サイト

デザイン

ブログ
リンク
1