ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

ウェブデザイナーのための情報サイト超厳選2サイト

一時期はなん十サイトもRSS購読していましたが、絞りに絞って最終的にこの2サイトがのこりました。どちらもCSSの技術だけではなく最新のウェブデザインニュースを網羅しています。ウェブデザイナーはこの2サイトを購読していればOKでしょう。

Codrops

https://tympanus.net/codrops/

Webdesigner Depot

https://www.webdesignerdepot.com/
スポンサーサイト



フッターを最下部に置く最小CSS felx

基本構造はbodyの中の子はメインコンテンツ用とフッター用2つを並列に。

html

<html>
<body>
    <div class="maincontent">
        メインコンテンツ
    </div>
    <footer>
        フッター
    </footer>
</body>
</html>

css

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.maincontent{
    flex: 1;
}

CSSだけでフェードイン

jqueryとはおさらば

animation の基本系をメモ

js不要でページローディングしたらコンテンツをフェードインさせるCSS

html

<div class="main">
    content
</div>

css

div.main{
  animation-name: fadeInA;//名前をつける
  animation-duration: 3s;//秒数
}
@keyframes fadeInA {
    0% {opacity:0;}
    100% {  opacity:1;}
}

使えるドロワーメニューmmenu コピペ用ソース

メニューの数か多くなった時にスマホでしっかりスクロールできるドロワーメニュー。

デモはこちらmmenu

HTML

htmlの基本構造はbody の直下に#menu と#pageが並列

メニューアイコンを右上に置きたい場合はmh-btns-rightにする。右からメニュを出現させたい場合はjsで調整。

<nav id="menu">
  <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/">Our work</a></li>
    <li><a href="#/">About us</a></li>
    <li><a href="#/">Services</a></li>
    <li><a href="#/">Contact</a></li>
  </ul>
</nav>
<div id="page">
  <div class="mh-head Sticky">
    <span class="mh-btns-left">
      <a href="#menu" class="fa fa-bars"></a>
      <a href="#page" class="fa fa-times"></a>
    </span>
    <span class="mh-text">上部バー</span>
  </div>

  <div class="content">
    ここにメインコンテンツ
  </div>
</div>

CSS

外部CSS

読み込むCSSは全部で4つ

一番上はメニューアイコン用のfontawesome。これは直リンクでOK。それ以外はダウンロードして必要に応じてCSSを編集しサーバーにアップするのが良い。SSL化されたサイトで使う場合はダウンロード必須。demo.cssに記述されているリセット系cssはごっそり削除したほうが使いやすい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="http://mmenu.frebsite.nl/demo/css/demo.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.css?v=7.0.1" />
<link rel="stylesheet" href="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.css?v=7.0.1" />

javascript

外部javascript

こちらもjquery 以外はSSL(https)対応のサイトで使う場合は直リン不可。

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://mmenu.frebsite.nl/mmenu/jquery.mmenu.all.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/mhead-plugin/mhead/jquery.mhead.js?v=7.0.1"></script>
<script src="http://mmenu.frebsite.nl/demo/js/playground.js"></script>

内部javascript

仕様の調整はmmenu メニュー > Documentation > Add-onsやExtensions を参照。

メニューを右から出したい場合はextensions の[カッコ]のなかに"position-right"を追加。

<script>
$(function() {
	$("#menu").mmenu({
		extensions 	: [ "theme-white", "listview-justify", "border-full", "shadow-page" ],
		navbar 		: false
	});
	$(".mh-head.mm-sticky").mhead({
		scroll: {
			hide: 200
		}
	});
	$(".mh-head:not(.mm-sticky)").mhead({
		scroll: false
	});
});
</script>

jQuery でトグル

関連記事:CSSでトグル

CLICK HERE TO TOGGLE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<div class="jqtgtriger">クリック領域</div>
<div class="jqtgcont">コンテンツ</div>

javascript

<script type="text/javascript">
$(function(){
	$("div.jqtgcont").hide();
	$(".jqtgtriger").click(function(){
		$(this).toggleClass('on');
		$(this).next(".jqtgtriger").slideToggle(90);// 数字で速さ調整
		return false;
	});
});
</script>

jQuery でコンテンツをタブ切り替え

コンテンツ切り替えjQuery コピペ用ソース。CSSはお好みで。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.

HTML

ナビ

<ul class="tab">
	<li class="active"><a href="#tab1">CAT</a></li>
	<li class=""><a href="#tab2">TAG</a></li>
</ul>

コンテンツ

<div id="tab1" class="tab_content">
	//コンテンツA
</div>
<div id="tab2" class="tab_content">
	//コンテンツB
</div>

javascript

$(document).ready(function() {
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	//On Click Event
	$("ul li").click(function() {
		$("ul li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
});

PC/タブレット/iphone縦横対応media queryのかき分け

単純にある程度PCとスマホだけを切り替える

@media screen and (min-width: 721px) {/*PC*/
}
@media screen and (min-width: 0px) and (max-width: 720px) {/*SP*/
}

細かく分ける

@media screen and (min-width: 1025px) {/*PC*/

}
@media screen and (min-width: 769px) and (max-width: 1024px) {/* tablet 横*/

}
@media screen and (min-width: 737px) and (max-width: 768px) {/* tablet */

}
@media screen and (min-width: 668px) and (max-width: 736px) {/* 6 Plus 6s Plus 7 Plus 8 Plus 横*/

}
@media screen and (min-width: 569px) and (max-width: 667px) {/* 6 6s 7 8 横 */

}
@media screen and (min-width: 481px) and (max-width: 568px) {/* iphone 5 横*/

}
@media screen and (min-width: 415px) and (max-width: 480px) {/* iphone 3-4 横 */

}
@media screen and (min-width: 385px) and (max-width: 414px) {/* 6 Plus 6s Plus 7 Plus 8 Plus */

}
@media screen and (min-width: 376px) and (max-width: 384px) {/* Google Nexus 4 */

}
@media screen and (min-width: 321px) and (max-width: 375px) {/* iPhone X */

}
@media screen and (min-width: 0px) and (max-width: 320px) {/* - iphone 5*/

}

ドロワーメニューjQuery Drawerコピペ用ソース

追記:このDrawerはメニューの数が多くなってスマホ端末の高さを超えるとスクロールできない問題があり。動きが悪すぎて使えない。使えるドロワーメニューはこちら

HTML

head内

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

body

<body class="drawer drawer--left">

body以下

<button type="button" class="drawer-toggle drawer-hamburger">
	<span class="sr-only">toggle navigation</span>
	<span class="drawer-hamburger-icon"></span>
</button>
<div class="navbar"></div>

ナビ

<nav class="drawer-nav" role="navigation">
	<ul>
		<li><a href="/">TOP</a></li>
		<li><a href="#">CATEGORY</a></li>
		<li><a href="#">TAG</a></li>
		<li><a href="#">SINGLE</a></li>
		<li><a href="#">PAGE</a></li>
	</ul>
</nav>

javascript

<script>
$(document).ready(function() {
	 $('.drawer').drawer();
});
</script>

CSS

ナビバー

.navbar {
    height: 55px;
    width: 100%;
    z-index: 2;
    background: #f00;
    position: fixed;
    top: 0;
}

1、3行目はXマークの色。2行目はナビバーの色に合わせる

.drawer-hamburger-icon, .drawer-hamburger-icon::after, .drawer-hamburger-icon::before{background: #fff !important;}
.drawer-open .drawer-hamburger-icon{background-color: #f00 !important;}
.drawer-close .drawer-hamburger-icon{background-color: #fff;}

参考ソース:drawer