1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
コピペ自由！美しいグラデーションを180種類揃えた WebGradients
最近のウェブデザインでよく見かける、鮮やかな配色のグラデーションカラーをお探しですか。 WebGradients は、どんなウェブサイトでも利用できる美しいグラデーションカラー180種類を揃えた、無料の配色コレクションツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSS3コードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。 詳細は以下から。 コピペ自由！美しいグラデーションを180種類揃えた WebGradients WebGradients では、配色の参考にしたい美しいグラデーションカラーが一覧で揃っており、使い方もとてもシンプルです。各パネルでは、2500x2500pxのPNGファイルをダウンロードできたり、使用している色のHEXコードもまとめて確認でき、Webデザイン制作に便
学生ポートフォリオ百科｜IT企業 デザイナー職
今回のポートフォリオ百科では、IT企業デザイナー職から内定をもらった学生さんに、就職活動でつかったポートフォリオを見せていただきました！こちらで紹介させていただく内容は、別記事「デザイナー内定者に聞く！業界ごとのポートフォリオの作り方」にも少し登場していますが、こちらの記事にはより詳しい内容を載せているので、IT企業への就職を考えている方はぜひチェックしてみてください！編集・執筆 ／ FUMIE HINO, AYUPY GOTO ● ポートフォリオの詳細 早速、IT企業に内定を頂いた学生さんのポートフォリオを覗いてみましょう！ 一つの作品に対し、何ページも使って大きく見やすく紹介することによって、web以外にも作品が作れるということを伝え、ページのボリュームも出しています。いろんなジャンルの作品を取り組んでいるとアピールしつつも、ポートフォリオ全体の統一感が出るように意識して制作しています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
