バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


スポンサーサイト

カテゴリー:-

一定期間更新がないため広告を表示しています

0
     | - | | | pookmark

    レスポンシブな画像のサイズ指定

    カテゴリー:技術的なところ
    さて、右も左もレスポンシブ、ウェブの閲覧環境が数年前とは比較にならないほど多様化されてしまったために、いちいちデバイスに合わせてページを設計する手間を省きまして・・共通のHTML+CSSなんかを駆使して何とかやっちまおうぜ!ってな具合で花を咲かせたレスポンシブWebデザインというヤツ。

    以前から元になる技術はありました、なんて過日の記事でご紹介したりしたことがありますが・・今回はその記事[レスポンシブデザインの可能性と限界]の中でも少し触れた画像について。
    この時の考察では、
    ②画像を多用した場合、スマートフォンなどの小型携帯端末には別の画像を表示させたり、非表示にしたりする細工が必要 → すべての閲覧環境でまったく同じ情報提供はできなくなるので、個人的には避けたい手法。
    なんて自分勝手なことを書いておりましたな〜・・・。まぁ、セマンティックWebなバリデーションっていう意味では決して間違ってないと今でも思っておりやすよ!いやいや、セマンティックとかバリデーションって何なのー??って・・、よく意味がわからぬカタカナを並べてすみません。くだけて言うと、本来のちゃんとした情報をブラウザーが解釈できるよに細かくチェックして作りましょ!ってな感じ、です。

    で、時代はレスポンシブ。そんな型にはまったよなウザいこと言ってんなよー!な自由度の高い有用な設計をじゃんじゃん公開してくれる人たちがおられます。具体的な画像のサイズ指定方法の一例ですが、次のよな感じです。
    img { max-width:100%; height:auto; width:auto /* width:100% よりも良きかな */}
    

    表示させたい画像の横幅が400pxで、それ以上には引き伸ばしたくない場合は “max-width” の値を “400px” で指定すれば良いとな。 “width” を “auto” にした方が無難な理由は下記ページをご欄くだされ。

    参照:【CSS】width:”auto”とwidth:”100%”の違い| セラピストのIT活用ガイド

    **********

    最近よく見かけるのがimg要素内のサイズ指定(width属性とheight属性の記述)もれ・・というか故意に指定してない感じ。CSSでやっちゃってるし、ブラウザー勝手に読み込むし・・なんて思ってるんやろか?これは明らかにレスポンシブ設計の悪影響のよな気がしますな〜。
    確かに優秀なモダンブラウザーは間違っても変な表示はしませんし、ブロードバンドのこの時代、img要素内にサイズ指定がなくても特に問題は発生しないかも知れませぬよ。しかーしっ!alt属性が抜けてるのと同じ位、このサイズ指定って文法的に重要やと思うんですが、いかがでしょ?いやま、そりゃ自分も100px未満くらいのサイズは省略しても大丈夫かな〜なんてサイズ指定の記述を抜くこともありやしたが・・

    何かまだまだせないレスポンシブ。新しい技術なだけに、お勉強される人、これからますます磨きをかける人、また教える人などは同時にWebの基礎やHTMLの歴史を更にしっかりと勉強していって欲しいと切に願っておりまする・・もちろん、自身も含めて。
    0
       | 技術的なところ | | | pookmark

      スポンサーサイト

      カテゴリー:-
      0
         | - | | | pookmark
        コメント欄
        コメントする


        ※メールアドレスは公開されません

        ※Name:欄に入力したお名前にリンクが設定されます




        この記事のトラックバックURL
        http://stressful.jugem.jp/trackback/344
        トラックバック

        Button of Go to Home

        Button of Back to Top