http://www.webdesignerdepot.com/2014/02/how-to-create-horizontal-scrolling-using-display-table-cell/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Ezequiel Bruniがwebdesignerdepot.comで紹介しているテクニック。 1) 横に並べたコンテンツを水平にスクロールさせるパターン (デモ画面) 2) 全画面を水平にスクロールさせるパターン（デモ画面） が、つくれます。ソースはこちらでダウンロードできます。 2) の場合、モニターの画面幅に対してpercent表示は使えないので、width: 1600pxで固定。可変にしたい場合は、下記のJavaScriptを追加要。 $(win
displayプロパティーの値のひとつであるtable-cellは、通常tableやinline-tableと組み合わせて使う。リストに使うと空白を作らずに各項目を並べられ、かつfloatプロパティーを使うより色々面倒くさくない。その場合にtableやinline-tableではなくblockと組み合わせると、table-cellの幅の自動調整が行われなかったり、他にもマークアップ上での制約や組み合わせ必須なプロパティーなどがないという特徴があり、スタイリングの自由度が上がる。 ul { margin: 0 auto; padding: 0; display: table; width: 80%; } li { display: table-cell; } tableと組み合わせる場合、幅の自動調整によりリスト項目の内容により幅がまちまちになってしまうので、widthプロパティーを使うのが
CSS でテーブルセルに対して vertical-align: baseline を指定したときの挙動はちょっと面白いです。そのセルが属するテーブル行で vertical-align: baseline が指定されたセルのうち、テキストの最初の行のベースラインの位置がもっとも低いセルによってそのテーブル行のベースラインが決まり、セルのテキストの最初の行のベースラインがそこに合わせられます (17.5.3 Table height algorithms [CSS 2.1])。たとえば同一行の見出しセルとデータセルでフォントサイズが異なる場合でも、このアルゴリズムによってバランス良く配置することが可能です。 Fig 1: フォントサイズの異なるセルに `vertical-align: baseline` を指定した結果 これを応用して、テーブル以外の要素でも display: table-ce
スマホサイトでtd/th要素へのposition:relativeはダメ！ iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。 また、td/th要素以外にもdisplay:table-cellを指定した要素へのposition:relativeの指定は無視されます。 セルの内側の要素をabsoluteを使って自由配置したい場合は、内側にdivを一個かましてそいつにposition:relativeを指定するのがよろしいかと思います。 <table> <tr> <td> <div>cell1</div> </td> <td> <div>cell2</div> </td> </tr> <tr> <td> <div>cell3</div> </td> <td> <div>cell4</div> </td> </tr> <
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
