WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

最新のcssについて

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。


backdrop-filter

backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。

使用例

monomode.co.jp


対応ブラウザ状況

Edge:OK
Firefox:要設定変更
Chrome:OK
Safari:要ベンダープレフィックス



scroll-snap

scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。

対応ブラウザ

scroll-snapはすべてのモダンブラウザで対応しています。


alvarotrigo.com

aspect-ratio

例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。



See the Pen
aspect-ratio
by yachin29 (@yachin29)
on CodePen.


対応ブラウザ状況

Edge:OK
Firefox:要設定変更
Chrome:OK
Safari:NG



2020.stateofcss.com


www.mitsue.co.jp



新しいリセットcss

リセットcssも対象ブラウザが変わる度に変わっていきます。

/* Box sizing rules */
/* Box sizingの定義 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
  padding: 0;
}
 
/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
 
/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
 
/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
  list-style: none;
}
 
/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
 
/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
  max-width: 100%;
  display: block;
}
 
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
  margin-top: 1em;
}
 
/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
  font: inherit;
}
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


coliss.com



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

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>

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要素

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

<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