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