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

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

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

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

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

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

いまどき ? いまさら ? 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はハックで対応みたいな感じです。 ---- こっから続き デモページ 画像とかの横... 続きを読む