Category: CSS

単語帳

表と裏をdocument.getElementByIdで、divタグのidから呼び出しています。CSS3でカードflipはtransform: rotateY(180deg);と表現します。

リフェレンス
KeyCode:The KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.

keyup:Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

コード

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>単語帳</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		margin: 0;
		background: #e0e0e0;
		text-align: center;
		font-family: Verdana, sans-serif;
		color: #fff;
	}
	#btn {
		width: 200px;
		margin: 0 auto;
		padding: 7px;
		border-radius: 5px;
		background: #00aaff;
		box-shadow: 0 4px 0 #0088cc;
		cursor: pointer;
	}
	#btn:hover{
		opacity: 0.8;
	}
	#card {
		margin: 60px auto 20px;
		width: 400px;
		height: 100px;
		cursor: pointer;
		font-size: 38px;
		line-height: 100px;
		perspective: 100px;
		transform-style: preserve-3d;
		transition: transform .8s;
	}
	#card-front, #card-back {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		position: absolute;
		backface-visibility: hidden;
	}
	#card-front {
		background: #fff;
		color: #333;
	}
	#card-back {
		background: #00aaff;
		transform: rotateY(180deg);
	}
	.open {
		transform: rotateY(180deg);
	}
	</style>
</head>
<body>
	<div id="card">
		<div id="card-front"></div>
		<div id="card-back"></div>
	</div>
	<div id="btn">NEXT</div>
	<script>
	(function(){
		'use strict'

		var words = [
			{'en': 'read', 'ja':'読む'},
			{'en': 'write', 'ja':'書く'},
			{'en': 'eat', 'ja':'食べる'},
			{'en': 'run', 'ja':'走る'},
			{'en': 'walk', 'ja':'歩く'}
		];

		var card = document.getElementById('card');
		var cardFront = document.getElementById('card-front');
		var cardBack = document.getElementById('card-back');
		var btn = document.getElementById('btn');

		card.addEventListener('click', function(){
			flip();
		});
		btn.addEventListener('click', function(){
			next();
		});

		function next(){
			if (card.className === 'open') {
				card.addEventListener('transitioned', setCard);
				flip();
			} else {
				setCard();
			}

		}

		function setCard(){
			var num = Math.floor(Math.random() * words.length);
			cardFront.innerHTML = words[num]['en'];
			cardBack.innerHTML = words[num]['ja'];
			card.removeEventListener('transitioned', setCard);
		}

		setCard();

		window.addEventListener('keyup', function(e){
			if (e.keyCode === 70){
				flip();
			} else if (e.keyCode === 78){
				next();
			}
		});

		function flip(){
			card.className = card.className === '' ? 'open' : '';
		}
	
	})();
	</script>
</body>
</html>

CSS メディアクエリによるレスポンシブル対応

h1, h2, p, img, ul{
	margin:0;
}

body {
	font-family: Arial, Verdana, sans-serif;
	margin:0 auto;
	width: 95%;

}

#header {
	background: red;
}

#footer {
	background: green;
}

#container {
}

#main {
	background: orange;
}

#sub {
	background: yellow;
}

#footerNavLink{
	float: right;
}

#headerNav ul {
	list-style: none;
	overflow: hidden;
}

#headerNav li {
	float: left;
	width: 33%;
	text-align: center;
}

img {
	max-width: 100%;
}

.movie {
	position: relative;
	height: 0;
	padding-top: 56.25%;
}

iframe {
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	width:100%;
}

/* スマホ */
#headerNav{
	display: none;
}

/* タブレット */
@media screen and (min-width: 480px){
	#footerNavLink {
		display: none;
	}
	#headerNav{
		display: block;
	}
	#footerNav {
		display: none;
	}

}

/* PC */
@media screen and (min-width: 768px){
	#container {
		overflow: hidden;
	} 
	#main {
		float: left;
		width: 78.0612245%;
	}
	#sub {
		float: right;
		width: 20.4081633%;
	}
}

CSSで吹き出しを作成

三角形はborderの組み合わせで作成します。また、オブジェクトを1px動かして、枠線を消すテクニックを使います。

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="utf-8">
   <title>CSS Layout practice</title>
   <link rel="stylesheet" href="normalize.css">
   <!-- <link rel="stylesheet" href="reset.css"> -->
   <link rel="stylesheet" href="styles.css">
   <style>
   body {
    padding: 0 10px 40px;
   }
   h2 {
    font-size: 16px;
   }
   .ex1 {
    width: 100px;
    height: 100px;
    background: #eee;
   }
  .ex2 {
    width: 100px;
    height: 100px;
    background: #eee;
    border-style: solid;
    border-width: 20px;
    border-color: red blue pink green;
   }
    .ex3 {
    width: 200px;
    height: 100px;
    background: #eee;
    border-radius:3px;
    position: relative;
   }
    .ex3:before {
    position: absolute;
    right: 20px;
    bottom: -20px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: #eee transparent transparent transparent;
   }
  .ex4 {
    width: 200px;
    height: 100px;
    background: #eee;
    border-radius:3px;
    position: relative;
   }
    .ex4:before {
    position: absolute;
    right: 20px;
    bottom: -20px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: #eee transparent transparent transparent;
   }
   .ex5 {
    width: 200px;
    height: 100px;
    border: 1px solid #eee;
    border-radius:3px;
    position: relative;
   }
    .ex5:before {
    position: absolute;
    right: 20px;
    bottom: -20px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: #eee transparent transparent transparent;
   }
       .ex5:after {
    position: absolute;
    right: 20px;
    bottom: -19px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px;
    border-color: white transparent transparent transparent;
   }
     .ex6 {
    width: 200px;
    height: 100px;
    border: 1px solid #eee;
    border-radius:3px;
    position: relative;
   }
    .ex6:before {
    position: absolute;
    right: 20px;
    bottom: -20px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: #eee transparent transparent transparent;
   }
       .ex6:after {
    position: absolute;
    right: 20px;
    bottom: -19px;
    content: '';
    width: 0:
    height: 0;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: #fff transparent transparent transparent;
   }
   </style>
  </head>
<body>
  <h2>ex1</h2> 
  <div class="ex1"></div>
  <h2>ex2</h2>
  <div class="ex2"></div>
    <h2>ex3</h2>
  <div class="ex3"></div>
      <h2>ex4</h2>
  <div class="ex4"></div>
  <h2>ex5</h2>
  <div class="ex5"></div>
    <h2>ex6</h2>
  <div class="ex6"></div>
</body>
</html>

%e7%84%a1%e9%a1%8c

css3 eyecatch

body{
	background: slategray;
}

#eyecatch{
	background: url('eyecatch.jpg') no-repeat;
	background-size: cover;
	background-position: 50% 20%;
	height: 100px;
}

.container {
	width: 500px;
	margin: 0 auto;
	/*background: pink;*/
}

header {
	background: tomato;
}

ul#menu {
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 0;
}

ul#menu > li{
	display:inline-block;
	width: 80px;
	height: 40px;
	background: orange;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
}
ul#menu > li > a:hover{
	opacity: 0.5;
	transition: 0.8s;
}
main .product {
	position: relative;
	display: inline-block;	
}
main .price {
	position: absolute;
	/*top: 0;
	right: 0;*/
	top: -5px;
	right: - 5px;
	font-size: 10px;
	padding: 4px;
	font-weight: bold;
	backgroundf: white;
}

main {
	background: skyblue;
}
#left {
	background: limegreen;
	float:left;
	width: 100px;
}
#center {
	background: seagreen;
	margin: 0 100px;
}
#right {
	background: lightgreen;
	float: right;
	width: 100px;
}

.clearfix::after{
	content: '';
	display:block;
	clear: both;
}
.clear {
	overflow: hidden;
}
footer {
	clear: both;
	background: slategray;
}

a

reset.cssとnormailze.css

ブラウザに標準として使われているUser Agent Sytlesheetでは各ブラウザでばらばらなので、ブラウザごとのCSSの仕様を合わせるのにreset.cssとnormalize.cssがあります。それぞれ、サイトからコードをひっぱてきましょう。

reset.css
HTML5 doctor reset.css

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

normalize.css
normalize.css 

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="utf-8">
   <title>CSS Layout practice</title>
   <link rel="stylesheet" href="normalize.css">
   <!-- <link rel="stylesheet" href="reset.css"> -->
   <link rel="stylesheet" href="styles.css">
  </head>
<body>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

css3

rgba :aで透明度の設定

#box1{
  background: rgba(255, 100, 100, 0.8);
}

hsla :明度の変更

#box1{
  background: hsla(210, 100%, 20%, 0.8);
}

opacity :透明度

body { background: skyblue; }

img{
  border: 7px solid blue;  
  opacity: 0.3;
}

属性セレクタ :^始まる、$終わる、*含む

a[href^="http"]{ color: orange; }

疑似クラス :last-child, nth-child(n) (※odd,evenも可), nth-last-child(n), only-child

li:last-child
{
  background: violet;
}

疑似クラス2 :first-of-type, last-of-type, nth-of-type(n), nth-last-of-type(n), only-of-type

p:first-of-type{
  background: violet;
}

疑似クラス3 :not(.) ,[type=”text”]:enabled, input[type=”checkbox”]:checked + label

li:not(.target)
{
  background:violet;
}

border-radius :角丸, border-radius: 30px / 15px; , order-bottom-right-radius, border-radius: 50%

div {
  width: 200px;
  height: 200px;
  background: skyblue;
  border-radius: 30px;
}

背景切り抜き

div {
  width: 200px;
  height: 200px;
  background: skyblue
  url('orange.jpg');
  border-radius: 50%
}

background-size :cover, contain 

body {margin: 0;}

header {
  width: 100%; 
  height: 130px;
  background: url('orange.jpg')
  no-repeat skyblue;
  background-size: 50%;
}

複数の背景画像

body {margin: 0;}

header {
  width: 100%; 
  height: 130px;
  background:
  url('orange.jpg') no-repeat 0 0,
  url('apple.jpg') no-repeat 30px 30px;
}

グラデーション: linear-gradient(),linear-gradient(to bottom right,skyblue, blue);, linear-gradient(lightgreen 10%,skyblue 60%, blue);

body {margin: 0;}

div {
  width: 200px; 
  height: 200px;
  background-image: 
  linear-gradient(skyblue, blue);
}

円形グラデーション :radial-gradient(skyblue, blue),radial-gradient(at 30px 40px,skyblue, blue),radial-gradient(20px 30px at 30px 40px,skyblue, blue)

body {margin: 0;}

div {
  width: 200px; 
  height: 200px;
  background-image: 
  radial-gradient(skyblue, blue)
}

影: box-shadow, text-shadow

body {background: #eee;}

div {
  width: 200px;
  height: 100px;
  background: #fff;
  box-shadow: 10px 20px rgba(0, 0, 0, 4);
}

図形の変更：transform, skew

body {background: #eee;}

div {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  position: absolute;
  top: 100px;
  left: 100px;
}

#box1 {
   background: skyblue;
   opacity: .5;
}

#box2 {
   background: orange;
   opacity: .5;
   transform:translate(20px, 40px);
}

ベンダープレフィックス

-webkit-transform:skey(0.5, 1.5);
   transform:skey(0.5, 1.5);

transition

body {background: #eee;}

div {
  width: 100px;
  height: 100px;
  background: skyblue;

  transition-property:all;
  transition-duration:2s;
  transition-timimg-function:ease;
  transition-delay:0.8s;
}

div:hover {
   width: 200px;
   height: 50px;
   background: blue;
}