レスポンシブデザイン
授業で進めていた、モバイルファーストを意識したレスポンシブデザインサイトの制作もいよいよPCレイアウト（960px以上）を整えて終了です。基本的にはタブレットサイズで768pxに指定していた横幅を960pxにすれば完成です。 http://yachin29.com/sp-pc/index…
レスポンシブデザインの練習では、まずは固定レイアウトの作り方をしっかりと覚えましょう。 今回のブレイクポイントである、 PCレイアウト 960px以上 タブレット 959px～768px スマホ 767px以下を踏まえて、各ブレイクポイント内で最小幅のpxで横幅の指定を…
制作したRWDサイトのギャラリー部分に動きをつけます。 今回はサムネイルが並んでいるギャラリー部分にjQueryプラグインの「masonry」を導入します。masonry.desandro.com 「masonry」を導入する事で、タブレット・スマホ時のCSSの記述も変更が必要になりま…
http://yachin29.html.xdomain.jp/test6.zip 1、試験データ(zipファイル)をダウンロードし解凍する 2、新規にフォルダーを作成し、自分の苗字（半角英数字）をつける。 3、完成イメージ(kansei.jpg)を基に以下の様に制作する事。指示の無い箇所は適宜各自で…
http://yachin29.html.xdomain.jp/test6.zip 1、試験データ(zipファイル)をダウンロードし解凍する 2、新規にフォルダーを作成し、自分の苗字（半角英数字）をつける。 3、完成イメージ(kansei.jpg)を基に以下の様に制作する事。指示の無い箇所は適宜各自で…
レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能です。メディアクエリーを使ったCSSの…
先日制作したレスポンシブサイトに今度は横から出てくるスワイプメニューを加えてみましょう。今回はスライドの動きをCSS3の「transition」と「transform」を使い、ボタンでの制御は前回同様jQueryを使います。 http://yachin29.com/kirin/index3.html スラ…
先日制作したレスポンシブサイトにjQueryで動くナビゲーションボタンをつけ加えてみましょう。ボタンをタップすると下に出てくるドロップメニューと 横からスライドして出てくるメニューの2種類をここでは作ってみます。 メニューボタンはスマートフォンサイ…
http://yachin29.com/kirin/ 用意する画像 ギャラリー部分 378px×378px 1枚 378px×184px 3枚 184px×184px 5枚 スライド部分 980px×400px 3枚の合計12枚 PC用ーボタン画像 タブレット用ーボタン画像 まずはギャラリー部分の作成 （白い隙間はすべて10pxとする…
レスポンシブデザインサイトを制作するうえで、ブレイクポイントの設定は必須です。しかし授業でも述べているように、ブレイクポイントの値は今の所これといった決まった値があるわけでは無く、その時々の主要デバイスの大きさによって変化していきます。ま…
豆はカラダにイイホーム枝豆一覧枝豆隊アクセス 枝豆の栄養素はスゴい枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出す…
index.html <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> </link></link></link></meta></head></html>
index.html <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> </link></link></link></meta></head></html>
index.html <html> <head> <meta charset="utf-8"> <title>2カラムレイアウトRWD風</title> <link rel="stylesheet" href="rwd.css"> </head> <body> <div id="container"> <header>header</header> <nav>nav</nav> <div id="wrapper"> <div id="content">content</div> <div id="sidebar">sidebar</div> </div></div></body></html>
http://yachin29.html.xdomain.jp/sample2.html 参考サイト wiseyeti.co.ukwiseyeti.co.uk index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>無題ドキュメント</title> </meta></meta></head></html>
これまでの授業でモバイルサイトから作っていくモバイルファーストや、既存の企業サイトをモデルにした物など数種類のレスポンシブデザインのサイトを制作してきましたが、大事なポイントをまとめると、 - メディアクエリー メディアクエリーの使い方には、1…
授業で制作したレスポンシブデザインのサイトをモデルとして使用した既存サイトと同じ動きになるよう細かい修正を加えました。 PC・タブレットサイズでは２×２サイズの大きなピザの写真がスマートフォンサイズでは相対的に大きく見え過ぎるので、スマートフ…
<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <title>キリン風レスポンシブ対応サイト</title> <link rel="apple-touch-icon" href="touch-icon.png"> <…</link></meta></meta></meta></head></html>
完成データ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>株式会社ネットスマート</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </meta></meta></meta></head></html>
現在のモバイルサイトではメニューボタンを押すとナビゲーションが出てくるようになっていますが、PCサイズで見た時は常にナビゲーションが表示されているように記述します。まずはHTMLファイルに必要なクラス名を加えます。 <header id="globalHeader"> <div class="headerInner"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"></p></div></div></header>
以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。 yachin29.hatenablog.com ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよ…
