[Category] css

複数の背景を設置する

毎日寒いですね。鍋がおいしい季節になりましたね。 1つのdiv内にbackgroundで複数の背景を設置します。IE9以上で動作します。 HTML <div class=”bg”> </div> CSS .bg{ width: 640px; height: 470px; ma…

要素を縦中央揃えにする

デザインでよくある縦中央揃え。 cssだけで割と簡単にできます。レスポンシブにも対応できます。 ポイントは外側のレイアウトにdisplay:tableを、要素を囲むレイアウトにdisplay:table-cellを入れて疑似的にtableにしてしまうことです。tableになればvertical-al…

高さの変わるタブメニュー

タブ内コンテンツの高さが合っていなくても問題ないタブメニューです。 js(jQuery)でやっていることはタブコンテンツのdisplayプロパティ変更と、クリックしたタブメニューにclassを付けるくらいです。 後の動きはすべてcssで行っています。 一応レスポンシブ対応。 HTML <div…

paddingとborderを幅と高さに含める

最近までちまちまpaddingとか計算してサイズ調整をしていた自分が馬鹿みたいに思えます。 たった一行書くだけだったとは・・・! html <h3>paddingとborderを幅と高さに含める</h3> <div id=”sample1″> padding:20…

  • コーダーのための計算機