CodePenでVelocity.jsを使う

See the Pen used velocity by nakanishi (@nakanishi) on CodePen.

CodePenは各種JSライブラリを使用することができる。今回はアニメーションに特化したライブラリ「Velocity.js」を使ってみた。

Velocity自体がjQueryに依存しているので、まずjQueryをaddし、次にVelocityをaddする。基本的にCDNから引っ張ってくればよい。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-13-0-14-19

Web標準とブラウザの対応状況

Web標準化の流れ

HTMLやCSSといった技術の標準化は、基本的にW3C(World Wide Web Consortium)によって行われており、草案(WD)→最終草案(LC)→勧告案(PR)→勧告(REC)という仕様策定プロセスを経て「勧告」の段階で正式採用となる。

先行実装とベンダープレフィックス

しかし実際には、勧告=正式採用される前、草案に掲載される頃には「各社が先行して機能を実装」しており、勧告段階よりも早く実質的に使用に耐える仕様も多い。このように勧告前に各ブラウザが先行して搭載した機能に関してはベンダープレフィックス(例:-moz-、-webkit-) が付加された状態で運用される。

ブラウザの対応状況をCaniuse.comで確認する

http://caniuse.com/ で各機能の対応状況を確認できる。緑が対応、黄色が部分的に対応、赤が未対応である。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_30

ユーザー数の比率を確認できることもできる。また Showing all を選択すると(現行だけではなく)全てのブラウザの状況を確認できる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-12_23_57_45

 

CodePenでSassを書く

See the Pen used sass add to codepen by nakanishi (@nakanishi) on CodePen.

CodePenではCSSをSassを使って記述することができる。また、CoffeeScriptやBabelでJSを書くこともできる。

設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-11_0_18_57

AUTOPREFIXER

上記のSassの設定時、AUTOPREFIXERにチェックを入れると、CSSへコンパイルする際にベンダープレフィックスを自動的に追加してくれる。

どんなプレフィクスが付加されているかは、コンパイル後のCSSモードに遷移し確認することができる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-11-14-53-36

ここでは、column-countにベンダープレフィックスが付加されている。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-11-14-57-42

ベンダープレフィックスとは

次の記事を参照

block要素とinline要素の考察

See the Pen used block-inline by nakanishi (@nakanishi) on CodePen.

block要素とinline要素の性質は「経験的」にはわかることが断片的にはあるものの、理論的にはわからない、ので実験する

block要素とinline要素はCSSにおいて重要な性質のうちの1つであるが、私は「経験的」にはわかることが断片的にはあるものの、理論的にはよくわかっていない。リファレンスを読んでも今一歩わからない…

そこで実際に全パターンを書いてみることで理解を深めたい。

ブロック要素は幅を決めなければ、親要素と同じになる

まず基本的なことだが、ブロック要素は幅を指定しなければ、親要素と同じ幅になる。対して、インライン要素は、コンテンツによって幅が自動的に決まる。

インライン要素に幅を指定しても意味がない

インライン要素はコンテンツによって幅が自動的に決定されるため、幅を指定しても無効である。

要素を中心に置きたくても、(3)、(4)のようにインライン要素には幅指定ができないので、margin: autoを使っても、中心にはこない

(1)と比較するとわかるが、インライン要素のようにコンテンツによって幅が自動に決まるものにmargin: autoを与えても、中心には来ない。

これは幅が明示的ではない要素はmargin: autoが機能しないということだろうか。

(5)インラインブロック要素の幅は、何も指定しなければコンテンツによって決まるが、インライン要素と違って幅を指定することもできる。ただしインライン要素と同じく、改行されない。

インラインブロック要素は、インライン要素と同じく、改行されずに右側に次のコンテンツがくる。しかし、インライン要素と異なり、幅を与えることができる。

参考

その他インライン要素とブロック要素の癖について情報がまとめられている。

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

課題:冒頭の例のような場合、上下も中央に配置するにはどうすればいいか

vertical-align: middle;で良さそうだが、上手くいかない。手段を見つけたい。

float: leftするとどうなるか

See the Pen used floatleft by nakanishi (@nakanishi) on CodePen.

.box {
  float: left;
}

.box2 {
}

.box3 {
  float: left;
}

この記事に関しては、CodePenのデモは元のサイトでブラウザの横幅を広くし確認いただきたい。

boxとbox2の比較

float: leftすると、それに続くコンテンツが右側に流れていく。floatしない場合には、divはブロック要素なので、次に続くコンテンツは改行された後に配置される。

boxとbox3の比較

float: leftした要素の、前と後ろの両方にコンテンツがある場合、float: leftした要素は、前のコンテンツが終わった後の高さ?で、左端に寄る。

box4とbox5の比較

float: leftした要素の、次のコンテンツに固定の幅を指定した場合としない場合の違い。これを見るとfloatの性質が容易に理解できる。floatされたボックスは浮き、次に続くボックスが背面にめり込む。ただし背面にめり込んだボックスのコンテンツは「floatされたボックスを避けるように」配置される。

display: flex,flex-wrap: wrapを使って正方形の画像をレスポンシブで配置する

11/10 ソース等一部修正

See the Pen GNpoGr by nakanishi (@nakanishi) on CodePen.

.flexbox {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 33.33%;
  width: calc(100% / 3);
  border: solid 1px;
  box-sizing: border-box;
}

img {
  width: 100%;
}


<div class="flexbox">
  <div class="box"><img src=""></div>
  <div class="box"><img src=""></div>
  <div class="box"><img src=""></div>
</div>


display: flex + flex-wrap: wrap

まずdisplay: flexにボックスの配置モデルを変更する。さらにflexの詳細設定としてflex-wrap: wrapを指定する。こうすることで、ボックスは左から右に配置されていき、親要素幅を超えた場合に、ラップする。

Boxの幅を三分割に指定する

さらに、box一個分の幅を33.3%にすることで三分割される。すると4個目が下に折り返される。より正確にはcalc(100% / 3)するほうが良い。

Box内の画像を親要素のBOXにあわせて伸縮させる

最後に、中に配置した画像は必ず正方形にし、幅を100%と指定することで、親要素であるboxと同じ幅に画像を伸縮させる。

display: table-cellを用いず、横並列並びをfloat: leftで実装する

11/10 一部ソース等を修正

See the Pen usedbywp2 by nakanishi (@nakanishi) on CodePen.

ポイントはfloat: leftを使った際に、a、bは固定幅を指定して、cだけ伸縮させるために「calc(100% – 200px) ;」を使うことである。(calcの対応ブラウザに注意する必要はある)

.a {
  float: left;
  width: 100px ;
}

.b {
  float: left;
  width: 100px ;
}

.c {
  float: left;
  width: calc(100% - 200px) ;
}

float: leftを全ての子要素に使った場合、親要素のheightがなくなるので、clearfixを用いる

また横一列に並べるために全ての子要素にfloat: leftを用いた場合、親要素に高さがなくなる。これに対処するためには、親要素にclearfixを与える。

(親要素の高さがなくなるのは、親要素の高さは明示的に指定していなければ「子要素」によって決まるが、floatを用いた要素は親要素から認識されないために、結果として親要素は「何も高さのある要素がない」と判断するからである。そのためclearfixというテクニックは、擬似的に最後に何もない要素を加えることで、仮想的に子要素に高さを与えることができる。)


<div class="container clearfix">
 <div class="a">title</div>
 <div class="b">subtitle</div>
 <div class="c"></div>
</div>

<div class="container clearfix">
 <div class="a">title</div>
 <div class="b">subtitle</div>
 <div class="c"></div>
</div>


.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
  font-size: 0;
} 

width: 100%とwidth: autoの違い

  • width: 100%はコンテンツ幅が100%になる
  • width: atuoは、margin/paddingとコンテンツを含めた幅が100%になる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-09_12_14_39

display: table-cellを使って横に並べる

See the Pen GNpgBW by nakanishi (@nakanishi) on CodePen.

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-09-10-55-59

横にブロックを並列する場合、float: leftではなくdisplay: table-cellを使うことができる。これはclearfix等を使わず、またcalc()を使う必要もなく実装できる点が良い。(calcを使う場合はこちらの記事を参照)

ポイントは、ある親要素の中の「display: table-cellを指定した子要素」が横に並ぶという点である。そのため下のソースのように、横に並べたいブロックにtable-cellを指定した後、それを囲むdiv等の親要素が必要である。

<div class="container">
 <div class="a"></div>
 <div class="b"></div>
</div>

<div class="container">
 <div class="a"></div>
 <div class="b"></div>
</div>
.container {
}

.a, .b {
  display: table-cell;
}

.b {
  padding-left: 20px;
}

注意点

またdisplay: table-cellを用いた場合、tableと同じ性質になるので、marginを使って位置を調整することができない。そのため間隔を開けたい場合にはpaddingを使用する。

またレスポンシブデザインに対応するために、ブロックの配置を変更したい場合は、float: left;等を使うことでdisplay: table-cellを解除することができる。

WordPress上でHTML/CSS/JSのデモを表示するために「Codepen」を導入した

WordPress上でコードを「表示する」だけであれば「Syntax Highlighter Evolved」を用いれば良いが、さらにコードを「動かすデモ」を見せたければ「CodePen」を使用する。

See the Pen test by nakanishi (@nakanishi) on CodePen.

Embed→HTML→ソースをC&Pする

まずは保存していることを確認して、Embedからソースを表示し、C&Pする。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-09_7_21_44

 

 

WordPress上でコードを綺麗に表示するために、プラグイン「Syntax Highlighter Evolved」を導入した

参照: 【WordPress】綺麗にソースコードを表示する SyntaxHighlighter Evolvedの使い方 | WordPress College 

技術ブログを運営する上で必須となる、Wordpress内での綺麗なコード表示のために、「Syntax Highlighter Evolved」を導入した。基本的な使い方を備忘録として記す。


<div class="red">
</div>

.red {
background-color: red;
height: 100px;
}

「テキスト」入力モードで普通にコードを入力し、タグで囲む

次の画像のようにコードをテキストモードで入力し、[スクリプトの種類]コード[/スクリプトの種類]と囲む。また[スクリプトの種類 title=”タイトル名”]コード[/スクリプトの種類]とすることで、冒頭にタイトルを表示することができる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-09-6-54-33