レスポンシブ:企業サイト
TimeSwitch|トップ:完成版にリンク
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TimeSwitch|トップ</title> <meta name="viewport" content="width=device-width"> <meta name="apple-mobile-web-app-title" content="TimeSwitch"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont--> <link rel="stylesheet" href="css/style.css"> <!-- iOS Safari and Chrome --> <link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png"> <!-- Android標準ブラウザ(一部) --> <link rel="shortcut icon" href="touch-icon.png"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> </head> <body> <header> <div class="g_nav"> <h1><a href="#">TimeSwitch</a></h1> <nav> <ul class="header_nav"> <li><a href="#" class="this">トップ</a></li> <li><a href="#">沿革</a></li> <li><a href="#">事業紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </div><!--.g_nav--> </header> <div id="container"> <div id="billboad"> <a href="#"><img src="img/header.jpg" alt="#"></a> <div class="billboad_overlap"> <h2>TimeSwitchは、データの蓄積と<br>分析・解析のサービスを提供します。</h2> </div><!-- .billboad_p --> </div><!-- #billboad --> <div class="features_float"> <a href="#"> <section class="features"> <i class="fa fa-database" aria-hidden="true"></i> <h3 class="h3_white">データの分析・解析</h3> <p class="p_white">目的に応じてさまざまな角度から<br> データを分析・解析します。</p> </section> </a> <a href="#"> <section class="features features_margin"> <i class="fa fa-bar-chart-o" aria-hidden="true"></i> <h3 class="h3_white">わかりやすく視覚化</h3> <p class="p_white">解析結果はわかりやすく視覚化し、<br> 活用できるようにします。</p> </section> </a> <a href="#"> <section class="features features_margin"> <i class="fa fa-envelope" aria-hidden="true"></i> <h3 class="h3_white">24時間サポート</h3> <p class="p_white">24時間サポートでトラブルにも<br> 素早く対応します。</p> </section> </a> </div><!--.features_float--> <div id="wrapper"> <section class="info"> <h4>お知らせ</h4> <dl> <dt>10/15</dt><dd>データセンターのメンテナンスを行います。</dd> <dt>10/05</dt><dd>Android版アプリ バージョン1.2をリリースしました。</dd> <dt>09/22</dt><dd>セミナー開催に伴うキャンペーンのお知らせ。</dd> <dt>09/15</dt><dd>グラフ表示の切替方法がわかりやすくなりました。</dd> </dl> </section> <section class="sns"> <h5>最新情報はこちらでも配信しています</h5> <ul id="sns_kind"> <li class="twitter sns_common"><a href="#"><i class="fa fa-twitter fa_common"></i>Twitter</a></li> <li class="facebook sns_common"><a href="#"><i class="fa fa-facebook fa_common"></i>Facebook</a></li> <li class="google sns_common"><a href="#"><i class="fa fa-google-plus fa_common"></i>Google+</a></li> </ul> </section> </div><!--#wrapper--> </div><!--#container--> <footer><p>Copyright © TimeSwitch</p></footer> </body> </html>
@charset "UTF-8"; /* CSS Document */ /***********************************/ /* reset */ html, body, div, h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ cursor: pointer; } img { border: 0; vertical-align: bottom; } article, aside, footer, header, main, menu, nav, section { display: block; } /***********************************/ /* font */ html { font-size: 62.5%; } body { font-size: 14px; } body { font-size: 1.4rem;} h1 { font-size: 32px; } h1 { font-size: 3.2rem; } h2 { font-size: 24px; } h2 { font-size: 2.4rem; } h3 { font-size: 20px; } h3 { font-size: 2.0rem; } h4 { font-size: 18px; } h4 { font-size: 1.8rem; } h5 { font-size: 16px; } h5 { font-size: 1.6rem; } p { font-size: 16px; } p { font-size: 1.6rem; } ul { font-size: 16px; } ul { font-size: 1.6rem; } small { font-size: 10px; } small { font-size: 1.0rem; } /***********************************/ header { width: 100%; border-bottom: 1px dotted #E1E1E1; } .g_nav { width: 1140px; overflow: hidden; margin: 20px auto; } h1 { width: 22%; float: left; height: 33px; /*文字を隠す*/ background: url(../img/logo.png) no-repeat top left; white-space: nowrap; text-indent: 100%; oerflow: hidden; } h1:hover { opacity: 0.7; cursor: pointer; } /****** navigation ******/ .header_nav { width: 42%; float: right; overflow: hidden; } .header_nav li { float: left; font-size: 1.4rem; font-weight: bold; line-height: 33px; } .header_nav li a { display: block; height: 33px; padding: 0 20px; color: #000; border-left: 1px solid #FFF; box-sizing: border-box; transition: 0.3s; } .header_nav li a:first-child { border-right: none; } .header_nav li a:hover{ background: #E1E1E1; } .header_nav li a.this { background: #E1E1E1; } /***********************************/ #container { width: 1140px; margin: 20px auto 0; } /***********************************/ #billboad { position: relative; margin-bottom: 20px; /*.billboad_p の親要素になるために必要*/ } #billboad img { max-width: 1140px; } .billboad_overlap { position: absolute; /*imgの上に重なる*/ bottom: 20px; left: 20px; z-index: 100; background: rgba(255,255,255,0.7); } .billboad_overlap h2 { font-size: 2rem; font-weight: bold; line-height: 1.8; padding: 20px; } /****** 会社の特徴 フロート ******/ .features_float { width: 100%; clear: both; overflow: hidden; margin-bottom: 40px; } .features { float: left; width: 32%; transition: 0.2s; } .features_margin { margin-left: 2%; } .features:hover { opacity:0.7; } /****** h3 詳細の設定 ******/ .h3_white { padding: 14px 0; color: #FFF; font-size: 2rem; text-align: center; line-height: 1.5; background-color: #1A1A1A; } .p_white { padding: 20px 0; color: #FFF; text-align: center; line-height: 1.8; background-color: #575757; } .fa-database, .fa-bar-chart-o, .fa-envelope { width: 100%; padding:30px 0; color: #FFF; font-size: 3.2rem; /*fontawesomeのサイズ*/ text-align:center; } .fa-database { background-color: #38a88f; } .fa-bar-chart-o { background-color: #f68624; } .fa-envelope { background-color: #f45c20; } /****** お知らせと最新情報 ******/ #wrapper { width: 100%; margin-bottom: 40px; overflow: hidden; } .info { width: 66%; padding: 24px 32px; border: 2px solid #CCC; float: left; box-sizing: border-box; } .info h4 { margin: 0 0 10px 10px; color: #575757; font-size: 1.6rem; } .info dt { width: 14%; margin-left: 18px; padding: 10px 10px 10px 0; color: #898989; font-weight: bold; letter-spacing: 0.16rem; float: left; } .info dd{ width: 100%; padding: 10px 0; color: #000; border-bottom: 1px dashed #CCC; transition: 0.2s; } .info dd:hover { cursor: pointer; display: block; background: #DFDFDF; } /***********************************/ .sns { width: 32%; margin-left: 2%; float: left; } .sns h5 { display: inline-block; width: 100%; line-height: 40px; margin-bottom: 6px; padding: 6px 0; position: relative; z-index: 0; color: #2B2B2B; font-size:14px; text-align: center; border-radius: 6px; background: #E1E1E1; } /****** 三角を作る ******/ .sns h5:before { content: ""; border: 8px solid transparent; border-top: 8px solid #E1E1E1; position: absolute; right: 50%; bottom: -16px; /*ここで三角の位置が変わる*/ } .sns h5:after{ content: ""; border: 8px solid transparent; border-top: 8px solid #E1E1E1; position: absolute; right: 50%; bottom: -16px; } /****** snsの設定 ******/ #sns_kind li { font-weight: bold; line-height: 22px; letter-spacing: 0.05rem; } #sns_kind li a { display: block; margin: 10px; padding: 10px; color: #fff; } .sns_common { border-radius: 6px; } .fa_common { width: 20px; margin-right: 20px; font-size: 1.8rem; } .sns_common:hover { background: #EAEAEA; transition: 0.3s; } .twitter { background-color: #55ACEE; } #sns_kind li.twitter a:hover { color: #55ACEE; } .facebook { background-color: #3765A3;} #sns_kind li.facebook a:hover { color: #3765A3; } .google { background-color: #DB4437;} #sns_kind li.google a:hover { color: #DB4437; } /****** footer ******/ footer { width: 100%; height: 60px; background: #E1E1E1; clear: both; } footer p { color: #2B2B2B; font-size: 1.4rem; text-align: center; line-height: 60px; letter-spacing: 0.05rem; } /***********************************/ /****** タブレット ******/ @media screen and (max-width:768px){ header { width: 100%; border-bottom: none; } .g_nav { width: 100%; overflow: hidden; margin-top: 0px; margin-bottom: 24px; } h1 { width: 96%; margin: 2%; float: none; height: 33px; } /****** navigation ******/ .header_nav { width: 98%; margin-left: 2%; float: none; } /***********************************/ #container { width: 100%; margin: 0 auto; } /***********************************/ #billboad { margin-bottom: 14px; } #billboad img { max-width: 100%; } /****** 会社の特徴 フロート ******/ .features_float { width: 100%; margin-bottom: 0px; } .features { float: none; width: 96%; margin: 2%; } /****** h3 詳細の設定 ******/ .h3_white { padding: 14px 0; font-size: 1.6rem; } .p_white { padding: 15px 0; font-size: 1.2rem; } /****** お知らせと最新情報 ******/ #wrapper { width: 100%; margin-bottom: 20px; overflow: hidden; } .info { width: 96%; margin: 2% 2% 4% 2%; float: none; } .info dt { width: 14%; margin-left: 18px; padding: 10px 10px 10px 0; float: left; } .info dd{ width: 100%; padding: 10px 0; } /***********************************/ .sns { width: 96%; margin: 2%; float: none; } .sns h5 { width: 100%; } } /****** スマホ ******/ @media screen and (max-width:599px){ header { margin-bottom: 10px; } /****** navigation ******/ .header_nav li { font-size: 1.2rem; } .header_nav li a { padding: 0 10px; } /***********************************/ #container { width: 100%; } /***********************************/ #billboad img { max-width: 100%; } .billboad_overlap { bottom: 10px; left: 10px; } .billboad_overlap h2 { font-size: 1.2rem; padding: 10px; } /****** お知らせと最新情報 ******/ .info { padding: 20px ; } .info h4 { margin-left: 0; } .info dt { width: 20%; margin-left: 4px; padding: 14px 10px 10px 0; } .info dd{ width: 100%; padding: 10px 0; line-height: 1.5; } }
jQuery:CSS3: KIRINのサイトを真似する
ZOU|TOP PAGE:完成版にリンク
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag:参考サイト
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ZOU|TOP PAGE</title> <meta name="viewport" width="device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/wideSlider.css"> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/> <script src="js/jquery-2.2.4.min.js"></script> <script src="js/wideSlider.js"></script> <script> $(function(){ var w = $(window).width(); //ブラウザの幅を取得 var x = 767;//ブレイクポイントを設定 if(w <= x){ //ブレイクポイントでアコーディオンが動くようにする条件分岐 $('footer li:first-child').on("click", function() { $('footer li:not(li:first-child)').slideUp(); $(this).siblings().slideDown(); return false; }); }; }); </script> </head> <body> <header> <p><img src="img/zou.png" alt=""></p> </header> <nav class="pc-nav"> <ul> <li class="nav1"><a href="#">会社情報</a></li> <li class="nav2"><a href="#">キャンペーン</a></li> <li class="nav3"><a href="#">エンタメ・レシピ</a></li> <li class="nav4"><a href="#">CSV活動</a></li> <li class="nav5"><a href="#">企業情報</a></li> <li class="nav6"><a href="#">お客様相談室</a></li> </ul> </nav> <div id="container"> <div class="wideslider"> <ul> <li><a href="#"><img src="img/zou_01.png" alt="#"></a></li> <li><a href="#"><img src="img/zou_02.png" alt="#"></a></li> <li><a href="#"><img src="img/zou_03.png" alt="#"></a></li> <li><a href="#"><img src="img/zou_04.png" alt="#"></a></li> </ul> </div><!--/.wideslider--> <div id="news"> <ul class="news-ticker"> <li>【はなこ追悼】象の長生きにあやかりましょう!</li> <li>【来園特典】入場口で象の画像を見せると100円引き!</li> <li>【ふれあいフェア】象に乗ったり餌をあげたりできます!</li> </ul> </div> <nav class="sp-nav"> <ul> <li class="nav1"><a href="#">会社情報</a></li> <li class="nav2"><a href="#">キャンペーン</a></li> <li class="nav3"><a href="#">エンタメ・レシピ</a></li> <li class="nav4"><a href="#">CSV活動</a></li> <li class="nav5"><a href="#">企業情報</a></li> <li class="nav6"><a href="#">お客様相談室</a></li> </ul> </nav> <ul class="kirin_img"> <li class="hide_sp sizeL all"><a href="#"><img src="img/01Lz.png" alt="#"></a></li> <li class="hide_pc sizeM all"><a href="#"><img src="img/01Mz.png" alt="#"></a></li> <li class="sizeM all"><a href="#"><img src="img/02Mz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/03Sz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/04Sz.png" alt="#"></a></li> <li class="sizeM all"><a href="#"><img src="img/05Mz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/06Sz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/07Sz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/08Sz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/09Sz.png" alt="#"></a></li> <li class="sizeS all"><a href="#"><img src="img/10Sz.png" alt="#"></a></li> <li class="hide_pc sizeS all"><a href="#"><img src="img/11Sz.png" alt="#"></a></li> </ul> </div> <footer> <div class="inner"> <p><img src="img/zou-2.png" alt="ぞう"></p> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>商品情報</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ぬいぐるみ</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">キーホルダー</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">図鑑</a></li> </ul> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>キャンペーン</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">象に触れる旅</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">タイ旅行が当たる!</a></li> </ul> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>エンタメ・レシピ</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">仲良くなるコツ</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">乗るコツ</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ダンボ先輩について</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">童話のなかのぞう</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">不思議の国のぞう</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ぞうの好きな味</a></li> </ul> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>CSV活動</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ぞう保全活動</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">環境保全活動</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">密猟者対策</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ぞう園の取り組み</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">動画で見るぞう</a></li> </ul> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>企業情報</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ご挨拶</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">グループ事業理念</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">会社概要</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">採用情報</a></li> </ul> <ul> <li class="ul_main"><a href="#"><i class="fa fa-angle-right " aria-hidden="true"></i>お客様相談室</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">よくあるご質問</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">団体のお客様</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">お問い合わせ一覧</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">ぞうに関するお問い合わせ</a></li> <li><i class="fa fa-angle-right " aria-hidden="true"></i><a href="#">パンフレット請求</a></li> </ul> </div> </footer> </body> </html>
@charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol, li { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: none; vertical-align: bottom; } body { background: #E9C4C4; } /*---------------------------*/ header { width: 960px; margin: 0 auto; } header p { text-align: left; } header p img { max-width: 200px; } /*---------------------------*/ .sp-nav { display: none; } /*---------------------------*/ /*グローバルナブCSSスプライト*/ .pc-nav { width: 960px; height: 50px; margin: 0 auto; overflow: hidden; background: #FFF; } .pc-nav li { float: left; height: 30px; width: 160px; border-right: 1px solid #999; box-sizing: border-box; } .pc-nav li:first-child { border-left: 1px solid #999; box-sizing: border-box; } .pc-nav li a { display: block; line-height: 30px; white-space: nowrap; text-indent: 100%; overflow: hidden; } .pc-nav li.nav1 a { background: url(../img/gnav.png) no-repeat center top; } .pc-nav li.nav2 a { background: url(../img/gnav.png) no-repeat center -50px; } .pc-nav li.nav3 a { background: url(../img/gnav.png) no-repeat center -100px; } .pc-nav li.nav4 a { background: url(../img/gnav.png) no-repeat center -150px; } .pc-nav li.nav5 a { background: url(../img/gnav.png) no-repeat center -200px; } .pc-nav li.nav6 a { background: url(../img/gnav.png) no-repeat center -250px; } .pc-nav li a:hover { line-height: 47px; } .pc-nav li.nav1 a:hover { border-bottom:solid 3px #F14141; } .pc-nav li.nav2 a:hover { border-bottom:solid 3px #F14141; } .pc-nav li.nav3 a:hover { border-bottom:solid 3px #F14141; } .pc-nav li.nav4 a:hover { border-bottom:solid 3px #F14141; } .pc-nav li.nav5 a:hover { border-bottom:solid 3px #F14141; } .pc-nav li.nav6 a:hover { border-bottom:solid 3px #F14141; } /*---------------------------*/ /*ticker*/ #news { display: block; width: 100%; height: 30px; overflow: hidden; margin: 0 auto; font-size: 20px; text-align: center; position: absolute; z-index: 1000000; left: 0; top: 470px; background: rgba(0,0,0,0.6); } #news li { height: 24px; line-height: 24px; font-size: 12px; padding: 3px; color: #FFF; } .news-ticker { animation: ticker 21s infinite; } /*---------------------------*/ .kirin_img { width: 940px; margin: 0 auto; padding: 10px; overflow: hidden; background: #FFF; } .kirin_img li { float: left; margin: 10px; } .sizeL{ width: 356px; } .sizeM{ width: 356px; } .sizeS { width: 168px; } .hide_pc { display: none; } /*-------------------------*/ .all { -webkit-filter: sepia(60%) drop-shadow(0 0 0 #666); filter: sepia(60%) drop-shadow(0 0 0 #666); transition: 0.5s; } .all:hover { -webkit-filter: sepia(0%) drop-shadow(3px 3px 3px #666); filter: sepia(0%) drop-shadow(3px 3px 3px #666); } /*-------------------------*/ footer { width: 100%; background: #F5F5F5; } .inner { width: 900px; margin: 0 auto; overflow: hidden; } .inner p { margin-top: 20px; text-align: left; } .inner p img { max-width: 40px; } footer ul { margin: 10px 0 40px; width: 16.66%; float: left; } footer li { font-size: 12px; line-height: 1.5em; text-align: left; color: #999; } .ul_main { font-weight: bold; margin-bottom: 10px; } .fa { margin-right: 8px; color: #999; } @media screen and (max-width: 959px) { #news { display: none; } .pc-nav { width: 768px; height: 50px; margin: 0 auto; } .pc-nav li { height: 30px; width: 128px; } .pc-nav li.nav1 a { background: url(../img/gnav_tablet.png) no-repeat center top; } .pc-nav li.nav2 a { background: url(../img/gnav_tablet.png) no-repeat center -50px; } .pc-nav li.nav3 a { background: url(../img/gnav_tablet.png) no-repeat center -100px; } .pc-nav li.nav4 a { background: url(../img/gnav_tablet.png) no-repeat center -150px; } .pc-nav li.nav5 a { background: url(../img/gnav_tablet.png) no-repeat center -200px; } .pc-nav li.nav6 a { background: url(../img/gnav_tablet.png) no-repeat center -250px; } /*---------------------------*/ img { max-width: 100%; } .kirin_img { width: 98%; /*940px % 960px=98%*/ padding: 1%; } .kirin_img li { margin: 1%; } .sizeL { width: 37.6%; } .sizeM { width: 37.87%; } .sizeS { width: 17.87%; } /*---------------------------*/ .inner { width: 80%; margin: 0 auto; overflow: hidden; } footer ul { margin: 10px 0 40px; width: 33.33%; float: left; } } @media screen and (max-width : 767px){ header { width: 100%; } .pc-nav { display: none; } .sp-nav { display: block; } .sp-nav ul { width: 100%; overflow: hidden; } .sp-nav li { float: left; height: 40px; width: 50%; padding: 14px 0 12px 0; text-align: left; background: #FFF; border-bottom: 1px solid #999; box-sizing: border-box; } .sp-nav li a { display: block; font-size: 14px; padding-left: 10px; margin-left: 14px; border-left: 5px solid #F14141; } .sp-nav li:nth-of-type(odd) { border-right: 1px solid #999; } .sp-nav li a:hover { text-decoration: underline; } .nav1, .nav2 { border-top: 1px solid #999; } /*---------------------------*/ img { width: 100%; } .hide_sp { display: none; } .hide_pc { display: block; } .sizeM { width: 98%; } .sizeS { width: 48%; } /*---------------------------*/ /*footer部分のレイアウト*/ footer { width: 100%; padding:0; } .inner { width: 100%; } footer ul{ float: none; margin: 0; width: 100%; } footer .ul_main{ font-size: 14px; line-height: 2; margin: 0; border-bottom: 1px solid #999; text-decoration: none; } footer .ul_main a { background: none; background-size: 5%; width: 96%; margin: 0 auto; display: block; padding: 10px 0; } footer ul li:first-child:hover { background: #EEE; } footer ul li:not(:first-child){ background:#FFF; height: 30px; display:none; } } @keyframes ticker { /* 1行目 */ 0% { opacity:0; transform: translate(0,0);} 5% { opacity:1; transform: translate(0,0);} 28% { opacity:1; transform: translate(0,0);} 33% { opacity:0; transform: translate(-400px,0); } /* 2行目 */ 34% { opacity: 0; transform: translate(400px,-30px);} 39% { opacity: 1; transform: translate(0,-30px);} 61% { opacity: 1; transform: translate(0,-30px);} 66% { opacity: 0; transform: translate(-400px,-30px);} /* 3行目 */ 67% { opacity: 0; transform: translate(400px,-60px);} 71% { opacity: 1; transform: translate(0,-60px);} 95% { opacity: 1; transform: translate(0,-60px);} 98% { opacity: 0; transform: translate(-400px,-60px);} /*100%の時と、0%の時を同じ値にするため*/ 100% { opacity: 0; transform: translate(0,0); } }
jQuery:プラグイン:Masonry
isotope:完成版にリンク
Masonry:本家サイト
jQuery プラグイン Masonry の使い方と設定 | Web Design Leaves:参考サイト
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } body { margin: 0 auto; background: #C0D0DD; } .box { float: left; width: 200px; height: 200px; margin: 10px; border-radius: 6px; background: #FFF; line-height: 200px; text-align: center; font-size: 40px; font-weight: bold; } .box2 { width: 420px; } .box3 { height: 420px; } .box4 { width: 420px; height: 420px; } </style> <script src="js/jquery-2.2.4.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script> </head> <body> <div class="grid"> <div class="box box1">1</div> <div class="box box1">2</div> <div class="box box3">3</div> <div class="box box1">4</div> <div class="box box2">5</div> <div class="box box3">6</div> <div class="box box1">7</div> <div class="box box4">8</div> <div class="box box2">9</div> <div class="box box1">10</div> <div class="box box4">11</div> <div class="box box2">12</div> </div><!-- /.grid --> <script> // すべてisotopeのシステムに従いますよ $('.grid').isotope({ itemSelector: '.box', }); </script> </body> </html>
jQuery:プラグイン:isotope
isotope:完成版にリンク
Isotope:本家サイト
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope | コリス:参考サイト
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>isotope</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } body { margin: 0 auto; background: #C0D0DD; } .box { float: left; width: 200px; height: 200px; margin: 10px; border-radius: 6px; background: #FFF; line-height: 200px; text-align: center; font-size: 40px; font-weight: bold; } .box2 { width: 420px; } .box3 { height: 420px; } .box4 { width: 420px; height: 420px; } </style> <script src="js/jquery-2.2.4.min.js"></script> <script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script> </head> <body> <div class="grid"> <div class="box box1">1</div> <div class="box box1">2</div> <div class="box box3">3</div> <div class="box box1">4</div> <div class="box box2">5</div> <div class="box box3">6</div> <div class="box box1">7</div> <div class="box box4">8</div> <div class="box box2">9</div> <div class="box box1">10</div> <div class="box box4">11</div> <div class="box box2">12</div> </div><!-- /.grid --> <script> // すべてisotopeのシステムに従いますよ $('.grid').isotope({ itemSelector: '.box', }); </script> </body> </html>
jQuery:flexbox:メガドロップダウンメニュー
メガドロップダウンメニュー:完成版にリンク
※WORKSのみ実装しています
メガドロップダウン - Webデザインの勉強 ちょっとだけプログラムの勉強:参考サイト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont--> <link rel="stylesheet" href="style.css"> <script src="js/jquery-2.2.4.min.js"></script> <script> $(function(){ $('#mddNav > ul > li').hover(function(){ childPanel = $(this).children('.mddWrap'); childPanel.each(function(){ childPanel.css({height:'0',display:'block',opacity:'0'}).stop().animate({height:'250px',opacity:'1'},500,'swing'); }); },function(){ childPanel.css({display:'none'}); }); }); </script> </head> <body> <div id="container"> <header> <h1>メガドロップダウンメニュー</h1> </header> <div id="wrapper"> <nav id="mddNav"> <ul> <li><a href="#">WORKS</a> <div class="mddWrap"> <div class="mddInner"> <p><strong>WORKS</strong>DESIGN・HTML/CSS・SYSTEM 制作について紹介します。</p> <div class="dropContent"> <div> <span>DESIGN</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">コンセプトワーク</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">受賞リスト</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">実績紹介</a></li> </ul> </div> <div> <span>HTML/CSS</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">W3C推奨マークアップ</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築手順</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築実績</a></li> </ul> </div> <div> <span>SYSTEM</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">WEBシステム設計</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">データ解析</a></li> </ul> </div> </div><!--.dropContent--> </div><!-- /.mddInner --> </div><!-- /.mddWrap --> </li> <li><a href="#">PRODUCT</a></li> <li><a href="#">RECRUIT</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav><!-- /#mddNav --> <div id="content"> </div><!-- /#content --> </div><!-- /#wrapper --> <footer> <p><small>Copyright © メガドロップダウンメニュー</small></p> </footer> </div><!-- /#container --> </body> </html>
@charset "UTF-8"; /* CSS Document */ /* reset */ html, body, div, h1, p, blockquote, pre, ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } /*body { overflow-y: scroll; }*/ /*------------------------------------- */ header { height: 100px; background: #000; } h1 { width: 800px; margin: 0 auto; padding: 40px 0 0 8px; font-size: 28px; color: #FFF; } /* mddNav(ドロップダウンメニュー全体とナビボタン) ------------------------------------- */ #mddNav { position: relative; z-index: 100; width: 100%; height: 45px; background: #ebebeb; background: linear-gradient(to bottom, #ebebeb 45%,#d8d8d8 55%); border-top: #aaa 1px solid; border-bottom: #aaa 1px solid; } #mddNav > ul { display: flex; /*グローバルナビゲーションを横並びに*/ margin: 0 auto; width: 800px; height: 45px; text-align: center; } #mddNav > ul > li { width: 160px; height: 45px; border-left: #aaa 1px solid; box-sizing: border-box; } #mddNav > ul > li a { color: #666666; } #mddNav > ul > li:last-child { border-right: #aaa 1px solid; } #mddNav > ul > li > a { display: block; height: 45px; font-weight: bold; line-height: 45px; text-align: center; border: #fff 1px solid; transition: all 0.2s linear; } #mddNav > ul > li:hover > a { background: #FFF; } /* mddWrap ------------------------------------- */ #mddNav .mddWrap { position: absolute; top: 45px; left: 0; z-index: 100; overflow: hidden; /*display: none;*/ width: 100%; height: 250px; text-align: center; background: #fff; background: linear-gradient(to bottom, #fff 0%,#efefef 100%); border-bottom: #aaa 1px solid; box-shadow: 0 2px 2px #eee; } #mddNav .mddWrap .mddInner { margin: 0 auto; padding-top: 30px; width: 800px; height: 200px; line-height: 1.5em; text-align: left; } #mddNav .mddWrap .mddInner > .dropContent { display: flex; } #mddNav .mddWrap .mddInner > .dropContent > div { margin-right: 20px; width: 250px; /* float: left;*/ border-right: #aaa 1px solid; } #mddNav .mddWrap .mddInner > .dropContent > div:last-child { margin-right: 0; border-right: none; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li { line-height: 1.8em; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li i { margin-right: 0.5em; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:link { text-decoration: underline; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:hover { text-decoration: none; } #mddNav .mddWrap .mddInner p { margin-bottom: 20px; padding-left: 10px; line-height: 1.6em; border-left: #3571AA 5px solid; } #mddNav .mddWrap .mddInner p strong { font-size: 1.1em; display: block; } #mddNav .mddWrap .mddInner > div span { margin-bottom: 5px; font-weight: bold; } /*------------------------------------- */ .fa-chevron-right { color: #F00; } /*------------------------------------- */ footer { width: 100%; position: absolute; bottom: 0; left: 0; background: #000; } footer p { color: #FFF; padding: 30px 0; text-align: center; }
CSS3:flexbox
CSSを一行プラスするだけで横並びにできる
横並びになった要素の高さが最初から揃ってる
要素を上下左右、好きな順序に並び替えられる
高さの異なる横並びの要素を、簡単に上下中央揃えにできる
ナビゲーション版
Flexboxを使ったナビゲーション:完成版にリンク
これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス:参考サイト
↓
<html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title>[f:id:sankoblog:20160718154210p:plain][f:id:sankoblog:20160718154220p:plain] <style> ul { list-style: none; } a { text-decoration: none; } .mainNav { display: flex; } .mainNav li { width: 160px; line-height: 50px; text-align: center; } .mainNav a { margin: 1px; background: #60B99A; color: #FFF; display: block; } </style> </head> <body> <nav> <ul class="mainNav"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> </body> </html>
div版
Flexboxを使ったレスポンシブWebデザイン:完成版にリンク
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flexboxを使ったレスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .box1, .box5 { width: 100%; height: 100px; background: #FBE4EE; border: 4px solid #EA6094; box-sizing: border-box; } .wrapA { display: flex; height: 300px; box-sizing: border-box; } .wrapA > .box2 { order: 2; flex-grow: 3; background: #FFFBCB; border: 4px solid #FFE500; } .wrapA > .box3 { order: 1; flex-grow: 1; background: #EDF7FD; border: 4px solid #4188C9; } .wrapA > .box4 { order: 3; flex-grow: 1; background: #F3F7E0; border: 4px solid #B5D22F; } @media screen and (max-width:797px){ .wrapA { display: block; height: auto; } .wrapA>.box { /* 文書順に戻す */ order: 0; width: auto; height: 100px; } } </style> </head> <body> <div id="container"> <div class="box box1">BOX1</div> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> <div class="box box4">BOX4</div> </div><!-- /.wrapA --> <div class="box box5">BOX5</div> </div><!-- /#container --> </body> </html>
レスポンシブ:VOGUEのマネ
全面レイアウト:完成版にリンク
VOGUE JAPAN 15th Anniversary 1999~2014:参考サイト
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>全面レイアウト</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Lobster+Two:700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style_y.css"> </head> <body> <header> <p>ここはheader</p> </header> <div id="container"> <div class="top topL"> <a href="#"> <div class="cap"> <h3>Snow mountain</h3> <p class="text">雪山へはリフトでいきましょう</p> <p class="view">view more</p> </div></a> </div> <div class="top topR"> <a href="#"> <div class="cap"> <h3>Tent</h3> <p class="text">テントは上手にはりましょう</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmL"> <a href="#"> <div class="cap"> <h3>Sea</h3> <p class="text">カヤックであそぶのもいいですね</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmC"> <a href="#"> <div class="cap"> <h3>Mountain</h3> <p class="text">山に寄り道するのも楽しそうです</p> <p class="view">view more</p> </div></a> </div> <div class="bottom btmR"> <a href="#"> <div class="cap"> <h3>Coast</h3> <p class="text">ここは2人組であるきましょう</p> <p class="view">view more</p> </div></a> </div> <p class="logo"><img src="img/camp.svg" alt="CAMP TRAVEL"></p> </div><!--#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } /*--------------------------*/ html, body { width: 100%; height: 100%; } header { width: 20%; height: 100%; float: left; background: #FFF; position: fixed; z-index: 50; background: #98BEC6; } #container { width: 80%; height: 100%; float: right; position: relative; } .top { width: 50%; height: 50%; float: left; position: relative; overflow: hidden; } .bottom { width: 33.33%; height: 50%; float: left; position: relative; overflow: hidden; } .topL { background: url(../img/02.png) no-repeat; background-size: cover; } .topR { background: url(../img/01.png) no-repeat 50% 50%; background-size: cover; } .btmL { background: url(../img/03.png) no-repeat; background-size: cover; } .btmC { background: url(../img/04.png) no-repeat; background-size: cover; } .btmR { background: url(../img/05.png) no-repeat; background-size: cover; } .logo img { width: 160px; height: 160px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 9999; } /*ホバーアクション*/ .top a, bottom a { display: block; width: 100%; height: 100%; } .cap { padding-top: 240px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10; opacity: 1; transition: .4s ease-in-out; background: rgba(245,44,67,0); cursor: default; } .cap:hover { top:-40%; left: 0; background: rgba(100,100,100,0.7); } h3{ padding-bottom: 20px; color: #FFF; font-size: 22px; font-family: 'Lobster Two', cursive; } .text { color: #FFF; font-size: 16px; padding-bottom: 36px; } .view { width: 40%; margin: 0 auto; font-size: 20px; color: #FFF; padding: 10px; border: 1px solid #FFF; transition: 0.2s ease-in-out; } .view:hover{ background:white; color: #111; /* cursor: pointer;*/ } @media screen and (max-width : 767px){ header { width: 100%; height: 80px; float: none; top: 0; left: 0; z-index: 30; } .topL { margin-top: 80px; } header p { text-align: center; } #container { width: 100%; float: none; } .top, .bottom { float: none; width: 100%; height: 50%; margin-bottom: 180px;/*.capが表示される領域*/ overflow: inherit; /*overflowを初期値に戻す*/ } .logo img{ width: 60px; height: 60px; padding: 10px; position: fixed; top:0; left:0; margin: 0; } .top a, bottom a { display: block; width: 100%; height: 180px; } .cap { padding-top: 0; position: absolute; top: 100%; left: 0; width: 100%; height: 180px; transition: none; background: rgba(100,100,100,0.7); } .cap:hover { top: 100%; left: 0; } h3{ padding:20px 0; color: #FFF; font-size: 20px; } .text { color: #FFF; font-size: 14px; padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } }