レスポンシブデザイン
スマホレイアウト 今まではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像をサイズ…
グリッドレイアウトはレスポンシブデザインとの親和性が高く、容易にレスポンシブ化出来るため、初心者にとっては良い練習素材になります。 レスポンシブ化するために必要な作業 まずは今回のレイアウトでの必要なブレイクポイントの数とサイズを理解する。…
今回は以前作った既存サイト（キリン）の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。 slideToggleの動きに合わせたスイッチの作成 以前はtoggl…
前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 また、今回のナビゲーションボタンの画像はCSSスプライトで作ります…
ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。 また、スマホの機種によっては、「touchs…
レスポンシブサイトのタブレット・PCレイアウトを完成させます。 作例http://yachin29.webcrow.jp/sp-pc/ タブレット・PCレイアウトを完成させる為に行うことHTMLにタブレット・PC専用のコンテンツを挿入する。 ブレイクポイントを指定し、タブレット・PC用…
最後にPC用のナビにメガドロップダウンメニューを入れます 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならな…
PCレイアウト タブレット（959px〜641px） スマホ時（640px以下） このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良…
以前も言ったように既存のサイトをトレースする事は、非常に勉強になるので、積極的にやって行きましょう。 今回はキリンのサイトをトレースします。 こういったコンテンツの多いコーポレートサイトは細かい箇所の処理が多く、PCで見せる物とSPで見せる物を…
参考サイトhttp://racines-park.com/
グリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザイン…
各要素のレイアウトが上手くいかない場合は背景色を入れて可視化したり、webデベロッパーツールで要素を可視化出来るようにしましょう。 コーディング例 HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。 フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン（Grid Design）」と、ブラウザーの横幅が変わってもレイア…
今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px～959px スマートフォンサイズ 767px以…
フッター部分の制作 PC時のレイアウト スマホ時のレイアウト <footer> <div class="inner"> <ul> <li><a href="#">商品情報</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> <ul> <li><a href="#">キャンペーン</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○</a></li> </ul> </div></footer>
前回はdl要素を使いましたが、今回はli要素でマークアップをしていきましょう。 文章構造 <div id="News_area"> <div id="News_release"> <h2 id="News_click">ニュースリリース</h2> <ul id="News_text"> <li><span>2016年9月2日</span><a href="#">[スプリングバレーブルワリー東京（代官山）限定]「秋三昧」を新発売</a></li> <li><span>2016年9月1日</span><a href="#">「のどごし〈生〉」の新CMがスタート</a></li> <li></li></ul></div></div>
授業で制作を進めているモバイルファーストを意識したRWDサイト（netsmart）のモバイルサイト部分を完成させましょう。完成例 http://yachin29.webcrow.jp/sp/ 今回組み込むjQuery キービジュアルのスライド(bxslider) タブパネル アコーディオンパネル ウィ…
今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像をサイズを決めな…
画像を可変（フルード）にするには、２種類のやり方があります。imgタグで表示している画像にはフルードイメージの設定 img { max-width: 100%; } background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高…
既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。 見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。 開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課…
今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に３本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 ３本線の１番上の線と１番下の線を反時計周りに回転させ、✕…
前回の授業でfooterを含めて、静的ページでのレスポンシブサイトは完成です。 今回はさらにjQueryを使い動的部分を導入し、ユーザビリティーをさらに高めていく手段を考えて行きましょう。yachin29.hatenablog.com今回取り入れたいjQueryは footer部分をアコ…
前回の授業でPC用に制作したCotorier Cafeサイトをレスポンシブ対応させる yachin29.hatenablog.com PCサイトをレスポンシブにする場合、基本的にはPXで指定した値を%指定にして行きます。ここで注意したいのは幅は%で問題無いですが、高さは%だと不安定にな…
前回の授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。http://yachin29.hatenablog.com/entry/2015/06/12/111647yachin29.hatenablog.com フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿っ…
今回のパターンはブレイクポイントごとにカラム落ちしていくパターンで、 PCでは３カラム タブレットでは２カラム スマホでは１カラム になるレイアウトです。 このような場合は横幅に今までと同じように固定値を指定出来るので、簡単に作る事が出来ます。PC…
5月17日、GoogleがWebサイトのモバイルデバイスへの対応をチェックできるツール「モバイルフレンドリーテスト」の新バージョンをリリースしました。使い方はこれまでの「フレンドリーテスト」と同様にサイトのURLを入力するだけで、自動で解析して問題点を教…
複数ファイルでのレスポンシブデザインとviewportの設定 前回の授業で、レスポンシブデザインはメディアクエリーを使って各ブレイクポイントでCSSを切り替えマルチデバイスに対応する。という手法だという事が解ったと思います。 前回のように記述が短い場合…
以前制作した2カラムレイアウトのデータをレスポンシブ化します。ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>２カラムをRWDにする</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header></header> <nav></nav> <div id="wrapper"> <div id="content"></div> </div></div></body></html>
レスポンシブデザインサイトの制作ではスマホサイズでどのように見えているかを確認する為にスマートフォンのエミュレーターが必須です。 この「RWD Tester」は無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。 …
