夢は小さいほどいいと思っているんです。本気になれるから。

夢を持つことが大事なんじゃなく、本気になるのが大事。(糸井重里)

CSS3セレクタ nth-child と nth-of-type の違い

f:id:pbrsk:20160812215727j:plain

セレクタの中でも使い勝手がいい擬似クラス nth-child と nth-of-type とは?

使い勝手がいいことを言う前に、まず、わりとどうでもいい疑問かもしれませんが、「nth」の言葉の意味を紹介します。

n はnumberという意味で、 th は、4th, 5th, 6th...で使われる th です。

そして、「n 番目の...」という意味になります。

また、よくある疑問が両者の違いです。似ているようで若干違いますので、わかりやすく説明します。

nth-child
一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。

nth-of-type
一般的に「E:nth-of-type(n)」という風に表されていて、親要素内で兄弟関係にあるE要素でn番目のものということになります。

引用:CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い|Webpark

nth-child と nth-of-type の違い

たぶん、文字じゃよくわからないと思いますので、サンプルをお見せします。

HTML

<div>
  <p>1つ目のpタグ</p>
  <p>2つ目のpタグ</p>
  <p>3つ目のpタグ</p>
  <h6>間にh6タグ</h6>
  <p>4つ目のpタグ</p>
  <p>5つ目のpタグ</p>
  <p>6つ目のpタグ</p>
</div>

See the Pen 20160812child by r.shimizu (@r_shimizu) on CodePen.

親要素(div)のn(4)番目の子要素に赤色が適用されています。nth-of-type と比較すると、要素の種類に関係なく上から数えて、n(4)番目に子要素(h6とp)が来た場合にスタイル適用の対象になるところが最大の違いです。

See the Pen 20160812type by r.shimizu (@r_shimizu) on CodePen.

nth-of-typeの場合は、途中で別の種類の要素(h6)が入ってもそれを数えずに、 それまで連続して続いた要素(p)のみを数えてスタイルが適用されます。

(n)に指定できるのは、整数、数式、even(偶数)、odd(奇数)

(n)にはいろいろな種類を指定できます。さっそくサンプルを見ていきましょう。

HTML

<ul>
  <p>1つ目のpタグ</p>
  <p>2つ目のpタグ</p>
  <p>3つ目のpタグ</p>
  <p>4つ目のpタグ</p>
  <p>5つ目のpタグ</p>
  <p>6つ目のpタグ</p>
</ul>

See the Pen 20160812kinds_of_n by r.shimizu (@r_shimizu) on CodePen.

ちなみに、nth-child で記入しても同じ結果になります。

oddとevenってどっちが偶数・奇数だっけ?

リストなんかのスタイルを書くときに1行おき(1要素おき)に色を変えたい場合、
oddとかevenを使いますが、どっちがどっちなのか毎回わからなくなります。

ある記事にいい覚え方があったので、載せておきます。

やり方は簡単で、純粋に文字数を数えればOK。
oddは3文字、3は2で割り切れないので「奇数」
evenは4文字、4は2で割り切れるので「偶数」
これだけです。
ついでにいうと、
「きすう」も3文字、「ぐうすう」も4文字なので、そもそも偶数と奇数でどっちがどっちかわからなくなった場合もやっぱり文字数を数えればOKですね。

引用: 偶数・奇数を表すoddとevenの簡単な覚え方 | NeGiMeMo.net

現場での具体的な使用例 _ リストの一番上の線を消す

border-topを使うと、リストに区切りを入れることができます。

HTML

<ol>
  <li>menu_1</li>
  <li>menu_2</li>
  <li>menu_3</li>
  <li>menu_4</li>
</ol>

See the Pen BzrBRd by r.shimizu (@r_shimizu) on CodePen.

全体を枠で囲む時は上の線がかぶってしまうので消した方がいいと思います。
また、上の線だけ消したいような時があります(見た目がいいからなど)。
そんな時は以下のコードで一番上の線だけ消せます。

See the Pen 20160812_list_2 by r.shimizu (@r_shimizu) on CodePen.

ちなみに、nth-of-type で記入しても同じ結果になります。

さいごに

以上が、CSS3から新設されたセレクタ nth-child と nth-of-type の違いとその使い方でした。
ちゃんと使えると、これまで1行ごとに直接クラスを指定して対応してた作業が省けるでしょう。

実際に使う場合は、「nth-child」でも「nth-of-type」でも変わらないケースが多いと思いますが、正確に仕様を理解していないと、思わぬ挙動に対処できなくなるので、覚えておくといいと思います。

css3で追加されたremという単位が便利な理由

CSSにおけるフォントサイズの指定は、相対指定の「em」や「%」、絶対指定のpxが一般的です。
また、CSS3に新しく「rem」という単位を使った指定方法もあります。

今回は、remという単位が便利な理由をpxやemと比較してまとめます。
remはレスポンシブウェブデザインにはとても便利な単位です。

まず、ピクセルとエムのおさらい。

px(ピクセル)
ピクセル単位の指定。環境によって変化しない絶対単位です。

em(エム)
文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。
bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。

bashalog.c-brains.jp

主要なブラウザのデフォルトのフォントサイズは、16pxなので、その62.5%(10px)がよく見かけます。pxではなく、%指定にしておくことで、ユーザーがブラウザの設定でデフォルトの文字サイズを変更いた場合にもある程度反映することができます。

remは、「root+em」(ルートエム)の略で、ルート要素のフォントサイズを継承します。

ルートとは、ルート要素、つまり最上位階層に位置する要素のことで、HTML文書では全体をマークアップする範囲のことです。 remはこのフォントサイズを継承します。

emとの比較で見てみましょう。

See the Pen 20160809em by r.shimizu (@r_shimizu) on CodePen.

emは、親要素を継承しないという特徴があり、入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりします。


See the Pen 20160809rem by r.shimizu (@r_shimizu) on CodePen.

ですが、remは常にroot要素(html要素)に対しての相対的なサイズを指定できるので、非常にわかりやすく便利です。

オブジェクトとは(JavaScript)

オブジェクトは、まさに「モノ」そのもの

オブジェクトとは、名前をキーにアクセスできる配列です。
ハッシュ、連想配列などと呼ばれることもあります。
通常の配列はインデックス番号しかキーにできないのに対して、オブジェクトは文字列をキーにアクセスできるので、データの視認性(可読性)が高いのが特徴です(p44)。

f:id:pbrsk:20160808182745p:plain:w500

JavaScriptにおいては、連想配列とオブジェクトは同一です。その時々の文脈によって使い分けられます(p44)。

オブジェクトリテラルは記法、アクセスする方法も通常の配列とは異なります。

See the Pen 20160808object by r.shimizu (@r_shimizu) on CodePen.

通常の配列の記法とは

See the Pen 20160808array by r.shimizu (@r_shimizu) on CodePen.

リテラルとは
f:id:pbrsk:20160808185005p:plain:w500
参考 Slide Share Javaの基本 基本データ型編

オブジェクト指向

プログラム上で扱う対象をオブジェクトに見立てて、オブジェクトを中心としてコードを組み立てていく手法のことをオブジェクト指向と言います。

また、オブジェクトとは、「物体をデータ(プロパティ)操作(メソッド)の集合として定義し、プログラムで扱えるようにしたもの」です。
イメージとして、車を物体(オブジェクト)とした場合、以下のようになります。

f:id:pbrsk:20160808193849p:plain:w500

2つは同じ「車」というオブジェクトです。
車オブジェクトには、種類・製作会社・色といったデータがあり、これは車によって異なります。
このようにオブジェクトが持つデータのことをプロパティと呼びます。
CSSのプロパティ(文字色・文字サイズなど)のようなもので、JavaScriptでは文字数などのプロパティがあります。
また車オブジェクトは、アクセル・ブレーキ・クラクションといった操作を行うことができ、このようにオブジェクトに対する操作のことをメソッドと呼びます。メソッドは関数のようなもので、特定の処理を行います。
このように車(オブジェクト)をプロパティとメソッドの集合として定義することで、車が何台あっても同じ尺度で扱うことができます。
参考 ゼロから始めるJavaScript講座Vol14 オブジェクトの基礎

オブジェクト = プロパティ + メソッド

オブジェクトは、プロパティとメソッドから構成されています。例えば、入力フォームを表すフォームオブジェクトの場合...
f:id:pbrsk:20160808200948p:plain:w500

オブジェクト指向の世界では、用意されたオブジェクトを直接利用することを認めていません。その理由は、オブジェクトが「自分自身の中でデータを保持できる」という性質を持っているからです。(p87)

オブジェクトはデータを保持するもの

例えば、オブジェクトに対して、アプリケーションが複数の箇所からデータを書き込むと不整合が起きてしまいます。
そこで、オリジナルのオブジェクトには手を加えず、複製したコピーを操作することでコンフリクトを防ぐようになっています。
上記の複製コピーのことをインスタンス化といい、それによってできた複製のことをインスタンスと言います。

new演算子

オブジェクトをインスタンス化するには new演算子を利用します

var 変数名 = new オブジェクト名([引数,...]);

オブジェクトのインスタンスを生成し、変数に格納しています。

オブジェクトには、オブジェクトを初期化するために、オブジェクトと同名のメソッドが用意されています。この初期化メソッドのことをコンストラクタと呼びます。
オブジェクト名は、正確にはコンストラクタ名です。(p89)

また、JavaScriptにクラスはありません。コンストラクタからインスタンスを生成します。
JavaScriptのクラス?コンストラクタ?? - Qiita

生成されたインスタンスは、変数に格納され、以降、その変数をオブジェクトとして扱うことができます。
インスタンスが格納された変数は、インスタンス変数(オブジェクト変数)と呼びます。

インスタンス変数から、プロパティやメソッドを呼び出すには、ドット構文を使って以下のように記述します。

変数名.プロパティ名 [= 設定値];
変数名.メソッド名 ([引数,...]);

静的プロパティ / 静的メソッド

プロパティやメソッドによっては、例外的にインスタンスを生成せずに利用できるものがあります。
このようなものを、静的プロパティ、静的メソッドといいます。呼び出すための構文は以下の通りです。

オブジェクト名.プロパティ名 [= 設定値];
オブジェクト名.メソッド名 ([引数,...]);

これら静的メソッドは、インスタンスから呼び出そうとするとエラーになります。逆に、インスタンスを経由して呼び出すプロパティやインスタンスは、
インスタンスプロパティ、インスタンスメソッドと呼びます。

組み込みオブジェクトとは

どのプログラミング言語にも、固有の (つまり組み込みの) オブジェクトがあり、それらのオブジェクトによってプログラミング言語の基本機能が実現されています。
f:id:pbrsk:20160808223838p:plain:w500


参考書籍 JavaScript本格入門

JavaScriptの基本的な書き方 制御命令_ループ(反復処理)と例外処理

プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。
今度はループと例外処理です。

反復処理には主に下記の4つがあります。

  • while文
  • do...while文
  • for文
  • for...in文

条件式によってループを制御する while / do...while文

while / do...while文は与えられた条件文がtrueである間は、ループを繰り返します。

See the Pen 20160804_Js_while by r.shimizu (@r_shimizu) on CodePen.

See the Pen 20160804_Js_do...while by r.shimizu (@r_shimizu) on CodePen.

上記の両者、実行結果は同じですが、仮に「x=10」の場合だと、結果が変わります。

  • while文の実行結果は 何も出力されません(コードの初期に条件式があり、判定ではじかれたため_前置判定)
  • do...while文の実行結果は「xの値は10」というメッセージが一回だけ表示されます。(必ず一回は処理が入るのが特徴_後置判定)

指定回数だけループ処理する for文

あらかじめ指定された回数だけ繰り返し処理をおこなうのがfor文です。

See the Pen 20160804_for by r.shimizu (@r_shimizu) on CodePen.


配列内の要素を順に処理する for...in文

構文

for (仮変数 in 配列 / オブジェクト) {
 ループ内で実行するコマンド ;
}

仮変数には、配列 / 連想配列やオブジェクトから要素のインデックス番号やキー名、メンバ名が格納されて、for...in ブロックの中で要素値を参照する際に使用することができます。
仮変数に格納されるのは、要素値そのものではありません。

See the Pen 20160804_for...in by r.shimizu (@r_shimizu) on CodePen.

上記のコードはサンプルの説明の便宜上、for...inループを利用して通常配列の内容を走査していますが

  • コードがシンプルにならない
  • コードによっては正しく動かないことがある

という理由から、一般的には通常配列の内容をfor...inループでは取り出すべきではありません。

例外処理

アプリを実行してると、「数値を受け取ることを想定した関数に文字列が渡された」などなど、想定しないことが起こることがあります。
もちろん未然に防げる場合と、そうでない場合があります。例えば外部要因に依存する処理がその例です。これを完全に防ぐことはなかなか大変です。
そんな時に、例外処理が役立ちます。

構文

try {
  例外が発生するかもしれない命令(群)
} catch {
  例外が発生した場合の命令(群)
} [finally{
  例外の有無に関わらず、最終的に実行される命令(群)
}]


参考書籍 JavaScript本格入門

JavaScriptの基本的な書き方 制御命令_条件分岐

プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。

単純分岐 if

変数xが10以上か否かで出力する文字列を変えるサンプルコード

See the Pen 20160804Js by r.shimizu (@r_shimizu) on CodePen.

なんか、中かっこの省略は可能らしいが、意図通りの挙動にならなさそうなので、省略はしない方がいい。とのこと。

多岐分岐 switch

if文さえ使えば、結構複雑な条件分岐は表現できますが、if文では、条件ブロック単位に条件式を毎回記述する必要があります。
これでは、単調になってしまうし、並列の関係にある条件値が見にくいという難点があります。これを解決するのがswitchです。

See the Pen 20160804_Js_switch by r.shimizu (@r_shimizu) on CodePen.

どのケースにも合致しない場合、defaultブロックが実行されます。defaultブロックの設置は必須ではありませんが、どのケースにも合致しなかった場合の挙動を明確にするためにも省略するべきではありません。

参考書籍 JavaScript本格入門

効率的なCSS設計の基本「基本、HTMLの要素名にスタイルを指定しない」

CSSは、簡単に書けるメリットがある一方、非常に破綻しやすいデメリットもあります。
保守性が高まる、CSS設計の代表例をメモします。

HTMLの要素名にスタイルを指定しない

リリース後や改修後も、後から部分的な変更や、ブラウザやサイトの仕様変更によってHTMLのマークアップが変更される場合があります。
そんな時、HTMLの要素名にスタイルを指定していると、CSSファイルも修正しなくてはいけません。

例えば、こんなコードがあるとして

See the Pen oLPmaq by r.shimizu (@r_shimizu) on CodePen.

サンプルタイトルより、重要なタイトルがあるとすると、サンプルタイトルはh2に格下げする必要があります。その場合、CSSセレクタも変更しなくてはいけません。

See the Pen YWOBRj by r.shimizu (@r_shimizu) on CodePen.

でも、HTMLの要素名ではなく、クラスに対してスタイルを指定していればHTMLに多少の変更があっても、CSSがその影響を受けにくくなるので保守性が上がります。

See the Pen OXodYZ by r.shimizu (@r_shimizu) on CodePen.

See the Pen YWOBRj by r.shimizu (@r_shimizu) on CodePen.

ただ、a要素、input要素、textarea要素など「その要素でないと機能が成り立たない」場合は要素の種類が変わる可能性が低いため、要素名に直接スタイルを指定するデメリットが薄くなります。

HTML5とCSS3の勉強もしよう

今後、フロントエンド寄りの業務が多くなるので、改めて知らなかったことをまとめておこうともいます。
(知識の定着も兼ねて)

Javascriptも合わせて、HTML5,CSS3を改めて勉強してみようと思います。

まず、ちょっと前にこの本「スラスラわかるHTML&CSSのきほん」を読みました。

ちょっと、これは簡単すぎましたねw

そして次に、これを読みました「HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)」。

Tech:Camp卒業時に、勧められて即買ったものの、1年くらい放置してましたが、ちょっと前に仕事の合間で読んでました。
これなかなか良かっです。コーディング上においてレスポンシブデザインって分かってなかったので、スッキリしました。

f:id:pbrsk:20160802231425p:plain

そんで、次はこの本。
www.shoeisha.co.jp

この方のHPがいいなあと思ったのと、グッチパッチの人か、と思って買いました。
この2週間でじっくり読んでみようと思います。