1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2024年8月19日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して ob
「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算 実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？ 次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。 え、でもこれだとノーマルっぽい？ じゃあこちらでどうでしょう。
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
CSSアニメーションの応用事例 - ワザノバ | wazanova
http://css-tricks.com/css-animation-tricks/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。 #1) Jump to another state mid-animation CSS animationで、微妙に数値の違う二つのkeyframe（例えば、.001%）を利用して、propertyを新しい値に即ジャンプする方法。 CSSコード @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off / 50.001% { opacity: 0.4; } / Keep off state for a short perio
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
Create CSS3 - Easy CSS3 Generator & SASS Compass CSS3 Generator
Knowing your way around CSS is absolutely necessary if you want to have a half-decent looking website. In a lot of ways, having good CSS fundamentals is the great equalizer - if you know your stuff, your sites will look good, regardless of whether you're a freelancer or a bigger agency. Think about it this way: You could be one of the best SEO agencies in the world, but if the sites you're ranking
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート
ボタンをタップ・クリックすると、素敵なアニメーションでソーシャルメディアのボタンを配置したパネルが表示され、フォーカスがはずれてもそのままパネルがキープされるスタイルシートのデモを紹介します。 デモページ HTML HTMLはシンプルで、リストで各ソーシャルメディアのボタン、チェックボックスでパネルの開閉をコントロールします。 <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li cla
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Reference | Codrops
CSSやSVGで実装するローディングアニメーション - NxWorld
2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013
text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス