[B! 配置][IE] masakuma0812のブックマーク

masakuma0812 id:masakuma0812

配置とIEに関するmasakuma0812のブックマーク (3)

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

画像

トリミング

縦

横

配置

ソースコード

IE

Edge

対応
リンク
3/4 IE6～8でも一部のCSS3が使える！「CSS3 PIE」の使い方 [ホームページ作成] All About
右図は、ボックスの角を丸くできるborder-radiusプロパティを使ったサンプルを、IE6で表示した画面です。border-radiusプロパティの使い方は、記事「画像を使わずにCSSだけで角を丸くする方法」をご参照下さい。 CSS3 PIEを使うソース例は以下の通りです。 p { border-radius: 30px; behavior: url("/PIE.htc"); } box-shadowプロパティをIE6で表示右図は、ボックスに影を付けるbox-shadowプロパティを使ったサンプルを、IE6で表示した画面です。box-shadowプロパティの使い方は、記事「IE9を含む代表的なブラウザで使えるCSS3プロパティ」の4ページ目をご参照下さい。 CSS3 PIEを使うソース例は以下の通りです。 p { box-shadow: 10px 12px #800000; /* 影
masakuma0812 2011/11/11
CSS3

背景

画像

複数

指定

配置

知識

小技

IE

対応
リンク
[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル
アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。デモデモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。デモページ ※上部のイエローのパネルです。 CSS3アニメーションサポートアニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション非サポートスタティックにパネルが表示され、クローズボタンのクリックで隠れます。実装：パネルをブラウザ上部に配置まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id
masakuma0812 2011/08/29
CSS

CSS3

ブロック要素

配置

固定

アニメーション

IE

対応

サンプル
リンク
1