2016-04-01から1ヶ月間の記事一覧
以前作った枝豆隊長のサイトをレスポンシブ対応させる ナビゲーションボタンがスマホサイズだと2行2列になるhttp://tototo.webcrow.jp/BlogUp/0401/ [html] <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ナビゲーションボタンのレスポンシブ スマホサイズの時に横に並んでいたナビゲーションが2行2列に変化http://tototo.webcrow.jp/BlogUp/0330/RWD/ [html] <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>メディアクエリnav</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
レスポンシブ基本 [html] <html> <head> <meta charset="utf-8"> <title>メディアクエリ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header></header> <nav></nav> <div id="wrapper"> <div id="content"></div> <div id="sidebar"></div> </div> <footer></footer> </div></body></html>
メディアクエリでレスポンシブ対応画面が小さくなるにつれてカラム落ちさせる javascriptでTOPに戻るようにする →→ http://tototo.webcrow.jp/BlogUp/okazu/index.html [html] <html land="ja"> <head> <meta charset="utf-8"> <title>楽しいおかず</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>
jQueryプラグイン-bxslider- http://tototo.webcrow.jp/BlogUp/bxslider/index.html [html] <html lang="ja"> <head> <meta charset="utf-8"> <title>bxslider</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></head></html>
CSS3 transform transition http://tototo.webcrow.jp/BlogUp/transform.html ホバーするとBOXが動きます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>transform</title> <style> div { width: 200px; height: 200px; margin: 10px; } .trans01 { background: #099; transition: 2s } .trans01:hover { t…</meta></head></html>
タブパネルhttp://tototo.webcrow.jp/0322/tab.html <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="style.css"> <script src="../js/jquery-2.2.1.min.js"></script> <script> $(function(){ var panelBox = $('ul.tab li a.selected').attr('href'); //u…</link></meta></head></html>
