（初心者向け）これまでに保存してたHTML,CSS,jsコード一覧

背景画像に背景色を適用する。.intro&:before {z-index: 0;content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:rgba(0,0,0,0.25);}

画面上下左右配置（フルスクリーン）

#sample{width:100%;
height:100vh;
position:relative;}

#sample img{position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
}

positionなどで表示順を指定したい場合

#sample{position:relative;
z-index:◯;}


hoversなどの時間変更

transition:◯s

アニメーション

１アニメーションの種類（animation-name）
２1回のアニメーションの時間(animation-duration)
３アニメーションの変化率(animation-timing-function)
４遅らせる(animation-delay)
５繰り返し(animation-iteration-count)
６往復、繰り返すか(animation-direction)

フェードイン
#sample{animation:fadeIn 5s ease 0s 1 normal;}

@keyframes fadeIn{0%{opacity:0}
                  100%{opacity:1}

字間
letter-spacing


円形・中央配置

#sample{width:150px;
height:150px;
border-radius:150px;
border:2px solid #000;
text-align:center;}

#sample p {
  position: relative;
  top:50%;
  transform: translateY(-50%);
}

縦横比を維持したまま、背景に収まるサイズにする。

background-size:contain;


ナビゲーション（中央配置）

HTML
<div id="container">
    
<div id="nav">
<ul>
    <li><a href="#">トップ</a></li>
    <li><a href="#">イベント</a></li>
    <li><a href="#">アクセス</a></li>
    <li><a href="#">コンタクト</a></li>
    <li><a href="#">インフォメーション</a></li>
    
</ul>
</div>

</div>


CSS
#container{width:100%;}


#nav{width:90%;
margin:0 auto;}


#nav li{width:20%;
float:left;
font-weight:bold;
}

#nav li a{display:block;
height:70px;/*heightとline-heightの値は同じにする！（値を揃えないと中央にこないため）*/
line-height:70px;/*line-height・・・行間の幅をしていできる*/
border-right:1px solid red;
text-align:center;
color:#fff;
text-decoration:none;/*text-decoration:none・・・aを指定した時の下線がなくなる*/
background-color:#000;}

#nav li a:hover{background-color:#575757;}
/*hoverでカーソルが乗った時に色が変わる*/

動画

html
<video id="video" preload="auto" autoplay loop>
    <source src="video/background_11.mp4" type="video/mp4">
</video>


css
#video{position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-1;}


スクロールダウンボタン

html
<a href="#"><span></span></a>

css
a {
    padding-top: 60px;
}
a span {
    position: absolute;
    left: 50%;
    bottom:7%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
    0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        -webkit-transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
    }
}
@keyframes sdb {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }
    20% {
        transform: rotate(-45deg) translate(-10px, 10px);
    }
    40% {
        transform: rotate(-45deg) translate(0, 0);
    }
}

パディングとボーダーを含める

box-sizing: border-box;


レスポンシブ（フルスクリーン）


HTML

<div class="wrap">

<div class="page">
<div class="box">
<p>あいうえおかきくけこ</p>
</div>

<div class="box">
</div>

</div>

</div>

CSS

.box{width:100vw;
height:auto;
min-height:100vh;
background-size:cover;
background-position:center;
background-image:url(../image/aaa.jpg);
display:-webkit-box;
display:-ms-flexbox;
display:flex;

-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
    
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
    
padding:10px;
box-sizing:border-box;
}

.wrap{overflow:hidden;}


floatを使っているときはdisplay:table-cell,vertical-align:middleは反応しない。

vertical-alignはテーブルセルとインライン要素だけ

パンくずリスト

HTML

<ol>
<li><a href="#">トップ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">コンタクト</a></li>
<li><a href="#">インフォメーション</a></li>
</ol>


CSS
    ol{list-style:none;
    }
    
    li{display:inline;
    
    }
    
    li::before{content:"＞"}
    
    a{text-decoration:none;
    font-weight:bold;}
    
    
    a:link{color:#000;}
    
    li:first-child::before{content:none;}
    
    ol li{background-position:center;}

フォーム
    
html

<form action="#" method="post">
    <div>
        <label for="name">お名前</label>
        <input type="text" placeholder=" 〇〇　〇〇" id="name" />
    </div>
    <div>
        <label for="mail">メールアドレス</label>
        <input type="email" placeholder=" ****@**.**.jp" id="mail" />
    </div>
    <div>
        <label for="msg">メッセージ</label>
        <textarea id="msg"></textarea>
    </div>
</form>

css

form {
    /* フォームをページの中央に置く */
    margin: 0 auto;
    width: 410px;
    /* フォームの範囲がわかるようにする */
}


form div + div {
    margin-top: 2em;
}

label {
    /* すべてのラベルを同じサイズにして、きちんと揃える */
    display: inline-block;
    width: 100px;
    text-align:left;
    font-size:14px;
    margin-right:25px;
}

input, textarea {
    /* すべてのテキストフィールドのフォント設定を一致させる
       デフォルトで、textarea は等幅フォントが設定されている */
    font: 0.8em sans-serif;

    /* すべてのテキストフィールドを同じサイズにする */
    width: 280px;
    height:35px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* テキストフィールドのボーダーの外見を同一にする */
    border:none;
    background-color:#D1D1D2;
}

textarea {
    /* 複数行のテキストフィールドをラベルにきちんと揃える */
    vertical-align: top;

    /* テキスト入力に十分な領域を与える */
    height: 5em;
    resize:none;
}

周りを囲うデザインにできる

position:absolute;
border:90px solid #fff;
top:0;
left:0;
bottom:0;
right:0;

フォントの基準は16px

1em=100%=16px=1rem=12pt

100%=1em 50%=0.5em

rem=htmlに指定している文字サイズ

vw,vh=指定したい文字数（例14px） 14px÷320px=0.04375になるので

4.375vwになる。

caption=表のタイトルや説明のこと。

レスポンシブ＝floatを使う。クリアする。widthは%　　heightはpx

pre=改行や半角スペースをそのまま表示したい時に使用する。



<p>あいうえおカキクケコ</p>
↓
あいうえおカキクケコ

<p><あいうえお<pre>



カキクケコ</pre></p>
↓
あいうえお


カキクケコ

hr=水平線

target=“_blank”　別ウィンドウでリンクさせる

<time datetime=“2014-08-14”> 2014年8月14日</time>

インデント＝一文字下げる

text-indent:1em

◯あいうえおカキクケコ

text-indent:5em

◯◯◯◯◯あいうえおカキクケコ

<link href=“aaaa” rel=“stylesheet” media=“screen and (max-width:000px)”>

<caption> tableにタイトルをつける

odd＝奇数

even＝偶数

:nth-child(値)＝任意の数のところにスタイルなどを当てることができる

rei li:nth-child(n+3)=3番目以降のliにスタイルをつけることができる。

input[type=“email”]


body{max-width:100%;
overflow-x:hidden;}

これで横がはみ出ない


background-position:水平、垂直


/* --------------------------

    header

-------------------------- */

cssはこれでわかりやすく分断する

480px以下の時に【style-480.css】
<link rel="stylesheet" media="(max-width: 480px)" href="style-480.css">



--------------------------
clippath
-------------------------- 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>


<style>

body,html,div,p,h1,h2,h3,img{margin:0px;
     padding:0px;}

body{width:100vw;
     height:100vh;
     background-color:#000;}     

.sample{width:30vw;
     min-width:200px;
     height:30vh;
     min-height:200px;
     background-color:#347F32;
     animation:anime 2.5s linear 0s infinite alternate;
     position:absolute;
     top:0;
     right:0;
     bottom:0;
     left:0;
     margin:auto;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 50% 0%) ;}/*(x,y)(1)(2)(3)(4)*/

     @keyframes anime{


     0%{clip-path:polygon(40% 30%,10% 10%,30% 20%,20% 10%);
          opacity:0;}

     30%{clip-path:polygon(80% 50%,20% 40%,20% 10%,50% 40%);
          opacity:0.5;}

     60%{clip-path:polygon(10% 40%,60% 20%,70% 90%,10% 50%);
          opacity:0.8;}


     100%{clip-path:polygon(60% 10%,80% 40%,50% 60%,70% 80%);
          opacity:1;}


     }


</style>


</head>

<body>

<div class="sample">
</div>


</body>
</html>

（ビデオの再生 js）
  <script>
    function videoStart(filename){
var video = document.createElement("video");
      video.src = 'video/' + filename;
      video.play();
}
  </script>