HTML5
可変レイアウト+固定レイアウト 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デザイン」と呼ばれるテクニックを利用する タイ国政府観光庁 タイ国政…
擬似クラス a要素を対象とする :link、:visited、:hover、:active の4つ :link と :visited はa要素のみに使用できる擬似クラス ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>擬似クラス</title> <style> a:link { color: green; } a:visited { color: gray; } a:ho…</meta></meta></head></html>
CSS3アニメーション CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツール 【CSS】コ…
マーキー 左右や上下にスクロールする文字や画像を表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>角度を変更した要素のマーキー</title> <link rel="stylesheet" href="css/style100.css" media="only screen and (max-width:480px)"> <…</link></meta></meta></head></html>
水平移動（連続移動背景） 画像の横幅が移動するために要する時間を設定する/li> ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>無限背景</title> <script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></meta></meta></head></html>
CSS3用リセット 《reset.css》 ソースコード【 CSS 】 @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, …
CSS3でデザイン CSS3を使いデザインする ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>森の工房についてGreen Leaf</title> <link rel="stylesheet" href="css/style72.css" media="all"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </link></meta></head></html>
解説 nav要素 nav要素はページ上のナビゲーションを表す サイトマップページのサイト内リンクは、サイトマップページ上ではメインコンテンツなので、nav要素を用いるのは不適切になる 参考 section要素 section 要素はページ上のセクションを表し、セクショ…
CSS Selectors CSS Selectors CSS Selectors 意外と知らない!?CSSセレクタ20個のおさらい 属性セレクタ class属性やid属性も含め、属性の値を使うセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>属性セレクタ</title> <style> [class] { color: hotpink; } </style> <…</meta></meta></head></html>
