読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

何番目系のおさらい nth-childとnth-of-typeの使い分け

何番目を指定する要素を使わないサイトは少ないでしょう。
それくらい必須のcssセレクタです。

nth-childは要素の種類関係なく数を数えます。
それと違ってnth-of-typeは要素の種類を見ます。
そのためliではnth-childを使っていても問題ありませんが、複合的な要素の場合はnth-of-typeを使うわないと思ったようにいかないことが出てきます。

1番最初の要素 1番最後の要素 奇数 偶数

要素が単一の場合(nth-child)

  • 1 first-child
  • 2 even
  • 3 odd
  • 4 even
  • 5 nth-child(5)
  • 6 last-child

<ul class="n1-1">
<li>1 first-child</li>
<li>2 even</li>
<li>3 odd</li>
<li>4 even</li>
<li>5 nth-child(5)</li>
<li>6 last-child</li>
</ul>
.n1-1 li:nth-child(odd) {
  color: green;
}
.n1-1 li:nth-child(even) {
  color: blue;
}
.n1-1 li:nth-child(5) {
  color: orange;
}
.n1-1 li:first-child {
  color: red;
}
.n1-1 li:last-child {
  color: red;
}

このように兄弟要素がliの場合、-childで思い通りにスタイルが当たっています。

要素が複合的な場合(nth-child)(うまくいってない例)

span1 first-child

p1

p2 nth-child(3)

p3

p4

last-child

<div class="n1-2">
<span>span1 first-child</span>
<p>p1 p:nth-child(even)</p>
<p>p2 nth-child(3)</p>
<p>p3 nth-child(even)</p>
<p>p4 nth-child(odd)</p>
<span>last-child</span>
</div>
/*↓奇数ではなく偶数のp要素が効いてしまっている↓*/
.n1-2 p:nth-child(odd) {
  color: green;
}
/*↓偶数ではなく奇数のp要素が効いてしまっている↓*/
.n1-2 p:nth-child(even) {
  color: blue;
}
.n1-2 span:first-child {
  color: red;
}
/*↓効いていない↓*/
.n1-2 p:first-child {
  color: blue;
}
.n1-2 p:nth-child(3) {
  color: orange;
}
.n1-2 span:last-child {
  color: green;
}
/*↓効いていない↓*/
.n1-2 p:last-child {
  color: yellow;
}

p要素にnth-child(3)を当てているわけですが、span要素が1個目に来ているためそれも含めてその順番が決まってしまうのでがnth-childです。

要素が複合的な場合 (of-type)

span1

p1 first-of-type

p2

p3

p4 last-of-type

span2

<div class="n1-3">
<span>span1</span>
<p>p1 first-of-type</p>
<p>p2</p>
<p>p3</p>
<p>p4 last-of-type</p>
<span>span2</span>
</div>
.n1-3 p:first-of-type {
  color: red;
}
.n1-3 p:last-of-type {
  color: green;
}

of-typeを使用することで期待通りのスタイルが当たりました。

n番目以上の要素

要素が単一の場合

  • 1
  • 2
  • 3 nth-child(n+3)
  • 4 nth-child(n+3)
  • 5 nth-child(n+3)

<ul class="n2-1">
<li>1</li>
<li>2</li>
<li>3 nth-child(n+3)</li>
<li>4 nth-child(n+3)</li>
<li>5 nth-child(n+3)</li>
</ul>
.n2-1 li:nth-child(n+3) {
  color: red;
}

n番目以上は:nth-child(n+指定したい要素の番号)になります。
上の例で行くと3番目以降はスタイルを当てるセレクタとなります。
またnは0, 1, 2...と数値が1ずつ上がっていきます。
なので、(n+3)だと3,4,5...となるわけですね。

n番目以下の要素

要素が単一の場合

  • 1 nth-child(-n+3)
  • 2 nth-child(-n+3)
  • 3 nth-child(-n+3)
  • 4
  • 5

<ul class="n2-2">
<li>1 nth-child(-n+3)</li>
<li>2 nth-child(-n+3)</li>
<li>3 nth-child(-n+3)</li>
<li>4</li>
<li>5</li>
</ul>
.n2-2 li:nth-child(-n+3) {
  color: red;
}
.n2-2 li:nth-last-child(-n+2) {
  color: green;
}

n番目以下は:nth-child(-n+指定したい要素の番号)になります。
上の例で行くと3番目以下の番号にスタイルを当てるセレクタとなります。
こちらもnは0, 1, 2...と数値が1ずつ上がっていきますので(n+3)とは逆に3,2,1と数値が下がっていきます。

n番目以上の要素 n番目以下の要素 最後から数えてn番目の要素

要素が複合的な場合(うまくいってない例)

span1

p1

p2 nth-child(n+3)

p3 nth-child(n+3)

p4 nth-child(n+3)

p5 nth-child(n+3)

span2

<div class="n2-3">
<span>span1</span>
<p>p1</p>
<p>p2 nth-child(n+3)</p>
<p>p3 nth-child(n+3)</p>
<p>p4 nth-child(n+3)</p>
<p>p5 nth-child(n+3)</p>
<span>span2</span>
</div>
.n2-3 p:nth-child(n+3) {
  color: red;
}

p要素にnth-child(n+3)を当てているので3番目のP要素からスタイルが当たりそうですが、p2から当たってしまっています。
こちらは先ほどの説明同様、nth-childが全ての兄弟要素の数を数えるからになります。

要素が複合的な場合(うまくいってない例)

span1

p1 nth-child(-n+3)

p2 nth-child(-n+3)

p3

p4 nth-last-child(-n+3)

p5 nth-last-child(-n+3)

span2

<div class="n2-4">
<span>span1</span>
<p>p1 nth-child(-n+3)</p>
<p>p2 nth-child(-n+3)</p>
<p>p3</p>
<p>p4 nth-last-child(-n+3)</p>
<p>p5 nth-last-child(-n+3)</p>
<span>span2</span>
</div>
.n2-4 p:nth-child(-n+3) {
  color: red;
}
.n2-4 p:nth-last-child(-n+3) {
  color: green;
}

nth-last-childは最後から数えて(-n+指定したい要素番目)となりますがこちらも最後のspan要素を数えているため
pが後ろの2つしかスタイルが当たりません。

要素が複合的な場合 n番目以下の要素 最後から数えてn番目の要素

span1

p1 nth-of-type(-n+2)

p2 nth-of-type(-n+2)

p3 nth-of-type(n+3)

p4 nth-of-type(n+3)

p5 nth-of-type(n+3)

span2

<div class="n2-5">
<span>span1</span>
<p>p1 nth-of-type(-n+2)</p>
<p>p2 nth-of-type(-n+2)</p>
<p>p3 nth-of-type(n+3)</p>
<p>p4 nth-of-type(n+3)</p>
<p>p5 nth-of-type(n+3)</p>
<span>span2</span>
</div>
.n2-5 p:nth-of-type(n+3) {
  color: red;
}
.n2-5 p:nth-of-type(-n+2) {
  color: green;
}

そこで要素が複合的な場合はnth-of-typeを使用します。2番目以下の要素と3番目以降の要素にスタイルが当たりました。

フロントエンドで本当によく使うツール(サイト編)

ツール

世の中便利なツールを無料で提供してるサイトってたくさんありますよね。
今日はその中でも現場で本当に使うツール(サイト編)を紹介します。

カラーコード変換ツール

カラーコード変換ツール
cssで背景のみを透過したいときなどカラーコードをrgbaに変換できるサイトです。

Googleマップで緯度・経度を求める

Googleマップで緯度・経度を求める
GoogleAPIでピンを指定したところに置きたい、道順や経路を示したいときに重宝します。

Unicodeエスケープシーケンス変換ツール

www.koikikukan.com
Jsファイルなどは日本語で文字列を書くと文字化ける環境があるためUnicodeに変換します。

画像圧縮

以下は画像圧縮です。

画像を縮小する

resizer.myct.jp
こちらはブログでよく使わせてもらってます。

画像をBase64に変換するツール (data URI scheme)

blog.thingslabo.com

QRコード作成

QRコード作成結果
スマホで検証する時など、いちいちurlを入力するのは面倒なのでこちらでスマホから読み取れば楽です。

まとめ

以上、他にもありそうなのでどんどん追記したいと思います。

オフラインで使えるchromeアドオンの「Web Maker」が超高速!!

アドオン

フロントエンド制作時のテストや社内での勉強会などはcodepenを使用しますが、どうしてもオンラインは速度についてはオフラインには劣ります。

そのため時には簡単なコードのテストはhtmlファイルを作り必要であればjQueryを読み込んで...という非常に非効率な作業をしていました。

オフラインで使えるchromeアドオン「Web Maker」

今日紹介するWeb Makerはそんな自分の悩みを解決するchromeアドオンです。

codepenのUIに近い設計でオフラインで使用できる点が大きな特徴です。

便利な機能

codepenでできることはほぼWeb Makerでできます。

HTML

f:id:funclur:20170314002909p:plain

htmlはmarkdown形式、もしくはpugに選択可能です。

CSS

f:id:funclur:20170314002857p:plain

cssのメタ言語も網羅しています。
scssは個人的に必須です。

JS

f:id:funclur:20170314002858p:plain

Coffee Script、ES6、Type Scriptから選べます。

ADD LIBRARY

f:id:funclur:20170314002914p:plain

右上のADD LIBRARYからライブラリを追加できます。

jQueryはもちろんのことreactやangularなどのライブラリも簡単に追加することができます。
タブではなくurlから直接読み込むこともできます。

保存

f:id:funclur:20170314002900p:plain

保存することも可能です。ブラウザに保存できます。
saveした後にOPENでタイトルをクリックすれば保存した状態で開かれます。

f:id:funclur:20170314002902p:plain

また、タイトルは左上に表示されておりクリックすることで編集できます。

ダウンロード

f:id:funclur:20170314002908p:plain

作成したコードをファイルにしてダウンロードができます。

edit on codepen

edit on codepenをクリックすることでcodepenに反映することができます。

オンラインでソースを共有したい時もコピーなどせず楽に移行することができますね。

Take screenshot of preview

こちら使うかわかりませんが表示された要素をキャプチャすることができます。
使い方によっては必要となることもあるでしょう。

4つのviewモード

viewモードは4つ用意されています。
codepenはフルスクリーンにするのに認証が必要だったりめんどくささがありますがWeb Makerは1クリックで可能です。
しかもその状態で保存すれば開いた時も保存したviewモードで開かれます。

Settings

f:id:funclur:20170314002904p:plain

設定では、インデント、インデントサイズ、テーマ、fontsize、editorのKey bindingsが選べます。

まとめ

とにかく多機能でありながらシンプルで高速な開発環境が実現できるchromeアドオンの「Web Maker」

これからのフロントエンドに必須のツールとなるのではないでしょうか。

下記は、Web Maker制作者の翻訳記事です。

CodePenライクなChrome拡張「Web Maker」でフロントエンド開発が捗る - WPJ

Web Makerアドオンのインストールはこちら
Web Maker - Chrome Web Store

jQueryのCDNを読み込みたい バージョンごとのurl一覧

javascript

jQueryは、JavaScriptを比較的楽に書くことができるライブラリですが、こちらの読み込み先をまとめたいと思います。

特段理由がなければ、最新のバージョンを使うことをお勧めします。

理由としては、より最適化され読み込みスピードが速くなっているからです。
使用するプラグインによっては、新しいjQueryバージョンに対応していないこともありますのでそちらはご注意ください。

jQuery CDN 3.1.1

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

jQuery CDN 2.2.4

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

jQuery CDN 1.12.4

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

記入例

下記をhtmlファイルに書くことでアラートで「1」が表示されるはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
  alert(1);
});
</script>
<body>

</body>
</html>

CSS3の本当に使えるジェネレーターまとめ11個

まとめ

CSS3でコーディングの幅がだいぶ広がりましたね。

しかし、その反面記述が複雑で覚えにくいのが難点です。

そんな時はジェネレーターで直感的にコードを生成した方が効率的です。

今日はそんなCSS3のジェネレーターの中で本当に使ってるサービスをご紹介します。

グラデーション

f:id:funclur:20170308235415p:plain

www.colorzilla.com

グラデーションはよくお世話になってるジェネレーターです。
sassのmixinを用意しているときは不要ですが、直のcssを書くときは重宝します。

吹き出し

f:id:funclur:20170308235418p:plain

www.cssarrowplease.com

box-shadow border-radius

f:id:funclur:20170308235421p:plain

www.bad-company.jp

吹き出しのデザインが上がってきたらこちらを利用させていただきます。

三角形

f:id:funclur:20170308235425p:plain

apps.eky.hk

未だに三角形の作り方よく覚えてないのですが、こちらをコピーした方が早い気がしてあまり覚える気にならないというのはいい訳です:-(

カラム

f:id:funclur:20170308235433p:plain

www.debray-jerome.fr

columnプロパティを使ったことがありませんでしたが、このジェネレーターで知って使ってみたくなりました。

transform

f:id:funclur:20170308235437p:plain

ds-overdesign.com

transform、アニメーションはなかなか理解することが難しいですが、ジェネレーターで直感的に作ることができますね。

アニメーション

f:id:funclur:20170308235437p:plain

matthewlein.com

cssanimate.com

ボタン

f:id:funclur:20170308235439p:plain

http://css3buttongenerator.com/css3buttongenerator.com

f:id:funclur:20170308235442p:plain

http://noht.co.jp/2_5dbuttonnoht.co.jp

こちらのボタンジェネレーターではグラデーションなど複合的にcss3を利用することができます。

form

f:id:funclur:20170308235447p:plain

http://livetools.uiparade.com/form-builder.htmllivetools.uiparade.com

formも今やデザインが良くされていることが多いですね。むしろデフォルトのフォームは今や見ることがなさそうです。

オールマイティー13種類

f:id:funclur:20170308235449p:plain

css3generator.com

こちらはトータルでcss3のジェネレーターが用意されています。

まとめ

いかがでしょうか。

どれも使えるありがたいジェネレーターですね。

特に最初の4つはよく業務でよく使用しています。

同じことが実現できるのもありますが、微妙に使い勝手などは違うので、自分に合うジェネレーターで業務効率化させましょう!

【検証】max-width は width を上書きしますが、min-width は max-width を上書きするとは?

developer.mozilla.org

max-width、min-widthについてMDNには下記のように書かれています。

max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。

max-width は width を上書きしますが、min-width は max-width を上書きします。

ちょっとわかりづらいので検証してみました。

codepen.io

.box1,.box2は単純なmax-width、min-widthの特性ですが.box3については矛盾したスタイルを充てています。

.box3 {
  width: 100%;
  min-width:200px;
  max-width:100px;
  height:100px;
  background:#ccc;
}

最小値が200pxで最大値が100px。こうした場合(こんなことすることはないと思いますが)min-width:200pxが適応されました。

max-width は width を上書きしますが、min-width は max-width を上書きします。はこういうことでしょうか。

【css】サイズのわからない要素を縦横中央揃えにしたい

css

cssで縦横中央揃えにしたいことは、よくあることだと思います。

その場合、中央揃えにしたい要素のwidth、heightがわかってるか、もしくはどんなサイズが来ても中央に来るよう対応させるかでcssの充て方が変わってきます。

サイズがわかってる場合

codepen.io

codepen.io

サイズがわからない場合

modalwindowで画像を中央に配置したい時サイズが違う場合何かいい方法がないか調べていたところ画期的な方法がありました。

いまいちなぜ中央になるかはわかっていません。

codepen.io