メディアクエリーと相性がよさそうな CSS 小技いくつか | ヨモツネット

2012/05/02 96 users メディアクエリー CSS 相性 上下 動作

table 系の表示にあまり注目されることがないように感じますので、これまで仕事でメディアクエリーを利用してくる中で考えた小技をこの記事に共有します。ここに載せているのは一応実際につかって検証済みですが、もし変な動作があったら教えてください。 上下を入れ替える display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ... 続きを読む

SVG Gradient をSASS (LESS) で生成して CSS Gradient として扱う mixin | ヨモツネット

2011/12/26 30 users Mixin less linear-gradient SVG

2011年12月22日 木曜日 この記事では最終的に、linear-gradient 関数を SASS の mixin にまとめたコードを解説します。これは、Webkit 系ブラウザーや Firefox だけでなく Internet Explorer 9 でも SVG 経由で再現可能でとても便利です。 まず、利用例を紹介しますと、次のように mixin を利用することになります。 .selecto... 続きを読む

HTML5 でのセクションの誤用にご注意 | ヨモツネット

2011/07/11 66 users 文書 機械 要素 構造 月曜日

2011年7月11日 月曜日 最近になって HTML5 を採用した Web サイトが増えてきました。HTML5 にすることは、将来の拡張性などを考える便利でよさそうなのですが、特にセクション関連の要素についてよくわからないで使ってしまうと、機械に対して意図しない構造の文書となってしまいます。 そして、これがすでに現実にもあるのです。テレビ朝日の Web サイトでは、HTML5 が採用されています。... 続きを読む

Internet Explorer 10 と CSS3 | ヨモツネット

2011/04/13 31 users CSS 水曜日 おはなし 機能 実際

2011年4月13日 水曜日 1011 年 4 月 12 日に行われた MIX 11 で、Internet Explorer 10 に関するおはなしがありました。Internet Explorer 10 では今のところ特に CSS の新しい実装が多く、実際に発表されていた機能には次がありました。 Multi-Colimns Grid Layout Flexible Box Layout CSS G... 続きを読む

いまどき ? いまさら ? clear fix のコード | ヨモツネット

2010/03/04 297 users Element Zoom Weblog コード CSS

2010年3月4日 木曜日 float によるのレイアウトフローをクリアランスする手法として知られる通称 "clear fix"、昔は長いコードを書いていましたが、今ならもっと短くても問題ないです。 しかし、最近見かけたある weblog の記事内では昔から知られる長いコードを利用していたので、日々 CSS を書く皆様はどんな感じにしているのか気になりました。 自分は element{ /zoom... 続きを読む

画像とかの横にあるテキストを上下中央に｜CSS HappyLife

2008/03/16 552 users CSS HappyLife 上下中央 テキスト 画像 CSS

←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 ---- こっから続き デモページ 画像とかの横... 続きを読む