KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > HTMLを始めよう! その7

Web・DTPデザイン

HTMLを始めよう! その7

KENスクールONLINE

html要素の紹介も第7弾です。

前回は、video要素とaudio要素をご紹介しました。
今回は、HTML5.1から追加された「picture要素」をご紹介します。

近年、Webサイトと言えば「レスポンシブサイト」が多くなってきました。
パソコンやスマホなどマルチデバイス対応するサイトです。

レスポンシブWebデザインは、基本的には「モバイルファースト」という考え方を持っていますので
モバイルの特性を考慮してコンテンツの戦略を考えます。
情報自体はデバイスによって変更は出来ませんし、画像表示もCSSのメディアクエリを利用し大きさのみを制御していました。

HTML5.1からpicture要素が追加され、簡単に画像を入れ替えることが可能になりました。

picture要素の中にsource属性をネストし使用します。
media属性に画面サイズの指定をして、srcset属性で画像パスの指定をします。

サンプルページ

画面サイズが960px以上であれば「1200.jpg」が表示されます。
画面サイズが960px以下であれば「960.jpg」が表示されます。
画面サイズが600px以下であれば「400,jpg」が表示されます。

となります。

今までのようにCSSのメディアクエリでサイズを変更するだけではなく、画像を切り替えることができるので表現の幅が広がりますね。

新しい要素なのでまだ対応していないブラウザもありますので、使用する際はしっかりブラウザチェックをしましょう。

WEB初心者から最短3ヵ月でWEBデザイナーを目指す

コロナ禍でリモートワークが増え、在宅でできるWEBデザイナーの仕事に人気が集まっています。

そこでKENスクールではニーズの高いオンライン完結のWEBデザインスクールを開校しました。WEBデザイナーになるために必要なカリキュラムを揃え、資格系を除いたすべてのカリキュラムを、通学と同じクオリティで提供致します。

完全マンツーマン授業で毎回先生が変わらないので、生徒の悩み、得手不得手などにいち早く気づき、生徒一人ひとりに合わせた指導をする事が可能です。

最短3ヵ月でWEBデザイナーを目指せる実践レベルで学ぶためのカリキュラムで、就転職のサポートまで付いたコースをご用意しています。

無料カウンセリングも実施していますので、ご興味のある方はこちらよりお問い合わせください。

この記事に関連する講座

HTML5の新しい要素をご紹介!

詳しくはこちら