【videoタグ】再生終了時の自動遷移
<video onended="location.href='example.html';"> <source src="example.mp4" type="video/mp4"></source> </video>
その他
コントローラーの表示
<video controls></video>
自動再生
<video autoplay></video>
繰り返し
<video loop></video>
無音
<video muted></video>
再生までに画像を表示させる
<video poster="example.png"></video>
nth-of-typeとnth-childの違い
nth-of-type
たとえば
p:nth-of-type(3) { color: red; }
<div> <h1>見出し</h1> <p>テキスト１</p> <p>テキスト２</p> <h2>見出し</h2> <p>テキスト３</p> <!-- ←ここがredに --> <p>テキスト４</p> <p>テキスト５</p> <h2>見出し</h2> </div>
3番目のpがredになる。
nth-child
p:nth-child(3) { color: red; }
<div> <h1>見出し</h1> <p>テキスト１</p> <p>テキスト２</p> <!-- ←ここがredに --> <h2>見出し</h2> <p>テキスト３</p> <p>テキスト４</p> <p>テキスト５</p> <h2>見出し</h2> </div>
親要素の3番目の子要素がpの場合にredになる。
nth-of-typeだけでよくない？？
MacにSassとBracketsを導入
会社のWindowsには導入しましたが、自分のMacにはしていませんでした。
使い始めたばかりですが、もっと早くに導入すれば良かった。。
メリット
開発スピードの向上
これは体感してます。
入れ子
.box { width: 200px; border: solid 1px #ccc; p { line-height: 140%; color: #333; span { font-size: 1.2em; } } }
mixin
@mixin center { /* 上下左右中央に配置 */ text-align: center; position: relative; top: 50%; } p { /* 呼び出し */ @include center; font-size: 1.1em; }
こんなことができます。
Braketsを導入してみる
ずっとDreamweaverを使っていたが、sassファイルはデフォルトでは対応していないので、
この際エディタを変えることにした。
Brackets - A modern, open source code editor that understands web design.
一番感動したのはライブプレビュー。
これどうなってんすか。
あとプロジェクトの管理も簡単。
プラグイン（エクステンション？アドオン？拡張機能？）もポチポチインストール。
Brackets おすすめエクステンション集・解説
SASSのインストール
ruby -v //バージョン確認
sudo gem install sass //sassのインストール //macは先頭にsudo付ける。
sudo gem update --system //gemを最新バージョンに。
gem update sass //sassを最新バージョンに。
sass -v //sassがちゃんとインストールされているか確認。
バージョンが表示されればSassのインストールは完了です。
たったこれだけ！
Scssファイルを作成する
これがしたかったんだよ！Sassとか知るか！
適当にコードを書きます。
今回は仮にファイル名をstyle.scssとします。
/* style.scss */ .wrapper { width: 100%; p { text-align: center; span { color:red; } } }
適当な場所に保存。 ターミナルでその場所のパスを記述。
sass sass-test/style.scss:sass-test/style.css
とすれば勝手にcssファイルを出力してくれます。
出力ファイル
.wrapper { width: 100%; } .wrapper p { text-align: center; } .wrapper p span { color: red; }
やったね!
clearfixの記述
.clearfix::after{ content: ""; display: block; clear: both; }
忘れがちです。
