株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
いまやweb制作の世界では、スマートフォンは外すことのできない端末となっています。
かつてはガラケーが主流だったので、それぞれに対応させるために実質PCの見栄えとガラケーの見栄えの2つのサイトが必要でした。
しかし、現在ではガラケーも風前の灯火となり、そのガラケーよりも高機能はスマホが登場したので、わざわざPC用、スマホ用という2つのサイトを作る必要がなくなり、ひとつのソースで端末ごとに見栄えを変更できるようになりました。
そしてそれを実現するのが、いま流行りのレスポンシブWEBデザインというものです。
だからといって、レスポンシブWEBデザインが完璧なものかというと、そういうわけでもないのですが、この手法により、各サイトのメンテナンス性は確実に上がりました。
このレスポンシブWEBデザインは、一体どういうものかというと、サイト制作で作ったhtmlをそれぞれの端末に合わせて作成したCSSを読み込ませるというもの。
つまり、アクセスしてきた端末が、PCならPC用のCSSを、タブレットならタブレット用のCSSを、スマホならスマホ用のCSSを読みこませるのです。
このレスポンシブWEBデザインを実現するには様々な方法があるのですが、その中で最も簡単で扱い易いものが「メディアクエリ」というもので、これは、link 要素とstyle要素のmedia属性で、表示対象となるメディアの種類を特定することを可能にする仕組みのことなのです。
さて、ここまで簡単にレスポンシブWEBデザインを説明してきましたが、ここからが私のための勉強タイムです。
まず、私はすでにレスポンシブWEBデザインの制作に取り組んでおり、ある程度のことはできるようになってはいるのですが、このレスポンシブWEBデザインにしたときの画像の取り扱いがイマイチ理解できておりませんでした。
そこで調べているとレスポンシブWEBデザインで画像を扱うためには、CSSで画像の伸縮させるためのおまじないみたいなものがあるようです。
img {
max-width: 100%;
height: auto;
width /***/: auto;
}
まぁ、普通に考えるとこのソースは発想できないですよね。
なんですか、この3行目は！！！
まぁ、とにかく画像の扱いがわかったので、このコードを使って、実際にレスポンシブWEBデザイン対応してみたいと思います。
ツイート
