1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2024年8月19日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して ob
アイコンフォントを選ぶ！まとめる！軽くする！「Fontello」はもう使ってる？
Webサイトのボタンなど、ちょっとしたアイコン、どうしていますか？ 画像、SVGなどいろいろな方法がありますが、Fontelloなら必要なアイコンだけフォント化して読み込めます。 Webサイトのシェアボタンに含まれるソーシャルメディアアイコンから、記事へのコメント数を表示する吹き出しアイコンまで、アイコンフォントはシンプルなグラフィカル要素としてWeb上で広く使われています。 アイコンフォントにはとても便利な機能がたくさんあります。まず、通常の画像と違って高解像度画面でもピクセル化されず、大きく拡大してもぼやけません。また、アイコンフォントのプロパティの多くはCSSを使って直接コントロールできます。サイズや色の変更、影を付けるといったことも数行のCSSで可能です。さらに画像のスプライトよりもずっと簡単に使えます。 アイコンフォントに深入りする前に、スクラッチで新しいWebデザインを始めたい
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これを無断使用しちゃっていいの？ブログのアイキャッチ探しがはかどる高クオリティーCC0写真サイトまとめ
room 402 Inc.
http://www.geidai.ac.jp/event/geisai2013/html/missgeisai2013.html
