css

1/2ページ

cssで画像サイズそのままに上下左右中央寄せしてトリミングする方法二つ(IE11対応)

答え

こんにちは!@bluesky177896です。 今回は画像サイズをそのままに、上下左右を中央に揃えてトリミングする(厳密にはしているように見せかける)方法を紹介します。 一行で出来るけどIEがま~た動かないパターンと、IEを無視できるかつ他のトリミング方法にも使える方法の二つを紹介していきます。

(cssのみ)縦スクロール画面で、自分がいる位置のヘッダータブにボーダーを引く方法

css3_logo

仕事で、縦スクロール画面のヘッダーで、 自分が今いる位置に下線を引く必要があった。 jQueryの場合、各要素のheightを保存しておいて、 スクロールイベントから長さを計算して各要素のheightに達したらborderを出す必要がある。 cssだけで同じようなことが出来ないかやってみたら出来たのでナレッジを残す。

メインエリアとサブエリアを使ったフォト(イメージ・画像)ギャラリーを作る。

javascript

仕事でフォトギャラリーを作成する機会があった。 メインのイメージ領域があり、下にサブのサムネイルリストがあり、 クリックするとメインに大きな画像が表示されるような画像一覧だ。 Amazonの画像欄などによくあるあれである。今回はその作成方法を解説する。

toggle(ドロップダウン)メニューをcssだけで作る。

css3_logo

モバイルファースト時代に使えるcssと言えば、toggle(ドロップダウン)メニュー。 普段折りたたまれている状態なので、最初に表示される要素が少なく済みます。 前回の記事でも書いたように、 モバイルファースト時代は極力スクロールを抑えたいので、軽量に出来るcssで出来る工夫はどんどん盛り込みましょう。