サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
web-pixy.com
サムネイルをクリックして大きな画像で表示するプラグインというと LightBoxが有名ですが、同じような機能を持った jQueryプラグインは数多く存在します。今回は、Boxerを紹介をします。 Boxerの使い方 GitHubに公開されている Boxerのページからデモファイルをダウンロードして、Boxerを実装するのに必要なファイルをサーバーにアップロードします。ファイルは、jquery.fs.boxer.min.js、jquery.fs.boxer.css、jquery.fs.boxer-icons.png、jquery.fs.boxer-loading-dark.gif、jquery.fs.boxer-loading.gifです。 <link href="css/jquery.maximage.css" rel="stylesheet"> <script src="http://a
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
このページを最初にブックマークしてみませんか？
『web-pixy.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
