ウインドウ幅に合わせて画像サイズを変化させる方法

制作中のバンドのサイト。
http://thebbboogie.com

画面右上に、にょきっ~と出てるギター画像。
横幅の狭いスマホやPCで見るとギターが画面左上のロゴにかぶってしまいます。
ギターのサイズが、そこそこあるからインパクトがあるので小さくしたくありません。
横幅がせまくなった時だけロゴにかぶらないよう、小さくしたいのです。

media queryでやろうと思いましたが、別の方法(CSS)でも出来るみたいなので,そっちで
やってみました。わりと簡単ですよ。

HTML

CSS

参考サイト
http://allabout.co.jp/gm/gc/400630/

カテゴリー: study | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

ウインドウ幅に合わせて画像サイズを変化させる方法」への2件のフィードバック

  1. タカハシ先生タカハシ先生

    このケースのマークアップのimg要素は、文脈とは無関係の「装飾目的」なので、altは空文字列でしょう。
    つまり alt=”” です。
    この投稿の説明用だったのかもしれませんが、それならば、img要素の上にコメントで補足する方が妥当です。

    良い機会なので、img の alt の仕様について、再度確認しましょう。
    HTML5: img 要素の alt 属性 の仕様

    返信

真中のぶ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.