サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
TwitterやFacebookでシェアされたときに、アイキャッチ画像がどんなサイズでどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください（表示は2018年7月時点のものです）。 画像を選択
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; }CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグCSSJavaScriptGoogleMap
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2:HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description ortext.</p> </span> </div> 用意されているcl
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ）iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
HTML Standardの4.8.1.1 Requirements for providingtext to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
今回はMacで画像の変換・リネーム・リサイズの全てを一役でこなす「Snap Converter」をご紹介します。
米InstagramのサービスからTwitterに共有した画像が、12月10日未明からTwitter（公式サイトおよび公式アプリ）で完全に表示されなくなった。タイムライン上の画像添付ツイートで表示されるはずの「画像を表示する」リンクが消え、「開く」→「詳細」でツイートを開いてもInstagramのWebサイトの画像へのリンクが表示されるだけだ。 リンク先は「instagram.com/p/～」という、InstagramのWebサイトになっている。Instagramは11月、PCのWebブラウザ向けのユーザーのプロフィールページの提供を開始しており、PCでもユーザーの投稿画像をまとめて閲覧できるようになっている。 Instagramのケビン・シストロムCEOは12月5日（現地時間）、将来的にはTwitter上での画像プレビューを完全に終了することを明らかにしたが、いつから開始するかは明示して
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。HTMLHTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。CSS まずは、ベースとなるスタイルシートです。 * { marg
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリWEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
こういうビフォーアフター画像くれったらください Tweet 1：以下、名無しにかわりましてVIPがお送りします：：2012/09/29(土) 17:12:16.93 ID:e2piRjqm0 2：以下、名無しにかわりましてVIPがお送りします：：2012/09/29(土) 17:12:45.27 ID:PCCiG7vG0 >>1 泣いた 3：以下、名無しにかわりましてVIPがお送りします：：2012/09/29(土) 17:13:36.14 ID:e2piRjqm0 5：以下、名無しにかわりましてVIPがお送りします：：2012/09/29(土) 17:14:56.12 ID:e2piRjqm0 7：以下、名無しにかわりましてVIPがお送りします：：2012/09/29(土) 17:16:29.96 ID:e2piRjqm0 キレイになって 8：以下、名無しにかわりましてVIPがお送りしま
2012年09月05日03:00 カテゴリTips tips - GIMPでJPEGの蚊を退治して"PNG"化する このためだけにGIMPをインストールしておく価値あり。 可逆対非可逆 我々がふんだんに画像や音楽や動画をネットでやりとりできるのは、非可逆圧縮(Lossy compression)のおかげ。これがなかったらとうの昔にネットはパンクしています。静止画や音声はとにかく、動画ともなれば無圧縮ではネットどころかハードディスクすらついていけないほど。 うぶんちゅ! 瀬尾浩史 たとえば以下の画像。片方が可逆圧縮(Lossless compression)のPNG、そしてもう片方が非可逆圧縮のJPEGで圧縮してありますが、どっちがどっちだかおわかりいただけますか?画像をクリックした先に1246x1635ピクセルの元画像があるのでそちらも確認してみてください。 ぱっと見た目にはまるで同じ画像
Windows/Linux：無料の画像編集ツール「GIMP」が大幅にバージョンアップ（Ver2.8）しました！ インターフェースも大改修されて、ウィンドウがかなり使いやすくなっています。大量のバグフィックスも行われ、ほかにもレイヤーグループ機能が追加されたり、ドックウィンドウがさらに使いやすく改良されています。 とくに大きく変わったのはインターフェースです。新しく「シングルウィンドウモード」が追加されました。これはすべてのフローティング・ツールボックスを一つのウィンドウに統合したモードで、ウィンドウ内の配置は自由に変更できます。 ほかにもたくさんの改良がほどこされています。たとえばレイヤーグループの扱い方や、画像のエクスポート方法などなど。詳しくは下のリンクをクリックしてください。GIMP 2.8もここからダウンロードできますよ。GIMP 2.8はWindowsとLinuxで使用可能。Ma
↑この画像は、無料で使える。武田梨奈さんの写真Google画像検索で無料で使える画像を絞り込む方法 まず、Googleで画像検索をする。 https://www.google.co.jp/imghp ここで検索したいキーワードをいれる。 右側にこんな設定ボタンがあるので押す。 検索オプションを選択し、一番したにライセンスの部分で自由に使用または共有できるを選択。 これで無料で使える画像を簡単に選択することができますよ。 試してみてね！ なお、googleのサポートの内容には、 http://support.google.com/websearch/bin/answer.py?hl=ja&answer=29508 “検索したコンテンツを再利用する前に、ライセンスが正当であるか、および再利用に関する規約をご自分で確認してください “ と書いてあるので、確認してからどうぞ。 とはいえ確認するの
こんにちは、櫛井です。 「もうちょっと明るくするだけで印象違うのに残念」 「余計なものはトリミングでなんとかしたらいいのにな」 と思う画像がインターネットには溢れていますね。 実は簡単なのに敬遠しがちな画像加工。今回は、画像加工ソフトの中でも高機能なのに安価な Adobe の Photoshop Elements を使って説明していきたいと思います。こういったツールは利用している人が多いものを選ぶと、わからない時などに周りに聞きやすいのでメジャーなソフトを選ぶとよいかと思います。 ちょっと長いので目次。クリックするとそれぞれの項目に飛びます。 基礎用語、基本的なこと画像の明るさや色味を変える画像にボカシやモザイクを入れる（おまけ）写真の余計なものを消す 基礎用語、基本的なこと 画像サイズ画像の大きさのこと。ピクセル単位で表す場合が多い。 キャンバスサイズと表記されることもある。 レイヤーア
Demo 1 まずは、HTMLから。HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 Tinkerbell 画像のサイズ：200x130 [ad#ad-2]CSSCSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。 * {margin: 0; padding: 0;} body {background: #ccd3d7;} 画像に少しスタイルを加えます。 画像の周りに写真のような縁取りをし、シャドウを加えます。 ※height, widthは画像のサイズに合わせて変更してください。 .stackone {
ユニクロのように商品写真をマウスで動かせたり、ズームできるようにするにはどうやって実現すれば良いのでしょうか？jQueryなどで実現できるのでしょうか。アドバイスを頂けると助かります。よろしくお願いします。
ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。 動作確認は以下のサンプルをご利用ください。 サンプル １．ウィンドウの高さに合わせて画像を拡大・縮小する ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。HTML <div id="box"> <img src="画像のURL" alt="coffee" /> </div>CSS #box { height: 20%; } #box img { height: 100%; } img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。 ２．ウィンドウの幅に合わせ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
