2020-12-08

既存サイトのトレース｜家具のECサイト

HTML5+CSS3 レスポンシブデザイン

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。

f:id:yachin29:20201112151202j:plain

www.bloomingville.com

今回のレイアウトのポイント

最大幅を指定したグリッドレイアウト
cssはモバイルサイズから指定（モバイルファースト）
ドミナントカラーを使ったデザイン
可変のブロックに固定値のマージン
ある程度スクロールするとグローバルナビがページ上部に固定
スマホ時にはハンバーガーメニュー

などです。

ドミナントカラー

ドミナントとは「支配」するという意味です。色相を統一した多色配色をドミナントカラー配色といいます。
色相は同一色相で、トーンは自由に選択できる配色です。ただし必ず同一色相にしなければならないわけではなく、色相に統一感がある場合は隣接・類似色相から選択しても構いません。色と色との明度差を小さくすることでより統一感が生まれ、色によるイメージの支配を強く図ることができます。

f:id:yachin29:20190930214255j:plain

blog.iroko.jp

ベースカラー

#f0ede7

メインカラー

#e4dfd6

テキストカラー

#4A4645

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECサイトのトレース</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>ロゴ</h1>
<p id="ham"><span></span></p>
</header>
<nav id="g-nav">
<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Collections</a></li>
    <li><a href="#">Bloomingville</a></li>
    <li><a href="#">MINI</a></li>
    <li><a href="#">Creative Collection</a></li>
    <li><a href="#">ILLUME x Bloomingville</a></li>
    <li><a href="#">Press</a></li>
</ul>
</nav>
<div class="container">
<main>
<div class="main-content">
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>Christmas 2020</h2>
            <p class="lead">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 </p>
            <p class="main-btn btn"><a href="#">Check out Christmas 2020</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main01.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>Anniversary donation 2020</h2>
            <p class="lead">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</p>
            <p class="more"><a href="#">see more</a></p>
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>AW20 Anniversary collection</h2>
            <p class="lead">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 </p>
            <p class="main-btn btn"><a href="#">Explore collection</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main02.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
    <div class="main-wrapper">
        <div class="main-txt">
            <h2>ILLUME x Bloomingville</h2>
            <p class="lead">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 </p>
            <p class="main-btn btn"><a href="#">Check out ILLUME x Bloomingville</a></p>
        </div>
        <div class="main-photo">
            <img src="img/main03.jpg" alt="">
        </div>
    </div><!-- /.main-wrapper -->
</div><!-- /.main-content -->

<div class="col-wrapper">
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo01.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>Shop Bloomingville in<br class="sp">stores or online</h3>
        <p class="col-icon">アイコンアイコンアイコンアイコン</p>
        <p class="main-btn btn"><a href="#">Find store</a></p>
    </div>
</div><!-- /.col-box -->
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo02.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>SWant to become a Retailer?</h3>
        <p class="col-icon"></p>
        <p class="main-btn btn"><a href="#">Apply now</a></p>
    </div>
</div><!-- /.col-box -->
<div class="col-box">
    <div class="col-photo">
        <img src="img/col-photo03.jpg" alt="">
    </div>
    <div class="col-txt">
        <h3>Meet us at the season's tradeshows</h3>
        <p class="col-icon"></p>
        <p class="main-btn btn"><a href="#">See upcoming tradeshows</a></p>
    </div>
</div><!-- /.col-box -->
</div><!-- /.col-wrapper -->
</main>
<footer></footer>
</div><!-- /.container -->
</body>
</html>

style.scss

@charset "utf-8";
@import "_reset.scss";
@import "_color.scss";
@import "_mixin.scss";

/* spレイアウト */
body{
background-color: $base;
font-size: 14px;
color: $text;
}
img{
max-width: 100%;
}
header{
width: 100%;
height: 60px;
background-color: $main;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding: 0 10px;
@include tab{
height: 160px;
}

h1{
width: 150px;
height: 36px;
background: url(../img/logo.svg)no-repeat center center/contain;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
@include tab{
    width: 440px;
    height: 102px;
    margin: 0 auto;
}
}
}
#ham{
width: 44px;
height: 44px;
position: relative;
@include tab{
    display: none;
}
span{
display: block;
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
&::before{
display: block;
content: "";
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: -14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
&::after{
display: block;
content: "";
width: 20px;
height: 2px;
background-color: $text;
position: absolute;
top: 0;
right: 0;
bottom: -14px;
left: 0;
margin: auto;
}
}
}

#g-nav{
width: 100%;
height: calc(100vh - 60px);
background-color: $accent;
display: none;
@include tab{
    display: block;
    height: 56px;
    position: sticky;
    top: 0;/* 指定した位置に来たら固定になる */
    z-index: 100;
}
ul{
background-color: $base;
@include tab{
    display: flex;
    padding-left: 10px;
    li{
        height: 56px;
        margin: 0 12px;
    @include pc{
        margin: 0 20px;
    }
        a{
            font-size: 13px;
            color: $text;
            line-height: 56px;
            @include pc{
                font-size: 14px;
            }
        }
    }
}
@include pc{
    justify-content: center;
}
}  
}



/* main-content部分 */
.container{
max-width: 1366px;
margin: 0 auto;
@include tab{
padding: 0 10px 10px;
}
}
.main-wrapper{
display: flex;
flex-direction: column;
margin-bottom: 10px;

&:nth-of-type(2)>.main-txt{
background-color: #afa891;
height: 80vh;
@include tab{
width: 100%;
}
}
@include tab{
flex-direction: row;
justify-content: space-between;

&:nth-of-type(4){
flex-direction: row-reverse;
}
}
}

.main-photo{
height: 250px;
order: 1;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
@include tab{
width: calc(60% - 10px);
height: 80vh;
}
}

.main-txt{
background-color: #FFF;
order: 2;
text-align: center;
@include tab{
width: 40%;
}
}


/* カラム部分 */
.col-wrapper{
@include pc{
display: flex;
justify-content: space-between;
}
.col-box{
@include tab{
    display: flex;
    .col-photo,.col-txt{
        width: 50%;
        @include pc{
        width: 100%;
        }
    }
}
@include pc{
    display: block;
    width: calc((100% - 20px) / 3);
}

.col-photo{
height: 220px;
@include tab{
    height: auto;
    padding-bottom: 10px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
.col-txt{
background-color: $main;
margin-bottom: 10px;
text-align: center;
h3{
font-size: 24px;
font-weight: normal;
padding: 40px 0;
}
.col-icon{
width: 86px;
height: 86px;
margin: 40px auto;
border-radius: 50%;
background:$base url(../img/map-icon.svg)no-repeat center center/40px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
@include pc{
    height: 480px;
}
}
&:nth-of-type(2) .col-icon{
background:$base url(../img/col-icon.svg)no-repeat center center/40px;
}
}
}
footer{
width: 100%;
height: 100vh;
background-color: $accent;
}

/* ボタン用スタイル */
.main-btn>a{
display: inline-block;
padding: 16px 20px;
background-color: $base;
margin: 40px auto;
color: $text;
&::after{
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid $text;
border-right: 1px solid $text;
transform: rotate(45deg);
margin-left: 16px;
}
}
.btn>a{
transition: 0.2s;
&:hover{
transform: translate(10px,0);
}
&:hover::after{
transform: translate(4px,0) rotate(45deg);
}
}

2020-11-26

wordpressで特定のカテゴリー記事を表示させる

WordPress

wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます。

「get_posts」の場合

ニュースカテゴリー記事を出力

<dl>
<?php
  $arg = array(
             'posts_per_page' => 4, // 表示する件数
             'orderby' => 'date', // 日付でソート
             'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
             'category_name' => 'news' // 表示したいカテゴリーのスラッグを指定
         );
  $posts = get_posts( $arg );
  if( $posts ): ?>
<?php
foreach ( $posts as $post ) :
setup_postdata( $post ); ?>
	

<dt><?php the_time( 'Y.m.d' ); ?></dt>
<dd>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</dd>

<?php endforeach; ?>
<?php
  endif;
  wp_reset_postdata();
?>
</dl>

2020-11-26

便利なツールや読んでおきたい記事まとめ

その他

webで生活を便利にするメディア
shogo-log.com

もぐもぐ食べる、おいしいWebデザイン。
mogumogu-design.com

wweb.dev

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.info/index.html

2020-11-19

フィルタリングやソートが出来る高機能プラグイン「muuri.js」

Webサイト制作

フィルター機能、ソート機能が付いて可変グリッドレイアウトも実現出来さらにレスポンシブにも対応した、無料で商用利用も可能な　 Javascript プラグインの「muuri.js」

haltu.github.io

付いている機能

フィルター機能
ソート機能
検索機能
Masonryレイアウト
ドラッグ機能

など、非常に高機能です。

digipress.info

See the Pen
Muuri.js by yachin29 (@yachin29)
on CodePen.

index.html

<body>
<h1>Grid Layout by Muuri.js</h1>

<section class="grid-wrapper">
<div class="filter-controls">
<div class="control">Search
<input class="search-field form-control" type="text" name="search" placeholder="Enter the fruit name">
</div>
<div class="control">Filter
<select class="filter-field form-control">
<option value="">None</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<div class="control">Sort
<select class="sort-field form-control">
<option value="order">None</option>
<option value="title">Order by number</option>
<option value="color">Order by color name</option>
</select>
</div>
</div><!-- filter-controls -->

<div class="grid">
<div class="item blue w2 h2" data-color="blue" data-title="01">
<div class="item-content">
<!-- Safe zone, enter your custom markup -->
<div class="custom-content">
 Item 1
</div>
</div>
</div><!-- item -->

<div class="item red w2" data-color="red" data-color="blue" data-title="05">
<div class="item-content">
<div class="custom-content">
Item 5
</div>
</div>
</div><!-- item -->

<div class="item green w2" data-color="green" data-color="blue" data-title="03">
<div class="item-content">
<div class="custom-content">
Item 3
</div>
</div>
</div><!-- item -->

<div class="item red w2 h2" data-color="red" data-color="blue" data-title="04">
<div class="item-content">
<div class="custom-content">
Item 4
</div>
</div>
</div><!-- item -->

<div class="item red" data-color="red" data-color="blue" data-title="02">
<div class="item-content">
<div class="custom-content">
Item 2
</div>
</div>
</div><!-- item -->

<div class="item blue" data-color="blue" data-color="blue" data-title="06">
<div class="item-content">
<div class="custom-content">
Item 6
</div>
</div>
</div><!-- item -->

<div class="item red h2" data-color="red" data-color="blue" data-title="12">
<div class="item-content">
<div class="custom-content">
Item 12
</div>
</div>
</div><!-- item -->

<div class="item green h2" data-color="green" data-color="blue" data-title="08">
<div class="item-content">
<div class="custom-content">
Item 8
</div>
</div>
</div><!-- item -->

<div class="item green w2" data-color="green" data-color="blue" data-title="11">
<div class="item-content">
<div class="custom-content">
Item 11
</div>
</div>
</div><!-- item -->

<div class="item blue w2" data-color="blue" data-color="blue" data-title="10">
<div class="item-content">
<div class="custom-content">
Item 10
</div>
</div>
</div><!-- item -->

<div class="item green" data-color="green" data-color="blue" data-title="07">
<div class="item-content">
<div class="custom-content">
Item 7
</div>
</div>
</div><!-- item -->

<div class="item red" data-color="red" data-color="blue" data-title="09">
<div class="item-content">
<div class="custom-content">
Item 9
</div>
</div>
</div><!-- item -->


</div>
</select>


<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="js/muuri.js"></script>
<script src="js/script.js"></script>
</body>

muuri.scss

// ******************************
// Normalize (ignore me!)
// ******************************

$bg_color:#fff;
$font_color:#333;
$link_color:#999;
$link_hover_color:#777;

* {
  &:before,
  &:after{
    box-sizing:border-box;
    padding:0;
    margin:0;
  }
}
body{
  background-color:$bg_color;
  color: $font_color;
  text-align: center;
  a, a:visited{
    color: $link_color;
    text-decoration:none;
  }
  a:hover{
    color: $link_hover_color;
  }
}
// ******************************
// End of Normalize
// ******************************

h1{
  font-size:36px;
  margin:40px auto;
}
.filter-controls{
  text-align:center;
  margin-bottom:30px;
  .control{
    display:inline-block;
    width:240px;
    margin:0 10px;
    *{
      box-sizing:border-box;
    }
    .form-control{
      width:100%;
      height:40px;
      padding:0 20px;
      border:2px solid #ccc;
      border-radius:3px;
      background-color:#fff;
      color:#666;
      font-size:16px;
      cursor:pointer;
      -webkit-appearance:none;
      appearance:none;
      &:focus{
        outline:0;
        border-color:#0CAAF5;
      }
    }
  }  
}

.grid {
  position: relative;
  max-width:80%;
  margin:0 auto;
}
.item {
  position: absolute;
  width:200px;
  height:200px;
  margin: 5px;
  z-index: 1;
  transition:transform .6s ease;
  cursor:move;
  &.blue{
    .custom-content{
      border-color:#0CAAF5;
      color:#0CAAF5;
    }
  }
  &.red{
    .custom-content{
      border-color:#F54487;
      color:#F54487;
    }
  }
  &.green{
    .custom-content{
      border-color:#00DE73;
      color:#00DE73;
    }
  }
  &.w2{
    width:410px;
  }
  &.h2{
    height:410px;
  }
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  display:table;
}
.custom-content{
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #fff;
  color: #666;
  border:2px solid;
  border-radius:3px;
}

// If use dragging
.item.muuri-item-dragging {
  z-index: 3;
  transition:none;
}
.item.muuri-item-releasing {
  z-index: 2;
}

@media ( max-width : 877px ){
  .item{
    width:calc(33.33% - 11px);
    height:calc(33.33vw - 11px);
    &.w2{
      width:calc(33.33% - 11px);
    }
    &.h2{
      height:calc(33.33vw - 11px);
    }
  }
}
@media ( max-width : 640px ){
  .item{
    width:calc(50% - 10px);
    height:calc(50vw - 10px);
    &.w2{
      width:calc(50% - 10px);
    }
    &.h2{
      height:calc(50vw - 10px);
    }
  }
}

CDN

<script src="https://cdn.jsdelivr.net/npm/muuri@0.9.3/dist/muuri.min.js"></script>

muuri.js

document.addEventListener('DOMContentLoaded', function () {
  var grid = null,
      wrapper = document.querySelector('.grid-wrapper'),
      searchField = wrapper.querySelector('.search-field'),
      filterField = wrapper.querySelector('.filter-field'),
      sortField = wrapper.querySelector('.sort-field'),
      gridElem = wrapper.querySelector('.grid'),
      searchAttr = 'data-title',
      filterAttr = 'data-color',
      searchFieldValue,
      filterFieldValue,
      sortFieldValue,
      dragOrder = [];

  // Init the grid layout
  grid = new Muuri(gridElem, {
    dragEnabled: true
  });
  
  // Set inital search query, active filter, active sort value and active layout.
  searchFieldValue = searchField.value.toLowerCase();
  filterFieldValue = filterField.value;
  sortFieldValue = sortField.value;

  // Search field event binding
  searchField.addEventListener('keyup', function () {
    var newSearch = searchField.value.toLowerCase();
    if (searchFieldValue !== newSearch) {
      searchFieldValue = newSearch;
      filter();
    }
  });

  // Filter field event binding
  filterField.addEventListener('change', filter);
  
  // Sort field event binding
  sortField.addEventListener('change', sort);

  // Filtering
  function filter() {
    filterFieldValue = filterField.value;
    grid.filter(function (item) {
      var element = item.getElement(),
          isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
          isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
      return isSearchMatch && isFilterMatch;
    });
  }
  
  // Sorting
  function sort() {
    // Do nothing if sort value did not change.
    var currentSort = sortField.value;
    if (sortFieldValue === currentSort) {
      return;
    }

    // If we are changing from "order" sorting to something else
    // let's store the drag order.
    if (sortFieldValue === 'order') {
      dragOrder = grid.getItems();
    }

    // Sort the items.
    grid.sort(
      currentSort === 'title' ? compareItemTitle :
      currentSort === 'color' ? compareItemColor :
      dragOrder
    );
    sortFieldValue = currentSort;
  }
  
  // Compare data-title
  function compareItemTitle(a, b) {
    var aVal = a.getElement().getAttribute(searchAttr) || '';
    var bVal = b.getElement().getAttribute(searchAttr) || '';
    return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;

  }

  // Compare data-color
  function compareItemColor(a, b) {
    var aVal = a.getElement().getAttribute(filterAttr) || '';
    var bVal = b.getElement().getAttribute(filterAttr) || '';
    return aVal < bVal ? -1 : aVal > bVal ? 1 : compareItemTitle(a, b);
  }
});

2020-11-19

random関数

JavaScript

JavaScriptで乱数を取得したい場合には「random関数」を使います。

覚えるメソッド

Math.random

Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。

Math.round

Math.floor()は、小数点以下を四捨五入するメソッドです。整数を取得したい場合に利用します。

Math.ceil

Math.floor()は、小数点以下を切り上げるメソッドです。0.999なら1、3.21なら4という数値を返します。

Math.floor

Math.floor()は、小数点以下を切り捨てるメソッドです。0.999なら0、3.21なら3という数値を返します。

<script>
  var a =  Math.random();
 
  document.write(a);
</script>

0から10までの数字をランダムで取得したい場合

<script>
// 0〜10の乱数を発生 ([10]を指定する)
var a = Math.floor( Math.random() * 10 ) ;

 document.write(a);
</script>

各メソッドを実際に表示させる

<script>
 
  var a = Math.round( Math.random() * 10);  //小数点以下を四捨五入
  var b = Math.ceil( Math.random() * 10);  //小数点以下を切り上げ
  var c = Math.floor( Math.random() * 10);  //小数点以下を切り捨て

  document.write(a + '<br>');
  document.write(b + '<br>');
  document.write(c + '<br>');
</script>

任意の範囲での乱数を取得するには

<script>
// 5〜10の乱数を発生 [11-5]と[5]を指定する
var a = Math.floor( Math.random() * 6 ) + 5 ;
</script

画像をランダムで表示する

「img0.jpg」「img1.jpg」「img2.jpg」「img3.jpg」のファイル名をつけた画像を準備する
「img1.jpg」からの場合は、((Math.random()*numOfImg)+1)となる

<script>
var numOfImg = 4;
var num;
num = Math.floor(Math.random() * numOfImg)
document.write('<img src="img/img' + num + '.jpg">');
</script>

2020-11-19

画像にあしらいをつける

2020年5月クラス HTML5+CSS3

あしらいとは、デザインにおいての「装飾」のことです。入れる事で雰囲気や華やかさが出るので色々なパターンのあしらいを覚えてみましょう。

radial-gradientを使ったあしらい

f:id:yachin29:20201119002620p:plain

See the Pen
css3での使ったあしらい1 by yachin29 (@yachin29)
on CodePen.

transformのrotateを使ったあしらい

f:id:yachin29:20201119002944p:plain

See the Pen
css3を使ったあしらい2 by yachin29 (@yachin29)
on CodePen.

2020-11-19

Canvasを使ってグラフが作れる「Chart.js」

ポートフォリオ

canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJava アプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

www.htmq.com

https://canvas.apps.chrome/

Chart.js

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが描けるJavascriptのライブラリです。
HTML5のCanvasを使って描画され、誰でも簡単に編集ができるようになっています。

www.chartjs.org

今回はCDNにあるバンドルファイルを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

qiita.com

作例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>円グラフ</title> 
<style>
h1 {
text-align: center;
}
#box {
width: 800px;
margin: 50px auto 0;
}
</style>
</head>
<body>
  <h1>円グラフ</h1>
  <div id="box">
  <canvas id="myChart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myChart");
  var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["A型", "O型", "B型", "AB型"],
      datasets: [{
          backgroundColor: [
              "#BB5179",
              "#EBB350",
              "#6ABB77",
              "#29A3D5"
          ],
          data: [38, 31, 21, 10]
      }]
    },
    options: {
      title: {
        display: true,
        text: '血液型 割合'
      }
    }
  });
  </script>
</body>
</html>

See the Pen
radar-chart by yachin29 (@yachin29)
on CodePen.

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

既存サイトのトレース｜家具のECサイト

今回のレイアウトのポイント

ドミナントカラー

ベースカラー

メインカラー

テキストカラー

wordpressで特定のカテゴリー記事を表示させる

「get_posts」の場合

ニュースカテゴリー記事を出力

便利なツールや読んでおきたい記事まとめ

フィルタリングやソートが出来る高機能プラグイン「muuri.js」

index.html

muuri.scss

CDN

muuri.js

random関数

覚えるメソッド

Math.random

Math.round

Math.ceil

Math.floor

画像をランダムで表示する

画像にあしらいをつける

radial-gradientを使ったあしらい

transformのrotateを使ったあしらい

Canvasを使ってグラフが作れる「Chart.js」

Chart.js