CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

@cappeeです。

特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。

例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。

トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。

CSSだけで画像をトリミングする方法

overflow: hidden を使う

一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。
trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してください。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="60"></p>

CSS

.trimming {
 width: 60px;
 height: 60px;
 overflow: hidden;
 }

元の画像が複数ありサイズが固定でない場合

横長と縦長の画像が混在していて、なるべく画像全体が見えるように縮小する場合は、HTMLの記述もかえる必要があります。横長なら下記と同じく width を指定し、 縦長なら height を指定します。

この方法だと横長の画像だった場合は右側が切り取られ、縦長の画像だと下が切り取られますので、画像を中央配置してトリミングすることはできません。

横長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

横長の画像デモ(画像の右を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の画像デモ(画像の下を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

画像サイズが固定の場合

画像サイズが固定の場合の場合は、position を使用してセンタリングすることもできます。
枠が60px、画像が100×80pxだった場合、imgタグの top は【(画像の高さ-枠の高さ)/2】 を指定し、
left は【(画像の幅-枠の幅)/2】 を指定します。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
width: 60px;
height: 60px;
overflow: hidden;
}
. img{
position:absolute;
top:-10px;
left:-20px;
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

センタリングのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipプロパティを使う

要素の切り抜き領域を指定するclipプロパティでも画像の切り抜きが可能です。下記のように少しややこしいですが、clip: rect(上 右 下 左); と余白の長さを指定します。そのため、使用する画像が複数ある場合は、画像サイズが固定されている必要があります。

clip1 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

また、一緒に position: absolute; または position: fixed; を記述する必要があるため、

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
height: 80px;
}
. img{
position:absolute;
clip: rect(10px 80px 70px 20px);
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

完全に切り抜くには

デモを見ていただくとわかるかと思いますが、clipプロパティのみだと指定した余白がそのまま表示され”切り抜いた”とは言えない状態です。切り抜くには上記 overflow: hidden の「画像サイズが固定の場合」と同じ指定をする必要があります。勘の良い人はもうお分かりかもしれませんが、結局上記と同じ記述をするのであれば、わざわざclipプロパティを指定してコードを増やす必要がないんです。でも、こんなclipプロパティがCSS2から実装されていたんですね。私は今回調べて初めて知りました。完全に切り抜くか余白を残すかの指定までできると素敵なんですけどね。こんなプロパティあったんだ!と少し感動したのでご紹介しました。長々とすみません。

background で背景画像にする

システム案件の場合はCSSの方で背景画像として表示するのはちょっと考えますが、画像置換でも問題ない場合はこれが一番ラクかもしれませんね。これならセンタリングも簡単です。

HTML

<p class="trimming">ユーザー名</p>

CSS

.trimming {
 width: 60px;
 height: 0;
 padding-top: 60px;
 line-height: 60px;
 background: url("/image/user.jpg") no-repeat 50% 50%;
 overflow: hidden;
 }

jQueryを使う方法

面倒な計算をせずにjQueryとCSSだけでセンタリングさせた画像を切り抜くこともできます。もちろん複数画像がある場合、それぞれサイズが異なっても大丈夫ですので、JavaScriptを導入しても問題ない場合はこの方法が手っ取り早いです。

こちらのサイトで詳しい導入方法が記述されていますが、そちらを引用して記載したいと思います。

画像編集いらず!jQueryとCSSだけで画像をトリミング&センタリングする

[2013.2.28追記]
画像が表示枠よりも小さい場合は表示枠の中央に表示してくれればいいのですが、表示枠のブロック要素に text-align:center; を指定しても position を使っているためうまくいきません。
どなたか画像が小さかった場合のjavascriptを追加してくれると嬉しいな。

HTML

<p><img src="photo.jpg" id="thumb1"></p>

CSS

p.thumb{
 border: 1px solid #aaa;
 display:block;
 width:180px; /*トリミング後の横幅*/
 height:180px; /*トリミング後の縦幅*/
 overflow:hidden;
 position:relative;
 z-index:1;
 }
 p.thumb img{
 float:left;
 position:absolute;
 }

JavaScript

$(function( ) {
 $("#thumb1").on("load",function(){
 var iw, ih;
 var cw = 180; /*トリミング後の横幅*/
 var ch = 180; /*トリミング後の縦幅*/
 iw = ($(this).width() - cw) / 2;
 ih = ($(this).height() - ch) / 2;
 $(this).css("top", "-"+ih+"px");
 $(this).css("left", "-"+iw+"px");
 });
 });

コーディングしている案件によって最良の方法を選択したいと思います。

今回サンプル画像に使用したダミーイメージはURLを指定するだけで簡単に画像が表示されるのでとても便利です。詳細は以前投稿した下記をご覧ください。

ダミーイメージの生成ツールを目的別に使い分ける

Pocket
article clipper CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意!

最近食欲が抑えられない、@cappeeです。

CSSやHTMLで要素の高さを固定するのではなく、要素内のコンテンツボリュームに合わせて都度高さを指定したいケースって結構ありますよね。今までは「heightLine.js」を使用していましたが、jQueryを使用した超軽量の「jquery.tile.js」を試してみてとても使いやすかったのでメモしておきたいと思います。

もちろん、同じ行にある要素の高さを揃えることもできます。嬉しい。

jquery.tile.jsを使って要素の高さを揃える

下記より「jquery.tile.js」ファイルをダウンロードして、<head>内か</body>の直前でファイルを指定して読み込みます。jQuery本体を読み込むのも忘れずに。(サンプルコードはHTML5です。)

jquery.tile.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.tile.js"></script>

高さを揃えたいページか外部JSファイルに下記を記述する。「.className」のところに要素のクラス名を入れてください。

同じ行にある要素の高さを揃える場合は、「.tile(4)」の数字のところに列数をいれてください。

全ての要素の高さを揃える場合

<script>
 $(function(){
 $(".className").tile();
 });
 </script>

同じ行にある要素の高さを揃える場合

<script>
 $(function(){
 $(".className").tile(4);
 });
 </script>

こんなに簡単でいいのか!と思ってわくわくしながら更新したところ、うまく揃っていません。あれれ。

画像を含めるときの注意点

要素内のコンテンツを少しづつ削除して何が原因か調べたところ、どうやら画像が悪さをしているようです。調べてみたら、解決策ありました!ありがたし。

上記のコードを下記のように「$(window).load(function() {」に修正すればいいみたいです。下記だと画像を読み込んでからJSを実行するので正常に動作するようになると。

<script>
$(window).load(function() {
 $(".className").tile();
});
</script>

改善についてはこちらの「画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法」を参考にさせていただきました。ありがとうございます。

Pocket
article clipper 要素の高さを揃える超軽量jquery.tile.jsがオススメ!ただし画像を含む場合は要注意!

ページトップへ戻るボタンをスクロールしてからふわっと表示するjQuery

こんにちは、@cappeeです。

最近ページトップへ戻るボタンを一工夫するサイトが増えましたね。

よく見かけて一番サイトの閲覧に影響がなく個人的に好きなのが、スクロールしてからふわっと表示するフェードがついているボタンです。

jQueryを使えば簡単に実装することができます。

サンプルコード

HTML

<p class="pageTop"><a href="#wrapper"><img src="/images/pagetop.png" width="60" height="60" alt="ページの先頭へ"></a></p>

CSS

#pageTop {
 position: fixed;
 bottom: 50px;
 right: 50px;
 }

Script

$(function() {
 var topBtn = $('#page-top');
 topBtn.hide();
 //スクロールが100に達したらボタン表示
 $(window).scroll(function () {
 if ($(this).scrollTop() > 100) {
 topBtn.fadeIn();
 } else {
 topBtn.fadeOut();
 }
 });
 //スクロールしてトップ
 topBtn.click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 500);
 return false;
 });
 });

 

こちらには上記以外の使えるアニメーションがたくさんありますのでぜひご覧ください。

jQueryでスクロールすると表示する系いろいろ

Pocket
article clipper ページトップへ戻るボタンをスクロールしてからふわっと表示するjQuery

可変するボックスでブロック要素を縦中央に配置したい場合はjQueryを使おう

@cappeeです。

ボックスを縦中央に配置する系のテクニックはたくさん記事がありますが、画面全体の縦中央か、サイズが固定されたボックスの中で縦中央にするものばかりです。

縦中央の問題点

今回私が実現したかったのは、左に文字数が前後するテキストがあり、左に画像置換したボタンをテキストの量に関わらず縦中央配置する、というものです。

画像置換の方法はいろいろありますが、今回のボタンは画像置換の関係でブロック要素になっています。

tate middle 可変するボックスでブロック要素を縦中央に配置したい場合はjQueryを使おう

よく記事で書かれているポジションやネガティブマージンを使う方法だとボックスのサイズを固定する必要があるのです。

あと、とても便利なCSSである table-cell を使うという選択肢もありますね。
ただIE8以降からの対応となるので、スマホサイトの制作であればこちらが大活躍するかと思います。

[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト

固定サイズでの縦中央配置については下記をご覧ください。

CSSでボックスを上下左右中央に配置する第3の方法

可変するボックスはjQueryで縦中央に配置

上記のようにボックスの高さが可変する場合は、jQueryで縦中央に配置することができます。

jQuery本体と「jQuery Center plugin」をダウンロードします。

あとは、ページに下記のようなコードを追加して、クラスやID名を指定してください。

<script>
 // 上下左右中央
 $("クラスやID").center();
 //左右だけ中央
 $("クラスやID").center({
 vertical: false
 });
 //上下だけ中央
 $("クラスやID").center({
 horizontal: false
 });
 </script>

ひとつ注意が必要なのは、ボタンのひとつ上の要素の高さから算出しているようなので、ボタンをさらにdivなどで囲っているとそこの高さから算出されてうまくいきません。

上記のような配置の場合、ボタンは「上下だけ中央」に指定して、左右はポジションの right を記述すれば実現できます。(可変するボックスには position:relative を指定してください)

jQueryの詳しい記述方法は下記をご覧ください。

jQueryでボックスを上下左右中央に簡単配置

Pocket
article clipper 可変するボックスでブロック要素を縦中央に配置したい場合はjQueryを使おう