Category Archives: CSS2.1

display:table-cell; の使い方まとめ

いつもコーディングセミナーを担当させていただいているサポタント株式会社のスキルアップコラムにて、 display:table-cell;を活用した「仮想テーブルレイアウト」の使い方を掲載させていただいております。 時代はそろそろflexboxだろ!!という声が聞こえてきますが、個人的にはまだまだtable-cell押しですw (だってflexboxめんどk…) 何気に仮想テーブルレイアウトの

iOS8 Safariでzoomプロパティが無効になっている件

iOS8からはzoomが効かない 今から2〜3年前、スマホサイトのRetinaディスプレイ対応をしなければならなくなった時に、予算とかスケジュールの都合で簡易対応として以下のようなコードで強制的に全部のimg画像を1/2表示にして作っていた時期がありました。 img{zoom:0.5;} この方法だと、img要素にいちいち1/2サイズを指定しなくても勝手に1/2サイズで表示してくれるので、レ

overflow:hidden;とclearfix

後続要素が無いためにclear:both;でフロート解除できない場合、フロートしている子要素を包む親要素に対してoverflow:hidden;を設定したり、clearfixを使ったりすると思いますが、双方メリット・デメリットがあるのでまとめておきます。 【overflow:hidden;】 <メリット> ・classを追加する必要がないのでHTMLソースコードをシンプルに保てる ・1行で済むので簡単 ・DWのデザイン