授業
サイト構築 《order.html》 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Wants Cake</title> <link rel="stylesheet" href="css/style4.css" media="screen,print"> </head> <body> <div id="to_body"> <div id="container"> <div id="header"> <h1 class="logo1"></h1></div></div></div></body></html>
サイト構築 《shop.html》 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Wants Cake</title> <link rel="stylesheet" href="css/style5.css" media="screen,print"> </head> <body> <div id="to_body"> <div id="container"> <div id="header"> <h1 class="logo1"></h1></div></div></div></body></html>
サイト構築 《products.html》 《item.html》 《拡大写真》 ソースコード【 HTML 】《products.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Wants Cake</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <div id="to_body"> <div id="container"> <div id="header"> …</div></div></div></body></html>
サイト構築 《index.html》 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Wants Cake</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="to_body"> <div id="container"> <div id="header"> <div class="bill"> <h1 class="logo1"><…</h1></div></div></div></div></body></html>
smart4meを使ったWebサイト制作 スマートフォンCMS（無料） smart4me URLバブサイトとして活用 制作物を管理する目的で構築 はてなダイアリー Jimdo 各Webサイトへのハブ機能として活用 スマートフォンで表示 PAGE TOP
可変レイアウト+固定レイアウト HTML5での設計 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="css/style-l16.css"> </link></meta></meta></head></html>
画面サイズごとのデザイン HTML5での記述 ソースコード【 HTML 】 <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-l12.css"> </link></meta></meta></head></html>
画面サイズごとのデザイン レイアウトの設定 Lサイズのレイアウト設計 Mサイズのレイアウト設計 Sサイズのレイアウト設計 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="css/style-l15.css"> </link></meta></meta></head></html>
HTML5で記述 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>レスポンシブWebデザインHTML5_src</title> <link rel="stylesheet" href="css/style-s3.css"> </link></meta></meta></head></html>
画面サイズごとのデザイン レイアウトの設定 Lサイズ：横幅960px Mサイズ：横幅620px Sサイズ：横幅300px Lサイズのレイアウト設計 Sサイズのレイアウト設計 ソースコード【 HTML 】 <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style-l11.css"> </link></meta></meta></head></html>
Forms Default stylesソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form> <legend>Legend</legend> <label>Label name</label> </form></body></html>
Forms Default stylesソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <textarea rows="3"></textarea> </body></html>
Bootstrap Buttons Buttons Default buttons ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <button class="btn">Buttons</button> <button class="btn btn-primary">Button…</button></body></html>
画面サイズごとのデザイン １つの内容でマルチデバイス対応の見た目を作る [CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例 「角丸やシャドウだけではないCSS3の大切な三つのテクニック」の一つ、Media Queriesの使い方と実装例の紹介 【CSS】C…
可変の設定 「fluid」を可変エリアのセレクタ名に追加する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div id="header"> header </div> <div class="row-fluid"> …</div></div></body></html>
Twitter Bootstrap <link href="css/bootstrap.min.css" rel="stylesheet">ファイルを使用 Bootstrap Typography Emphasis classesソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> </body></html></link>
Tables 「thead」「tbody」の記述が必須 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <table class="table"> <thead> <tr><th>曜日</th><th>訪問者数</th></tr> </thead> <tbody> <tr><td>…</td></tr></tbody></table></body></html>
Forms 「thead」「tbody」の記述が必須 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <table> <thead> <tr><th>曜日</th><th>訪問者数</th></tr> </thead> <tbody> <tr><td>月</td><td>3100<…</td></tr></tbody></table></body></html>
参考サイト ゼロから始めるレスポンシブWebデザイン入門 (ASCII.jp) 「可変グリッドレイアウト」機能の使い方 (Adobe Developer) Adobe HTML5 特設サイト Responsive Design with Mockups 実例 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサ…
Fluid Image Fluid Imageとは、ウィンドウサイズに合わせて画像サイズも可変させる手法 Fluid Imageのデモ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Fulid Image</title> <link rel="stylesheet" href="css/style130.css"> </link></meta></meta></head></html>
Twitter Bootstrap Twitter社が作った、CSSフレームワーク iQueryに依存している Twitter Bootstrap Twitter Bootstrapの使い方 Twitter Bootstrapの使い方 Twitter Bootstrapを導入 解凍したファイルを管理フォルダーに入れる 新規ドキュメント作成 「index…
grid system 12個のコラムで、幅940pxの container を構成する レイアウトの記述 「class="row"」で「行」を、「class="span4"」でカラム数を指定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> </body></html>
ゼロから始めるレスポンシブWebデザイン入門 ASCII.jp 日本のスマホサイトは2年間でこんなに変わったWebサイトのRetina対応は必要か？ 流行期を過ぎたレスポンシブ・Webデザインのこれから レスポンシブWebデザインのメリット、デメリット比較まとめ 一個覚…
レスポンシブ主要レイアウトパターン プロトタイプを作る 可変レイアウト 可変レイアウトによるレスポンシブWebデザイン 最も利用頻度の高いレイアウトパターン Sサイズ 599px以下 Mサイズ 600px〜979px Lサイズ 980px以上 固定レイアウト 各画面サイズで固…
メディアクエリとスタイルシート 横幅をいくつかの範囲にわけてデザインを切り替える 「CSS3メディアクエリ」を利用する 特定の画面サイズで表示したときに適用するスタイルシート <link rel="stylesheet" href="スタイルシート名.css media="only メディアタイプ and (特性)" > 外部スタイルシートを読み込む<link rel="stylesheet" href="外部スタイルシート名.css media="only メディアタイプ and (特性)" > CSS内に設定を記述@media only メディアタイ</link></link>…
デザインのベースとなるスタイル 【 例 】 style-s.css：599px以下 style-m.css：600px〜979px style-l.css：980px以上 【 書式 】 《sample.html》 スマートフォンの場合は、自動的に「style-s.css」が選択される <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリ</title> </meta></meta></head></html>
レスポンシブWebデザイン 多様なデバイスに対応するためのWebページ制作 iPhone、iPadはもちろんAndroidを搭載したスマートフォンやタブレットへも対応することが必要 「レスポンシブWebデザイン」と呼ばれるテクニックを利用する タイ国政府観光庁 タイ国政…
ibbdemo3 iPhone, iPad の表示を PC 上で行うエミュレータ プラグインのダウンロード ibbdemo3 ibbdemo3の使い方 Demo3 – iPhone, iPad の表示を PC 上で行うエミュレータ 確認したいURLを記入 キーボード/マウスでの各種操作 iPad 表示に切り替え キーボー…
iPad 2のシミュレーター PCやMacのブラウザ上で動作するiPad 2のシミュレーターが公開 iPad 2のシミュレーター 参考サイト iPad 2のシミュレーターはスゴイ！ | モバイル林檎ニュース | iPhone/iPad/Mac 表示方法 右にスライドでスタート safariを選択 URLの…
Google web fonts 商用・非商用を問わず無料で利用できるWebフォント 使いたいフォントを選択する CSSを追加する スタイルシートにてfont-familyを適用する Google web fonts Google web fonts使い方 今さらながらWebフォント「Google web fonts」の使い方・…
