css3で追加されたremという単位が便利な理由
CSSにおけるフォントサイズの指定は、相対指定の「em」や「%」、絶対指定のpxが一般的です。
また、CSS3に新しく「rem」という単位を使った指定方法もあります。
今回は、remという単位が便利な理由をpxやemと比較してまとめます。
remはレスポンシブウェブデザインにはとても便利な単位です。
まず、ピクセルとエムのおさらい。
px(ピクセル)
ピクセル単位の指定。環境によって変化しない絶対単位です。em(エム)
文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。
bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。
主要なブラウザのデフォルトのフォントサイズは、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)。
JavaScriptにおいては、連想配列とオブジェクトは同一です。その時々の文脈によって使い分けられます(p44)。
オブジェクトリテラルは記法、アクセスする方法も通常の配列とは異なります。
See the Pen 20160808object by r.shimizu (@r_shimizu) on CodePen.
通常の配列の記法とは
See the Pen 20160808array by r.shimizu (@r_shimizu) on CodePen.
オブジェクト指向
プログラム上で扱う対象をオブジェクトに見立てて、オブジェクトを中心としてコードを組み立てていく手法のことをオブジェクト指向と言います。
また、オブジェクトとは、「物体をデータ(プロパティ)と操作(メソッド)の集合として定義し、プログラムで扱えるようにしたもの」です。
イメージとして、車を物体(オブジェクト)とした場合、以下のようになります。
2つは同じ「車」というオブジェクトです。
車オブジェクトには、種類・製作会社・色といったデータがあり、これは車によって異なります。
このようにオブジェクトが持つデータのことをプロパティと呼びます。
CSSのプロパティ(文字色・文字サイズなど)のようなもので、JavaScriptでは文字数などのプロパティがあります。
また車オブジェクトは、アクセル・ブレーキ・クラクションといった操作を行うことができ、このようにオブジェクトに対する操作のことをメソッドと呼びます。メソッドは関数のようなもので、特定の処理を行います。
このように車(オブジェクト)をプロパティとメソッドの集合として定義することで、車が何台あっても同じ尺度で扱うことができます。
参考 ゼロから始めるJavaScript講座Vol14 オブジェクトの基礎
オブジェクト = プロパティ + メソッド
オブジェクトは、プロパティとメソッドから構成されています。例えば、入力フォームを表すフォームオブジェクトの場合...
オブジェクト指向の世界では、用意されたオブジェクトを直接利用することを認めていません。その理由は、オブジェクトが「自分自身の中でデータを保持できる」という性質を持っているからです。(p87)
オブジェクトはデータを保持するもの
例えば、オブジェクトに対して、アプリケーションが複数の箇所からデータを書き込むと不整合が起きてしまいます。
そこで、オリジナルのオブジェクトには手を加えず、複製したコピーを操作することでコンフリクトを防ぐようになっています。
上記の複製コピーのことをインスタンス化といい、それによってできた複製のことをインスタンスと言います。
new演算子
オブジェクトをインスタンス化するには new演算子を利用します
var 変数名 = new オブジェクト名([引数,...]);
オブジェクトのインスタンスを生成し、変数に格納しています。
オブジェクトには、オブジェクトを初期化するために、オブジェクトと同名のメソッドが用意されています。この初期化メソッドのことをコンストラクタと呼びます。
オブジェクト名は、正確にはコンストラクタ名です。(p89)
また、JavaScriptにクラスはありません。コンストラクタからインスタンスを生成します。
JavaScriptのクラス?コンストラクタ?? - Qiita
生成されたインスタンスは、変数に格納され、以降、その変数をオブジェクトとして扱うことができます。
インスタンスが格納された変数は、インスタンス変数(オブジェクト変数)と呼びます。
インスタンス変数から、プロパティやメソッドを呼び出すには、ドット構文を使って以下のように記述します。
変数名.プロパティ名 [= 設定値]; 変数名.メソッド名 ([引数,...]);
静的プロパティ / 静的メソッド
プロパティやメソッドによっては、例外的にインスタンスを生成せずに利用できるものがあります。
このようなものを、静的プロパティ、静的メソッドといいます。呼び出すための構文は以下の通りです。
オブジェクト名.プロパティ名 [= 設定値]; オブジェクト名.メソッド名 ([引数,...]);
これら静的メソッドは、インスタンスから呼び出そうとするとエラーになります。逆に、インスタンスを経由して呼び出すプロパティやインスタンスは、
インスタンスプロパティ、インスタンスメソッドと呼びます。
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の基本的な書き方 制御命令_条件分岐
プログラミングにおいては、写経が何かと有効であると信じて、まず基本的で具体的なサンプルコードを、とにかく書くことでその所作を身に付けようと思います。
単純分岐 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ブロックの設置は必須ではありませんが、どのケースにも合致しなかった場合の挙動を明確にするためにも省略するべきではありません。
効率的な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年くらい放置してましたが、ちょっと前に仕事の合間で読んでました。
これなかなか良かっです。コーディング上においてレスポンシブデザインって分かってなかったので、スッキリしました。
そんで、次はこの本。
www.shoeisha.co.jp
この方のHPがいいなあと思ったのと、グッチパッチの人か、と思って買いました。
この2週間でじっくり読んでみようと思います。
JavaScriptの基本的な書き方
JavaScriptの基本的な書き方(2-1/p24)
See the Pen p24 by r.shimizu (@r_shimizu) on CodePen.
まず、JsのコードをHTMLのファイルに組み込むのはスクリプトタグのタグの役目です。
<script>Jsのコード</script>
上記のtype属性を見てください。旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。
HTML5の場合はデフォルトのtype属性がJavaScriptなのでtype属性を特別記載する必要はないそうです。
HTML5からは、type属性を省略することができます。
上のコードは、下記にも書き換えが可能。
これは、スクリプトコードの外部化で書き換えています。
helloEx.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="helloEx.js"></script> </head> <body> </body> </html>
helloEx.js
document.write("hello world");
上記の実行結果は、code penでの実行結果と同じです。
コードの外部化のメリットは
外部スクリプトとインラインスクリプトを併用する場合の注意点
外部スクリプトとインラインスクリプトを併用する場合、以下のような書き方はできません。
上記の実行結果は、「hello world3」だけです。src属性を指定した場合、scriptタグ配下のコンテンツは無視されからです。
スクリプトタグを記述する場所は3つです。
- 『body要素の中(任意のどこか)』
テストするときとかこれが多いらしい。
- 『bodyタグの閉じタグの直前』
これが一般的らしい
- 『head要素の中』
Jsのルールに、関数を呼び出すためのscriptタグよりも、定義する関数のscriptタグを先に記述しないとダメ!っていうのがあるためです。
たとえば、bodyタグ配下で呼び出す必要がある関数は事前にheadタグ配下で読み込んでおく必要がああったりします。
この記述する場所というのが結構重要になってきます。最近のJavaScript業界ではbodyタグの閉じタグの直前にscriptタグを記述するのが一般的な作法となっています。
その理由としてすべてのブラウザではJavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の読み込み)を中断するという処理になっているからです。
HTML5から非同期で読み込みできるasync属性などが追加されましたが、そういった特別な事をしていない限りほぼ全てのブラウザで同じようにレンダリングが行われます。
例えばhead要素にJavaScriptを書いてしまうとJavaScriptが読み込まれた瞬間には、ページを構成している全てのHTML要素の読み込みが終わっておらず、何かHTML要素を操作するJavaScriptが記述されていた場合は『要素が読み込まれた後に処理を実行して!』という記述を追加しないといけません。
bodyタグの閉じタグの直前にJavaScriptを記述すればほぼ全てのHTML要素が読み込まれた状態でJavaScriptの読み込みを始めることができるのでスムーズな処理を構築することができます。
アンカータグにスクリプトを埋め込む 〜JavaScript擬似プロトコル〜
リンクをクリックした時にダイアログを開きたい場合が、という場合に使います。
ちょっとしたスクリプトを埋め込む方法ですが、以外と利用するので覚えておきます。
See the Pen p29 by r.shimizu (@r_shimizu) on CodePen.