CSS ローディング表示

Ajax通信中等、時間が掛かる事をユーザー通知する

※HTML
<div id="overlay">
  <div class="cv-spinner">
    <span class="spinner"></span>
  </div>
</div>

※JavaScript
<script>
  $("#overlay").fadeIn(500);
  
  時間の掛かる処理
  $("#overlay").fadeOut(500);
  
</script>

※CSS
<style>
  #overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
  }
  .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .spinner {
    width: 80px;
    height: 80px;
    border: 4px #ddd solid;
    border-top: 4px #999 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
  }
  @keyframes sp-anime {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
  }
  .is-hide{
    display:none;
  }
</style>

CSS 競合スタイルの優先順位

スタイル

優先度高順
!important付きスタイル
スタイル
UAスタイル(ブラウザデフォルトスタイル)

詳細度

セレクタ a b c d 点数
style属性 style=”~” 1 0 0 0 1000
ID #myId 0 1 0 0 100
要素名.クラス名 li.test 0 0 1 1 11
複数要素 ul li 0 0 0 2 2
単一要素 li 0 0 0 1 1

a
b

<span id="a">a</span>
<span id="b">b</span>

<style>
 #a {
  color: red;
 }
 span {
  color: blue;
 }
</style>

→red(ID名)が最優先される

  • a
  • b

<ul>
 <li class="test">a</li>
 <li>b</li>
</ul>

<style>
 li.test {
  color: blue;
 }
 ul li {
  color: green;
 }
 li {
  color: red;
 }
</style>

→blue(要素名.クラス名)が優先される
→green(複数要素)が次いで優先される

記述順

後に書かれる程優先される(上書きされる)

CSS リセットCSS

リセットCSSとは?

ブラウザ固有のスタイルを全て打ち消すCSS
適用後は各ブラウザを共通のCSSで記述できる為、工数の削減に繋がる一方で、
・処理が重くなる
・意図しないスタイルが打ち消されてしまう
等のデメリットもある
その為、リセットCSSの種類は以下の処理方法に分かれる
ブラウザ固有のスタイルを全て打ち消すCSS
一部の項目の設定のみを打ち消すCSS

ブラウザ固有のスタイルを全て打ち消すCSS

・Reset CSS
・HTML5 Doctor
等がある

一部の項目の設定のみを打ち消すCSS

normalize.css
sanitize.css
等がある

CSS レスポンシブ

media属性

<!– ウィンドウサイズが480px以下 –>
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<!– ウィンドウサイズが481px~979px –>
<link rel="stylesheet" href="medium.css" media="screen and (min-width:481px) and (max-width:979px)">
<!– ウィンドウサイズが980px以上 –>
<link rel="stylesheet" href="large.css" media="screen and (min-width:980px)">

@mediaルール

@media screen and (min-width: 480px){
 ~
}
@media screen and (min-width: 780px) and (max-width: 980px){
 ~
}
@media screen and (min-width: 981px){
 ~
}


<div class="top-img">
 <img src="~" />
</div>
<style>
 .top-img {
  margin: auto;
  padding: auto;
  list-style-type: none;
 }
 
 @media screen and (max-width: 700px) {
  .top-img {
   width: 98%px;
  }
 }
 @media screen and (min-width: 701px) {
  .top-img {
   width: 709px;
  }
 }
</style>

ビューポート

<meta
  name="viewport"
  content="
    width=device-width,
    height=device-height,
    initial-scale=1,
    maximum-scale=1,
    user-scalable=no">

横幅、縦幅
width=device-width,
height=device-height,
※デバイスに合わせる(px指定も可)

初期表示倍率、最大倍率
initial-scale=1,
maximum-scale=1
上記例では初期表示倍率×1、最大倍率×1
つまり拡大できない。
(ゲーム等を除き非推奨)

拡大/縮小許可
user-scalable=no
アクセシビリティ、ユーザビリティは減少するが、
動作速度は速くなる。

CSS グローバルナビ

CSS

リスト記号非表示

<nav class="globalNavi">
 <ul>
  <li><a href="page1.html">メニュー</a></li>
  <li><a href="page2.html">メニュー</a></li>
  <li><a href="page3.html">メニュー</a></li>
  <li><a href="page4.html">メニュー</a></li>
 </ul>
</nav>
<style>
 .globalNavi ul li {
  list-style: none;
 }
</style>

上下に罫線

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
 }
 .globalNavi ul li {
  list-style: none;
 }
</style>

ulの余白削除

<style>
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul li {
  list-style: none;
 }
</style>

メニューを横並びに

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul li{
  list-style: none;

  width: 100px;
  float: left;
 }
</style>

メニューの高さ調整

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }

 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
 }
</style>

各メニューに罫線追加

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;

  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
 }
</style>

各メニューの文字を中央表示

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;

  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
</style>

メニューの上下に余白追加

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;

  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
</style>

最初のメニューの左側罫線のみ非表示

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }

 .globalNavi8 ul li:first-child {
  border-left: none;
 }
</style>

リンクの下線削除

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
 .globalNavi ul li:first-child {
  border-left: none;
 }

 .globalNavi ul li a {
  color: inherit;
  text-decoration: none;
 }
</style>

マウスオーバー処理

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
 .globalNavi ul li:first-child {
  border-left: none;
 }
 .globalNavi ul li a {
  color: inherit;
  text-decoration: none;
 }

 .globalNavi ul li a:hover {
  background-color: #F2F2E5
 }
</style>

マウスオーバー領域の拡張

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
 .globalNavi ul li:first-child {
  border-left: none;
 }
 .globalNavi ul li a {
  color: inherit;
  text-decoration: none;

  display: block;
  padding: 5px;
 }
 .globalNavi ul li a:hover {
  background-color: #F2F2E5
 }
</style>

現在ページの背景色を変える

<nav class="globalNavi">
 <ul>
  <li class="current" ><a href="page1.html">メニュー</a></li>
  <li><a href="page2.html">メニュー</a></li>
  <li><a href="page3.html">メニュー</a></li>
  <li><a href="page4.html">メニュー</a></li>
 </ul>
</nav>

<style>
 .globalNavi {
  border: solid #CCCCCC;
  border-width: 1px 0;
  padding: 10px 0;
 }
 .globalNavi ul {
  margin: 0;
  padding: 0;
 }
 .globalNavi ul:after {
  content: "";
  clear: both;
  display: block;
 }
 .globalNavi ul li{
  list-style: none;
  width: 100px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
 }
 .globalNavi ul li:first-child {
  border-left: none;
 }
 .globalNavi ul li a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 5px;
 }
 .globalNavi ul li a:hover
,
 .globalNavi ul li.current a {
  background-color: #F2F2E5
 }
</style>

Bootstrap

Bootstrap グローバルナビ」参照

CSS 見出し要素 (H1~H6)

<h1> ←大きい 小さい→<h6>

ヘッダー

<h5>ヘッダー</h5>
<style type="text/css">
 h5 {
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding:.6em .7em
 }
</style>

CSS canvas要素

CSS <canvas>

文字表示(fillText)


<canvas id="txtCanvas">
</canvas>
<style>
  canvas
  {
    色・サイズ等(略)
  }
</style>
<script>
  $(function(){
    var context = $("#txtCanvas")[0].getContext("2d");
    var context = getElementById("#txtCanvas").getContext("2d");
    context.font = "30pt Arial";
    context.fillStyle = "blue";
    context.textAlign = "left";
    context.textBaseline = "top";
    context.fillText("Sample", 10, 10);
    fillText(表示文字列, コンテキストからのx座標, コンテキストからのy座標, 最大幅)
  });
</script>

画像表示(drawImage)


<canvas id="picCanvas">
</canvas>
<style>
  canvas
  {
    色・サイズ等(略)
  }
</style>
<script>
  $(function(){
    var myImg = new Image();
    myImg.src = "画像パス.gif";
    
    var context = $("#picCanvas")[0].getContext("2d");
    var context = getElementById("#txtCanvas").getContext("2d");
    
    context.drawImage(myImg, 10, 10, 150, 100);
    

    context.drawImage(image, dx, dy)
    Canvasの座標 (dx, dy) を左上端として、image に格納されたImageオブジェクトを描画。
    
    context.drawImage(image, dx, dy, dw, dh)
    dw を横幅、dh を縦幅としたサイズに伸縮
    
    context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
    元の画像をトリミングしたものをCanvas上に描画。
    元の画像の (sx, sy) から、横幅 sw、縦幅 sh の領域をトリミング。
    トリミングされた部分画像を、Canvasの座標 (dx, dy) に、横幅 dw、縦幅 dh のサイズに伸縮して描画。
    

    
  });
</script>

CSS transform属性






<div id="parent">
  移動、重ね表示が可能な<canvas>要素(html5)
  <canvas id="stop">
  </canvas>
  
  <canvas id="translate">
  </canvas>
  
  <canvas id="rotate">
  </canvas>

  <canvas id="scale">
  </canvas>

  <canvas id="skew">
  </canvas>
</div>
<style>
  #parent
  {
    position: relative;  /*相対位置指定*/
    height: 250px;
  }

  canvas
  {
    色・サイズ等(略)
    position: absolute;  /*絶対位置指定*/
  }

  #stop
  {
    z-index: 40;  /* 値が大きい程上に表示される */
    親要素#parentからの絶対位置
    left: 10px;
    top: 10px;

  }

  #translate
  {
    z-index: 30;  /* 値が大きい程上に表示される */
    親要素#parentからの絶対位置
    left: 40px;
    top: 40px;

  }

  #rotate
  {
    z-index: 20;  /* 値が大きい程上に表示される */
    親要素#parentからの絶対位置
    left: 70px;
    top: 70px;

  }

  #scale
  {
    z-index: 10;  /* 値が大きい程上に表示される */
    親要素#parentからの絶対位置
    left: 100px;
    top: 100px;

  }

  #skew
  {
    z-index: 0;  /* 値が大きい程上に表示される */
    親要素#parentからの絶対位置
    left: 130px;
    top: 130px;

  }
</style>
<script>
  $(function(){
    var myValue = 0;
    var myMulti = 1;

    
    //10ミリ秒に1回の処理
    var stopTimer = setInterval(function(){
        if ((myValue > 100) | (myValue < -50)) {
          myMulti *= -1;
        };
        myValue += (0.1 * myMulti);

        
        myTranslate('#translate',myValue);
        myRotate('#rotate',myValue);
        myScale('#scale', 1 + myValue * 0.01);
        mySkew('#skew',myValue * 0.5);
      },10);
    

    var myRotate = function(target,value){
      //回転
      $(target).css({"transform" : "rotate(" + value + "deg)"});
      transform: rotate(100deg); で回転処理
    };
    
    var myTranslate = function(target,value){
      //移動
      $(target).css({"transform" : "translate(" + value + "px, 0px)"});
      transform: translate(100px,100px); で移動処理
    };

    var myScale = function(target,value){
      //拡大/縮小
      $(target).css({"transform" : "scale(" + value + ")"});
      transform: scale(0.5,2); で拡大/縮小処理(1が等身大)
    };

    var mySkew = function(target,value){
      //傾斜
      $(target).css({"transform" : "skew(" + value + "deg)"});
      transform: skew(30deg); で傾斜処理

    複数のtransform属性を指定する場合
    transform: skew(30deg) scale(2,2);
    $(要素).css( { "transform : skew(30deg) scale(2,2)" } );

    };

  });
</script>

CSS 解除

解除前

AAA

<span id="myText1" class="mySetting">AAA</span>
<style>
  .mySetting {
    color: red;
    font-size: large;
    margin-left: 20px;
  }
</style>

解除クラスを指定

AAA

<span id="myText2" class="mySetting myInitial">AAA</span>
<style>
  .myInitial {
    color: initial;
    font-size: initial;
    margin: initial;
  }
</style>

解除IDを指定

AAA

<span id="myText3" class="mySetting">AAA</span>

<style>
  #myText3 {
    color: initial;
    font-size: initial;
    margin: initial;
  }
</style>

CSS opacity属性

CSS opacity属性

top
middle
bottom

<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
<style>
  #top,#middle,#bottom
  {
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    background-color: blue;
    color: white;
    text-shadow: 3px 3px 1px black;
    box-shadow: 3px 3px 5px black;
  }

  

  #top
  {
    0=0% ~ 1=100%
    opacity: 0.5;
  }
  

  #middle
  {
    opacity: 0.5;
  }
  

  #bottom
  {
    opacity: 0.5;
  }
</style>

CSS display属性

一覧

ブロック
要素
インライン
要素
インライン
ブロック

要素
改行 × ×
高さ ×
上下マージン ×

ブロックレベル

縦に積まれていく(改行される)
・width/height が指定できる
・上下左右に margin/padding を指定できる
・text-align は要素の中身に適応される。
・vertical-align は指定できない。

<address>
<div>
<fieldset>
<form>
<h1>~<h6>
<hr>
<ol>
<p>
<table>
<ul>

通常のリンク(文字の上だけが有効)
ブロックレベルのリンク(ブロック全体が有効)

<a href="http://~">通常のリンク(文字の上だけが有効)</a><br/>
<a href="http://~" class="block">ブロックレベルのリンク(ブロック全体が有効)</a>
<style>
  .block {
    /* 本来「インライン」レベルであるリンクを「ブロック」レベルに変更 */
    display: block;
    padding: 5px;
    border:1px solid #888;

  }
</style>

インラインレベル

横に並んでいく(改行されない)
・width/height は指定できない。
 (幅や高さは文字列の長さや文字の大きさ等の内容物のサイズ)
・左右だけ margin を指定できる
・左右に padding を指定できる。
 (上下に指定すると、前後の行や要素にかぶる)
・text-align を親ブロックに付けることで指定できる。
・vertical-align を指定できる。
<br>
<em>
<big>
<small>
<span>
<strong>
<a>
<img>
<input>
<label>
<select>
<textarea>

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5

<div class="parent">
  /* ↓ 要素は「インライン」レベルなので自動改行されない(横に並ぶ) */
  <div class="inline">メニュー1</div>
  <div class="inline">メニュー2</div>
  <div class="inline">メニュー3</div>
  /* ↓ 要素は「ブロック」レベルなので自動改行される(縦に並ぶ) */
  <div >メニュー4</div>
  <div >メニュー5</div>
</div>
<style>
  .parent {
    padding: 15px;
    border:1px solid #888;
    width: 80%;

    /* 子要素を中央寄せ */
    text-align: center;
  }
  .inline {
    /* 本来「ブロック」レベルである<div>を「インライン」レベルに変更 */
    display: inline;
    padding: 5px;
    border:1px solid #888;

    /* 「インライン」要素には ↓ は効かない */
    width: 100px;
    height: 100px;
  }
</style>

入れ子の配置

ブロックレベル要素への配置
 ブロックレベル要素:OK
 インライン要素:OK
インライン要素への配置
 ブロックレベル要素:NG
 インライン要素:OK

インライン-ブロックレベル

例1

<div class="parent">
  <div class="inlineblock">メニュー1</div>
  <div class="inlineblock">メニュー2</div>
  <div class="inlineblock">メニュー3</div>
</div>
<br/>
<style>  
  .parent {
    padding: 15px;
    border:1px solid #888;
    width: 80%;

    text-align: center;
  }
  .inlineblock {
    /* 本来「ブロック」レベルである<div>を「インライン-ブロック」レベルに変更 */
    display: inline-block;
    padding: 5px;
    border:1px solid #888;

    /* 「インライン-ブロック」要素には ↓ は有効 */
    width: 100px;
    height: 100px;
  }
</style>

例2

アイキャッチ(PC)
文章
文章
文章
デザイン
文章
文章
文章

<div class="parent">
  <div class="box">
    <img src=http://~.gif" width="128" /><br/>
    文章<br/>
    文章<br/>
    文章
  </div>
  <div class="box">
    <img src="http://~.gif" width="128" /><br/>
    文章<br/>
    文章<br/>
    文章
  </div>
</div>

<style>
  .parent {
    /* 自身は<div>でブロック要素なのでmargin有効 */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    /* 子要素のインラインブロックを中央寄せ(左右) */
    text-align: center;
    /* 分かりやすくする為に線を付ける */
    border:1px solid #888;

  }
  

  img {
    /* 画像を左寄せ。文章を右側に回り込ませる */
    float: left;
  }
  

  .box {
    /* inline-block:インライン要素とブロック要素の機能を兼ねた要素に変更 */
    (「」参照)
    display: inline-block;
    width: 250px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    max-width: 35%;
    margin: 15px;
    /* 分かりやすくする為に線を付ける */
    border:1px solid #888;

  }
</style>

table/table-row/table-cell

対象 機能
table 親要素 <table>または<tr>と同じ働きに
table-row 子要素 <tr>と同じ働きに
table-cell 子要素 <td>と同じ働きに

ul/li

<ul class="navi">
 <li>メニュー1</li>
 <li>メニュー2</li>
 <li>メニュー3</li>
</ul>
<style>
 .navi {
  display: table;
  width: 100%;
  text-align: center;
 }
 .navi li {
  display: table-cell;
  border: 1px solid gray;
 }
</style>

div

1
2
3
4

<div class="table_table">
 <div class="table_row">
  <div class="table_col">1</div>br>
  <div class="table_col">2</div>
 </div>
 <div class="table_row">
  <div class="table_col">3</div>br>
  <div class="table_col">4</div>
 </div>
</div>

<style>
 .table_table {
  display: table;
  width: 100%;
 }
 .table_row {
  display: table-row;
 }
 .table_col {
  display: table-cell;
  border: 1px solid gray;
 }
</style>

table

1 2
3 4

<table>
 <tr><td>1</td><td>2</td></tr>
 <tr><td>3</td><td>4</td></tr>
</table>

<style>
 #table_div table {
  display: table;
  width: 100%
 }
 #table_div td {
  display: table-cell;
  border: 1px solid gray;
 }
</style>