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