Monthly Archives: 8月 2018

[コピペで簡単]repeating-linear-gradient()でストライプ!

皆さんrepeating-linear-gradient()って使ってますか?私は使ってませんでした。というか割と最近まで存在すら知らなかったです。いつの間にこんなのできてたんですかね?

最近repeating-linear-gradient()の存在を知って、「これ便利じゃん!」と思ったので、同じように存在すら知らなかった方に向けて紹介したいと思います!「そんなもん前から使い倒しとるわい!」っていう方はそっ閉じしてくださいねw

repeating-linear-gradient()とは

その名の通り「繰り返しのグラデーション」を作るための関数です。普通のlinear-gradient()だとbackground-sizeとの組み合わせで指定が煩雑になってしまいますが、repeating-linear-gradinet()なら繰り返しに特化してる分、指定がシンプルで分かりやすいためおすすめです。

repeating-linear-gradient()の書式

repeating-linear-gradient()書式

基本的な書式は上記のようにlinear-gradinet()と同じです。

カラーストップ(色 位置)の記述をする時に、繰り返しになるグラデーションパターンを1セットだけ書いておけば、後は勝手にリピートしてくれるという点だけが違います。

縦・横・斜めのストライプ

repeating-linear-gradient()の使い所はやっぱりストライプ!ということで、縦・横・斜めのストライプを作ってみました。コピペして色や幅を変えればいろんなバリエーションのストライプが簡単に作れるので試してみてください。

stripe01
<div class="stripe stripe01">縦ストライプ</div>
<div class="stripe stripe02">横ストライプ</div>
<div class="stripe stripe03">斜めストライプ</div>
.stripe {
  width: 300px;
  height: 100px;
  margin: 30px auto;
}
/* 縦ストライプ */
.stripe01 {
  background-image:repeating-linear-gradient(90deg, #fff, #fff 10px, #fcf 10px, #fcf 20px);
}
/* 横ストライプ */
.stripe02 {
  background-image:repeating-linear-gradient(0deg, #fff, #fff 10px, #fcf 10px, #fcf 20px);
}
/* 斜めストライプ */
.stripe03 {
  background-image:repeating-linear-gradient(45deg, #fff, #fff 10px, #fcf 10px, #fcf 20px);
}

[DEMO]

ギンガムチェック

ストライプを透過色で指定し、直角に交わるように複数設定すればギンガムチェック柄も簡単です。

check01
<div class="check01">ギンガムチェック</div>
.check01 {
width: 300px;
height: 100px;
margin: 30px auto;
background-image: 
  /* 横ストライプ */
  repeating-linear-gradient(
	0deg, 
	transparent,transparent 10px,
	rgba(255,153,255,0.5) 10px, rgba(255,153,255,0.5) 20px),
  /* 縦ストライプ */
  repeating-linear-gradient(
	90deg, 
	transparent,transparent 10px,
	rgba(255,153,255,0.5) 10px, rgba(255,153,255,0.5) 20px)
}

[DEMO]

ブロックチェック

複数の色で交差させるのもかわいいですね。

check02
<div class="check02">ブロックチェック</div>
.check02 {
width: 300px;
height: 100px;
margin: 30px auto;
background-color: #ffc;
background-image: 
  /* 横ストライプ */
  repeating-linear-gradient(
	0deg,
	transparent,transparent 20px, /*透明*/
	rgba(255,170,36,0.5) 20px, rgba(255,170,36,0.5) 40px, /*1色目*/
        transparent 40px, transparent 60px, /*透明*/
        rgba(153,170,36,0.5) 60px, rgba(153,170,36,0.5) 80px /*2色目*/
  ),
  /* 縦ストライプ */
  repeating-linear-gradient(
	90deg,
	transparent,transparent 20px,
	rgba(255,170,36,0.5) 20px, rgba(255,170,36,0.5) 40px,
        transparent 40px, transparent 60px,
        rgba(153,170,36,0.5) 60px, rgba(153,170,36,0.5) 80px
  )
}

[DEMO]

バーバリーチェック

頑張ればこんなのも!

check03
<div class="check03">バーバリーチェック</div>
.check03 {
width: 300px;
height: 100px;
margin: 30px auto;
background-color: #dbbb89;
background-image: 
  /*白黒しましま*/
  repeating-linear-gradient(
	90deg,
	transparent,transparent 40px,
	rgba(0,0,0,0.5) 40px, rgba(0,0,0,0.5) 44px,
        rgba(255,255,255,0.5) 44px, rgba(255,255,255,0.5) 48px,
        rgba(0,0,0,0.5) 48px, rgba(0,0,0,0.5) 52px,
        rgba(255,255,255,0.5) 52px, rgba(255,255,255,0.5) 56px,
        rgba(0,0,0,0.5) 56px, rgba(0,0,0,0.5) 60px
  ),
  /*赤線*/
  repeating-linear-gradient(
	90deg,
	transparent,transparent 20px,
	rgba(200,0,0,0.5) 20px, rgba(200,0,0,0.5) 22px,
        transparent 22px,transparent 60px
  ),
  repeating-linear-gradient(
	0deg,
	transparent,transparent 40px,
	rgba(0,0,0,0.5) 40px, rgba(0,0,0,0.5) 44px,
        rgba(255,255,255,0.5) 44px, rgba(255,255,255,0.5) 48px,
        rgba(0,0,0,0.5) 48px, rgba(0,0,0,0.5) 52px,
        rgba(255,255,255,0.5) 52px, rgba(255,255,255,0.5) 56px,
        rgba(0,0,0,0.5) 56px, rgba(0,0,0,0.5) 60px
  ),
  repeating-linear-gradient(
	0deg,
	transparent,transparent 20px,
	rgba(200,0,0,0.5) 20px, rgba(200,0,0,0.5) 22px,
        transparent 22px,transparent 60px
  )
}

[DEMO]

斜めのストライプなんかは、PSDから素材切り出す時になかなかうまくリピートできる素材にならない(下手くそか!)ので、今後はストライプさんについてはこれを使っていこうと思います( ´∀`) 皆さんの参考になれば!

HTML5.1、5.2での仕様変更点をメモ。

html5-logo

先日Twitterにこんな投稿をしたら地味に伸びたので、私も含めて案外みんな2014年に勧告された後のHTML5の仕様変更は追ってないのかなと思い、自分のための備忘録も兼ねて主な変更点をメモしておきます。

なお自分はマークアッパーなので、仕様変更点全てを網羅するのではなく、あくまでHTMLマークアップに関連する部分のみピックアップすることとします。全ての変更点を確認したい人はW3Cの仕様書をあたってください。



2016年HTML5.1勧告時の仕様変更

HTML5.1勧告時の注意すべき仕様変更点は以下の通り。

【追加】
・picture要素とsrcset属性の追加
・details要素とsummary要素の追加
【削除】
・ネストされたセクション要素の見出しに全てh1を置くこと
・tfoot要素をtbody要素の前に置くこと
【変更】
・セクション要素の中のheader/footer要素は入れ子にできる
・figcaption要素はfigure要素のどこに書いても良い
・img要素のalt属性は削除してはいけない(たとえtitle属性がついていたり、友達にe-mailを書くような場合であっても)

など…

[参考:HTML5からHTML5.1への変更点(W3C・英語)

2017年HTML5.2勧告時の仕様変更

HTML5.2勧告時の注意すべき仕様変更点は以下の通り。

【追加】
・dialog要素の追加
・link要素のrel属性値に“canonical”、“noreferrer”、“apple-touch-icon” の値が追加
・WAI-ARIA1.1に準拠
【削除】
・keygen、menu、menuitem要素が廃止
【変更】
・dl要素の直下にdiv要素を記述できる
・body要素内にstyle要素を記述できる(ただしパフォーマンス面の問題から従来どおりhead要素内に記述することを推奨)
・複数のmain要素を記述できる(ただし最初にユーザに見せるのは1つだけで、他はhidden属性で隠す)
・fieldset要素内のlegend要素の中に見出し要素を記述できる

など…

[参考:HTML5.1からHTML5.2への変更点(W3C・英語)

おまけ&まとめ

こうやってみると一部ピックアップしただけでも結構いろいろ変わってるなーという印象ですね。

特に個人的に感慨深いのはHTML5.1の時に「ネストされたセクション要素の見出しに全てh1を置くことができる」という仕様(新しいアウトライン・アルゴリズム)が廃止されたことでしょうか。

この件についてはこのブログでもこちらの記事で言及してそれなりに反響いただいたので詳しく知りたい方は読んでみてください。

あともうひとつ、5.1、5.2での変更点じゃないのですが、HTML5の仕様策定中に検討されていたhgroup要素が勧告時に仕様から削除されたことでしょうか…。

アウトライン・アルゴリズムもhgroup要素も実は勧告前には「at risk(削除される可能性がある要注意の仕様)」とされていたものの、割と目玉機能に近いものとして勧告前から盛んに事例紹介されていたので、いざ勧告時に「やっぱこれなしね!」とか言われた時のダメージが大きかったです(汗)

HTML5仕様は今後も毎年マイナーアップデートを続けるみたいなので、これからはどんなに魅力的に見えても勧告前の、特にat riskの仕様には手を出さないようにしようと心に決めました…(苦笑)