2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

イヤフォンを新調した初日にネコに噛みちぎられたフロントエンドエンジニア、ザワです。こんにちは。 今回はWebクリエイターのポートフォリオサイトに注目し、筆者の鳥肌が立った、心が躍ったサイトを集めてみました。この記事を読み終わった直後には、あなたも制作意欲が湧いていることを期待しています。 WebGLを使用し、実験的な手法を用いた作品を集めたショーケースです。Chrome Experimentsに載っている作品、A-I-U-E-O、などもあり、ひとつひとつのスケッチのクオリティが激高です。このサイトをスケッチブックとしてとらえると、子供が無邪気に絵を描きなぐる様子が浮かんできます。好きこそものの上手なれ。私はそうこのサイトから教えられました。 鮮やかな技術に惚れる「Takumi Hasegawa」 https://tkmh.me/ なんですかね。惚れちゃいますよね。こんな綺麗な配色でグリグリ

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 レイアウトは縦長型や分割型、カード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインをよく見かけます。 最近のWebデザインで使われているさまざまなテクニックの勉強になるレイアウトやUIコンポーネント・要素が揃ったPhotoshop用、Sketch用の無料素材を紹介します。