2/3 画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About
画像の下に謎の隙間ができるのを防ぐ方法(2ページ目)背景色を付けたボックス内に画像を配置した際などに、画像の下に余計な空白が見えてしまうことがあります。この余白は、「画像の下端」が「文字のベースライン」に揃えて表示されることが原因です。CSSを使って「画像の下端」を「行の下端」に揃えるよう装飾すれば、謎の余計な隙間を消すことができます。 この「画像の下に見える余白」は、なぜできてしまうのでしょうか？その原因は、「画像の下端は、ベースラインに揃えて表示される」という仕様があるからです。 日本語文字の場合はどの文字も下端の位置は共通なので気にすることはありませんが、アルファベットでは下図のように「文字の下端」が異なります。 上図の赤色の線のことを「ベースライン」と呼びます。アルファベットの多くの文字は、このベースラインに下端が揃います。しかし、小文字の「g」や「j」や「y」などの一部の文字は、
![2/3 画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/07356548dced5830ac122644793311a373810346/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F8%2F9%2Ftopimg_original.png)
無料写真素材サイトまとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
見た目はそのままで、JPEG画像のファイルサイズを1/5に軽量化するオンラインサービス -JPEGmini | コリス
JEPG画像の見た目の品質を維持しつつ、ファイルサイズを1/5に軽量化するオンラインサービスを紹介します。 ※1/5は画像によって差があります。 JPEGmini 左：オリジナル（3662KB）、右：JPEGmini（628KB） [ad#ad-2] サイトではデモのJPEG画像が4種類あり、中央のスライダーを操作することで左：オリジナル、右：JPEGmini、見た目の品質を比較することができます。
GoogleがJPEGに代わる新画像フォーマット「WebP」を発表、ファイルサイズが小さくウェブの表示が高速化
今やインターネット上のあらゆるところで用いられている画像形式「JPEG」ですが、GoogleがJPEGに代わる新たな画像フォーマットとして「WebP」を発表しました。 ファイルサイズが小さく、ウェブの表示を高速化することが可能となっており、実際に「どの程度の画質でどの程度のファイルサイズになるのか」といったギャラリーも公開されています。 詳細は以下から。 Chromium Blog: WebP, a new image format for the Web Googleの公式ブログによると、同社はウェブの表示をさらに高速化するために行ってきた取り組みの一環として、ウェブページに用いられている「画像」に目を付けたそうです。 画像はウェブページのデータ量のうち約65％を占めており、特にモバイル回線のような通信速度が限られた環境においてはウェブ表示のパフォーマンスを著しく低下させるとのこと。 そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JPEG画像を劣化させずに軽量化する『JPEGmini』がスゴすぎる - blog | roughtab
