webサイト制作の勉強｜2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能

css3

Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。
Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。


HTML

rel=“noopener"

target="_blank"を使用するとリンク先を別のタブで開く事が出来ますが、セキュリティ上の脆弱性があり、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。それを避ける事が出来るのがこの「rel=“noopener"」属性です。

<a href="http://example.com" rel=“noopener" target="_blank">アンカー</a>

rel=“noreferrer"

rel属性にnoreferrerを付けることで、参照先に対して参照元のリンクを渡さないようにすることができます。（電話で例えると非通知電話みたいなものです。）

<a href="http://example.com" rel=“noreferrer" target="_blank">アンカー</a>

input type="color"

16進数表記のテキストフィールド。カラーピッカーのUIが用意されている。

<input type="color" value="#f6b73c">

meter要素

<p>オーブンの温度: <meter min="200" max="500"
  value="350">350 degrees</meter></p>

details, summary要素

CSS、JavaScriptを使用せずにアコーディオンが実装できる。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

button form Attribute

送信ボタン(button submit)をform要素の外からでも利用できるようになる。

<form action="outout.php" method="post" id="form1">
  <input type="text" id="name" name="name">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

picture要素

srcset属性

CSS

flow-root

clearfixを利用しなくてもfloatを解除できる。overflow:hiddenも必要ありません。

div {
  display: flow-root;
}

all

すべてのプロパティを一括して指定する。

button {
  all: unset;
}

unset

プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。

<style>
.box{
color: green;
}
p {
color: red;
font-size: 20px;
}
.bar{
all: unset;
}
</style>
</head>
<body>
<div class="box">
<p>このテキストは赤です。</p>
<p>このテキストも赤です。</p>
<p class="bar">このテキストです。</p>
</div>
</body>

それ以外にも便利なものがたくさんあります


qiita.com

CSS3 filterでの画像加工

css3

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。
それにより、フェルタ毎に複数の画像を用意する必要がなくなります。



cssのfilterプロパティで出来る事

  • grayscale（グレースケール）
  • saturate（彩度）
  • sepia（セピア）
  • hue-rotate（色相）
  • invert（色の反転）
  • blur（ぼかし）
  • brightness（明るさ）
  • contrast（コントラスト）
  • drop-shadow（ドロップシャドウ）
grayscale(値)

値：0～100%
備考：値が大きいほど、画像の色が白黒に近づく

saturate(値)

値：0～上限なし
備考：値が大きいほど、色が鮮やかになる。値の上限が無く、例えば10000%という値も設定可能。

sepia(値)

値：0～100%
備考：値が大きいほど、色が黒褐色に近づく。

hue-rotate(値)

値：0deg～360deg（上限・下限なし）
備考：360deg（1周）で元の色に戻る（-360degでも同じ）

invert(値)

値：0～100%
備考：値が大きいほど、写真のネガっぽくなる。

blur(値)

値：0px～上限なし
備考：値が大きいほど、ぼかしの度合いが大きくなる。値の上限が無く、例えば1000pxという値も設定可能


brightness(値)

値：0～上限なし
備考：値が大きいほど、明るさが大きくなる。値を値の上限が無く、0.67といった少数での値を指定可能。ちなみに値を0にすると色は真っ黒になる。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1～3：下限上限なし
値4～6：0～255
値7：0～上限なし
備考：値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す
値4～6で色の指定する（色の三原色rgb）
値7で明るさを指定する









migo-media.com

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

JavaScript webサイト制作

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



haltu.github.io



付いている機能

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

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






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>

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);
    }
  }
}


script.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);
  }
});