CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 | RECOOORD
HOMEHTML&CSSCSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 HTML&CSS Photoshopでトリミングした画像をそのまま表示できればいいのですが、Webサイトだと画像サイズが均等じゃないものを表示する場面が出てきます。 例えばWordPressのようなCMSで、画像を出力する際など投稿者によってサイズがバラバラだったりします。 そこで今回はCSSで画像をトリミングし、縦横比を維持したまま可変してくれる方法を紹介していきます。 実装のサンプル まずはデモをご覧ください。 PCで見られている方はウィンドウサイズを縮めたりしてみてください。画像の縦横比は維持されていると思います。 基本的にはHTMLとCSSだけで実装することが出来ます。 HTMLの記述 <ul> <li><i
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
AtomでSass + Compassのコンパイルをしてみよう | WebLifeTimes
Atomのsass-autocompileでSassのコンパイルをしてみようという記事でパッケージを使ったsassファイルのコンパイルについて書きましたが、sass-autocompileではCompassでのコンパイルに対応していませんでした。 Sass + Compassとういう組み合わせは多いので、Compassを利用しているsassファイルをコンパイルする方法を紹介します！今回はパッケージなどを利用するわけではなく、コマンドからコンパイルをするという流れになります。 Compassとは そもそもCompassってなに？と思われている方へ簡単に説明すると、CompassはSassのフレームワークでSassをより便利に利用することのできるものです。 それでは、ここから実際にCompassを使ったコンパイルをするまでをみていきたいと思います！ Rubyの確認 まず、Sassを利用するには
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PC環境でリンク要素にhoverしてもカーソルがポインター（指マーク）にならない事象 | oku-log