読者です 読者をやめる 読者になる 読者になる

yuri memo

コーディングとかのメモ帳

CSS

CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応)

レスポンシブサイトでサムネイルなどを一覧表示させたいときに 写真のサイズがバラバラだとなかなかうまくいかず困ってました。以前、background-sizeがいいかも!と記事を書きましたが object-fitのポリフィルが使えるようになり、これは!!と思いました。…

スマホでフルスクリーンになるレスポンシブメニュー

今回は以下のようなレスポンシブメニューを実装しました。 ・モバイル時に、メニューをフルスクリーンで表示 ・メニュー開閉アニメーションはフェードイン/フェードアウト ・jQueryのfadeToggleなどは使わずに、classの付け外しをjQueryで行う デモはこちら…

プラグインなしで拡大しながらフェードで切り替わるスライド

拡大しながらフェードインするスライドを実装したのでめもめも。 さらっと言ってますけど、ほんと分からなくて泣きそうになりながら実装したんだよ・・・ぐすん。とりあえず、デモをのせますね。1. フルスクリーン背景バージョン 2. 通常スライドバージョン…

背景画像を隙間なく表示させる方法 - background-sizeの使い方

CSS

実務でもよく使うのでメモです。 サムネイルつきリストなどを作る際に、画像サイズが決まったサイズであれば特に問題はないのですが CMS化してクライアントが直接更新作業する場合などは、必ずしもすべての画像サイズが同じとは限りませんよね。 そんな時に…