srcsetを使って画像を切り替える
img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。
srcsetとは
- srcsetはHTML5で策定された新属性
- この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
- IEでは使うことが出来ない(http://caniuse.com/#search=srcset)
picture要素
picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。
- media属性(メディアクエリ)
- srcset属性
- sizes属性
srcset属性
画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。
sizes属性
表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例：ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。
sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース
今回の仕様は
- デバイスの横幅が1200px以上の場合は1200px幅のpc用画像を画面中央に表示
- デバイスの横幅が1200px~641pxの間は1200px幅のpc用画像を画面画面一杯にフルードで表示。
- デバイスの横幅が640px以下の場合は640px幅のsp用画像を画面一杯にフルードで表示。
※imgにフルードイメージの設定を必ず指定
<body> <picture> <!--1200px以上の時に表示したい画像の指定--> <source media="(min-width:1200px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w" sizes="1200px"> <!--1199~641pxの時に表示したい画像の指定--> <source media="(min-width:641px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w" sizes="100vw"> <!--640px以下の時に表示したい画像の指定--> <img srcset="https://placehold.jp/6edb4c/ffffff/640x450.jpg?text=sp 640w" sizes="100vw" alt=""> </picture> </body>
レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。
ics.media
要件定義の作成
要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第３者でも分かるように明確化しておく作業のことです。
要件定義は、Web サイトやアプリ開発において非常に重要な役割を担っていて、要件定義のでき次第で開発の成功が左右されるとも言われています。
一般的に要件定義の主導権は受注側（開発側）のディレクターが担い、要件定義にどこまでこだわり、どこで完成とするか、判断する必要があります。でき上がった要件定義は、要件定義書として発行し、受発注間で管理します。
事前に要件定義をしっかり作って置く事で、クライアントに安心感を与える事も出来るので、必ず最初の顔合わせの前に自身でまとめておきましょう。
要件定義で明確にしたいポイント
デザイン部分
- メインターゲット
- おおまかなデザインコンセプト
- コーポレートカラーの有無
- 出版物や販促物などの有無
- 画像・文章の確認
- 参考にしたいサイト
などをクライアントとミーティングを重ねて、明確にします。特に費用が発生するものは費用感もこちらで把握し、クライアントに提示しましょう。
1月16日の授業分コード
・ドロップダウンメニューの実装
・スマホ時にコンテンツを横スクロールで表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ドロップダウンメニューと横スクロールの実装|パターンB</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <header> <h1>サイトタイトル2</h1> <nav class="g-nav"> <ul class="g-nav-list"> <li><a href="#">トップ</a></li> <li><a href="#">お知らせ</a></li> <li><a href="about/">当店について</a> <div class="sub-list"> <a href="about/index.html#south"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>南口店</span></p> </a> <a href="about/index.html#north"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>北口店</span></p> </a> <a href="about/index.html#east"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>東口店</span></p> </a> <a href="about/index.html#west"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>西口店</span></p> </a> </div><!-- /.sub-list --> </li> <li><a href="#">採用情報</a></li> </ul> </nav> </header> <div class="scroll-wrapper"> <div class="wrapper"> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> </div><!-- /.wrapper --> </div><!-- /.scroll-wrapper --> </body> </html>
style.css
@charset "utf-8"; /* ress.css • v1.2.2* MIT License* github.com/filipelinhares/ress*/html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;} /* Bパターン */ h1{ text-align:center; padding: 20px; } .g-nav{ width: 100%; height: 50px; background-color: rgb(150, 100, 100); } .g-nav-list{ max-width: 960px; display: flex; margin: 0 auto; position: relative; } .g-nav-list>li{ width: 25%; } .g-nav-list>li>a{ display: block; text-align: center; line-height: 50px; color: #FFF; border-right: 1px solid #FFF; } .g-nav-list>li:first-of-type>a{ border-left: 1px solid #FFF; } .sub-list{ visibility: hidden; opacity: 0; display: flex; position: absolute; width: 100%; background-color:lightgray; left: 0; justify-content: space-around; padding: 20px 0; } .sub-list img{ max-width: 100%; } .sub-list>a{ display: block; width: calc((100% - 120px) / 4); padding: 10px; } .sub-list>a:hover{ background-color: lightyellow; } .sub-list span{ display: block; } .g-nav-list>li:nth-of-type(3):hover>.sub-list{ visibility: visible; opacity: 1; transition: 1s; } .wrapper{ max-width: 960px; margin: 200px auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10px; } .box{ width: calc((100% - 80px) / 3); margin-bottom: 40px; border: 1px solid #333; padding: 16px; border-radius: 6px; } .box>h2{ margin-bottom: 10px; } .box img{ max-width: 100%; } @media (max-width:959px){ .box{ width: calc((100% - 40px) / 3); } } @media (max-width:640px){ .scroll-wrapper{ width: 100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .wrapper{ flex-wrap: nowrap; justify-content: space-around; max-width: initial;/* max-widthの指定をリセット */ width: 520%; } .box{ width:calc((100% - 100px) / 6); } }
スマホ時に横スクロールのUIを実装
最近はスマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また、シンプルな横スクロールのUIであれば、CSSのみで実装出来るので覚えましょう。
-webkit-overflow-scrolling: touch
本来、はみ出た要素をスクロールで動かすには「overflow: scroll」で良いのですが、「overflow: scroll」ではIOS系のデバイスでスクロールの動きがぎこちなくなるので、代わりに「-webkit-overflow-scrolling: touch」を指定します。
1月16日分
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ドロップダウンメニューと横スクロールの実装|パターンB</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <header> <h1>サイトタイトル2</h1> <nav class="g-nav"> <ul class="g-nav-list"> <li><a href="#">トップ</a></li> <li><a href="#">お知らせ</a></li> <li><a href="about/">当店について</a> <div class="sub-list"> <a href="about/index.html#south"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>南口店</span></p> </a> <a href="about/index.html#north"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>北口店</span></p> </a> <a href="about/index.html#east"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>東口店</span></p> </a> <a href="about/index.html#west"> <p><img src="https://placehold.jp/3d4070/ffffff/240x200.jpg" alt=""><span>西口店</span></p> </a> </div><!-- /.sub-list --> </li> <li><a href="#">採用情報</a></li> </ul> </nav> </header> <div class="scroll-wrapper"> <div class="wrapper"> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> <div class="box"> <h2>画像の見出し</h2> <p><img src="https://placehold.jp/c23482/ffffff/300x240.jpg" alt=""></p> </div><!-- /.box --> </div><!-- /.wrapper --> </div><!-- /.scroll-wrapper --> </body> </html>
style.css
@charset "utf-8"; /* ress.css • v1.2.2* MIT License* github.com/filipelinhares/ress*/html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;} /* Bパターン */ h1{ text-align:center; padding: 20px; } .g-nav{ width: 100%; height: 50px; background-color: rgb(150, 100, 100); } .g-nav-list{ max-width: 960px; display: flex; margin: 0 auto; position: relative; } .g-nav-list>li{ width: 25%; } .g-nav-list>li>a{ display: block; text-align: center; line-height: 50px; color: #FFF; border-right: 1px solid #FFF; } .g-nav-list>li:first-of-type>a{ border-left: 1px solid #FFF; } .sub-list{ visibility: hidden; opacity: 0; display: flex; position: absolute; width: 100%; background-color:lightgray; left: 0; justify-content: space-around; padding: 20px 0; } .sub-list img{ max-width: 100%; } .sub-list>a{ display: block; width: calc((100% - 120px) / 4); padding: 10px; } .sub-list>a:hover{ background-color: lightyellow; } .sub-list span{ display: block; } .g-nav-list>li:nth-of-type(3):hover>.sub-list{ visibility: visible; opacity: 1; transition: 1s; } .wrapper{ max-width: 960px; margin: 200px auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10px; } .box{ width: calc((100% - 80px) / 3); margin-bottom: 40px; border: 1px solid #333; padding: 16px; border-radius: 6px; } .box>h2{ margin-bottom: 10px; } .box img{ max-width: 100%; } @media (max-width:959px){ .box{ width: calc((100% - 40px) / 3); } } @media (max-width:640px){ .scroll-wrapper{ width: 100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .wrapper{ flex-wrap: nowrap; justify-content: space-around; max-width: initial;/* max-widthの指定をリセット */ width: 520%; } .box{ width:calc((100% - 100px) / 6); } }
Webサイトの構成表の作成
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。
サイトマップとは？
サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか？」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の２種類があります。
構成表作成の手順
掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。
コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ！」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。
ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層（２〜３階層）を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。
課題
自身で１つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。
上記のサイトの場合の例
コンテンツ構成表
ページ構成：5ページ
- Home：トップページ
- About
- Menu
- Party
- Contact
- Reservations（外部サイトへのリンク）