サイト練習
枝豆隊長：完成版にリンク★以前の枝豆隊長に手を加える ・ハンバーガーメニューを作ってみる - 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる - 幅指定、ボーダーの指定を修正する ・ハンバーガーメニューで推奨されるサイズは44px以…
★レギュレーション：複数ページをつくるときのルールになる型 いつでも作れるようにしておく ◎縦ナビゲーション 縦ナビゲーション：完成版にリンク <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*re…</meta></head></html>
枝豆隊長：完成サイトにリンク★メディアクエリ時に、リストで組んでいるボタンが二段になる際の、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>
背景が動画2：完成版にリンク NASA：文章をお借りしています Mazwai：動画をお借りしています Google Fonts：google fonts★ビデオタグの使い方 ★ビデオの上に文章が重なるので、ビデオにはz-indexを振り分けている <html lang="ja"> <head> <meta charset="utf-8"> <title>背景が動画2</title> </meta></head></html>
背景が動画：完成版にリンク 上野動物園の歴史 ｜ 上野動物園公式サイト - 東京ズーネット：文章をお借りしています NHKクリエイティブ・ライブラリー：動画をお借りしています Google Fonts：google fonts★ビデオタグの使い方 ★ビデオの上に文章が重なるの…
楽しいおかず：完成版にリンク★レイアウトはかわらず、固定のまま <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=…
パスタとワインの店 atella：完成版にリンク★ポジションレイアウトを習ったばかりだったので、ポジションで組んでしまったのですが、実際にはフロートなどで組んだ方が安定するのでそうするべき、というコメントをいただいて、ショックをうけました。 ヘッダ…
卵料理カフェ Cockeyolly：完成版にリンク★難しかったところ 文章と写真をdivで囲い、写真を右上に表示するためには、写真と文章をpタグで囲い、写真を前にもってくる。それに float: right; を指定する。 <html> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="sidebar"> </div></div></body></html>
