メディアクエリ
ZOU｜TOP PAGE：完成版にリンク jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag：参考サイト <html lang="ja"> <head> <meta charset="UTF-8"> <title>ZOU｜TOP PAGE</title> <meta name="viewport" width="device-width"> </meta></meta></head></html>
枝豆隊長：完成版にリンク★以前の枝豆隊長に手を加える ・ハンバーガーメニューを作ってみる - 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる - 幅指定、ボーダーの指定を修正する ・ハンバーガーメニューで推奨されるサイズは44px以…
枝豆隊長：完成サイトにリンク★メディアクエリ時に、リストで組んでいるボタンが二段になる際の、borderの指示の仕方、nth-childに気をつける。 ★ボタンの色設定が、センスがいるなぁと思い、手こずった。 <html lang="ja"> <head> <meta charset="utf-8"> <title>枝豆隊長</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style_mame.css"> </link></meta></meta></head></html>
RWD：完成版にリンク★レスポンシブルレイアウトの際、どこに%を指定するのか <html lang="ja"> <head> <meta charset="utf-8"> <title>RWD</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header><h1>header</h1></header> <nav> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li></ul></nav></div></body></html>
fancyboxの使い方：完成版にリンク fancyBox - Fancy jQuery Lightbox Alternative：本家サイト★画像だけでなく、googlemap、作成したサイト、文章、youtubeなどをライトボックスのように表示することができる <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyboxの使い方</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>
楽しいおかず：完成版にリンク★レイアウトはかわらず、固定のまま <html> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </link></meta></meta></head></html>
楽しいおかず：完成版にリンク★PCサイズ、タブレットサイズ、スマホサイズのそれぞれでレイアウトが変わる設定★メディアクエリ対応のとき必ず挿入 ★ファビコンも忘れない meta name="viewport" content="width=device-width" link rel="shortcut icon" href=…
