background画像をレスポンシブに対応させる方法
backgroundで背景設定を作ると思わぬ所でつまづいてしまったので、その解決方法を記事にしてみました。なお今回はcreative memomemoさんの記事を参考にさせて頂いております。 background指定した画像を拡大縮小する方法 背景画像を可変で表示したいだけなのですが、これが曲者でbackground(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されない欠点があります。ならば指定すればいいのですが高さを設定をするとウィンドウサイズの拡大縮小時に高さ分の余白残りや画像切れをおこします。 高さ設定した場合、画像のように高さの値はそのままなので余白が残ってしまいます。 height:0;でpadding-topで高さ(余白)を設定 高さが与えられないならばどうしたものかと色々探した結果、paddingでの余白空けという発想に辿り着きました。ポイントはhei
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
机上に写真が散らばったようなクールなLightBoxギャラリー:phpspot開発日誌
気持ちよいスライド機能を提供する「noobSlide」:phpspot開発日誌
CSS Spriteを活用しよう - DesignWalker
