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

BLOGKENスクールブログ

Web・DTPデザイン

HTML5.1

KENスクールONLINE

HTML5が2014年10月に正式に勧告されてから2年経ちますが、マイナーアップデートバージョンとして「HTML5.1」が2016年11月1日に正式に発表されました。

「HTML5.1」ではHTML5に機能拡張が施され、要素や属性の追加や変更が実施されています。

今回、追加された機能で最も期待されているのが、レスポンシブWebデザインを簡単に実現できる「picture要素」です。

「picture要素」内に「source要素」と「srcset属性」で読み込ませたい画像を指定した上で、必要な数だけネストする事で、端末に応じた画像を表示させる事ができるようになります。

下記の例では、通常時は「img要素」で指定した「small.jpg」を表示しますが、画面サイズが1000px以上の場合は「large.jpg」を表示し、画面サイズが640px以上の場合は「middle.jpg」を表示します。

 

 

レスポンシブWebデザインでは、1枚の高解像度画像を画面サイズに応じて伸長表示させていましたが、読み込む画像のファイルサイズが同一の為、スマートフォンでの利用は不向きとされていました。今後は「picture要素」を使用する事で、画面サイズに応じた適切な画像の読み込み指定を行えるようになります。

Retinaディスプレイ用に画像を切り替えるのに最適ですね。

ただしIEには未対応との事なので使用する際にはご注意ください。

「HTML5.1」のその他の変更点について興味のある方はW3Cの公式リリースを参照ください。

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

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

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

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

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

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

この記事に関連する講座

HTML5とCSS3の基本コーディングが身につく!

詳しくはこちら