CSS3 Flexboxについて2 対応ブラウザ編【めもめも】

※随時更新中

すんです。
前回紹介した「Flexbox」。

記事:CSS3 Flexboxについて【めもめも】

早速今作っているサイトに使ってみました!…が。

Safariでレイアウトが崩れる。

調べてみた所、

display: flex;

に対応していないブラウザ、バージョンがまだまだあるそうで。

現状は下記のような感じで対応してあります。

display: -webkit-flex;

といった形で。

場合によっては

display: -webkit-box;

という形になるみたい。

この「-webkit-flex」と「-webkit-box」、じゃあどっち書いとけば良いのよ!
っていう話なんですが、

Safariの場合ですと
ver6までは「-webkit-box」で。
ver6.1以降は「-webkit-flex」での対応が必要なようです。

現状、最新のバージョンは7.0.6?かな?(あやふや)

ただ古いバージョンのブラウザですと
「display: -webkit-box;」で設定したとしても、「flex-wrap」などなど、
使えなくなる機能、というか「display: box」に対応していないものが多くあるみたいで…

_| ̄|○

さらにさらに、
Safariに限らずその他のブラウザの旧バージョンでも、動かない場合があります。

「IE」「firefox」「Chrome」だと、最新バージョンでしたら

display: flex;

が問題なく動きますが、旧バージョンだと動かない場合が。

「-ms-」「-moz-」「-webkit-」といった感じで、
動かす為には各ブラウザ向けのベンダープレフィックスを付ける必要も出てきますし。

それでも動かないこともありますし。

…むむむ。

Safari以外のブラウザで、バージョンが最新でない場合でも、

display: flex;
display: -webkit-flex;

で対応が可能であれば、その他大体のFlexboxの機能、
「flex-wrap」「flex-flow」などを使用する事ができる。はず。

めもめも。

CSS3 Flexboxについて【めもめも】

どうも!すんです。

今回「時々WordPress」カテゴリでの更新となりましたが、WordPressとは全く関係ない(…とは言い切れませんがさすがに)
CSS3の「Flexbox」について!私のメモとして記していきたいと思います。

Flexboxについて

今回主にFlexboxで出来る事について、4つピックアップしてみました。

1.Flexboxを指定したコンテナ中のコンテンツの配置方向、順序を決めることができます

2.コンテンツの伸縮ができます

3.コンテンツの整列ができます(水平方向・垂直方向)

4.折り返し設定ができます

まず初めに

今回は例として、
【HTML】

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

【CSS】

#container {
     width:500px;
}

#container div:nth-of-type(1) {
     background: #eef;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 	
}

#container div:nth-of-type(2) {
     background: #CCC;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 
}

#container div:nth-of-type(3) {
     background: #999;
     border: 1px dotted #333;
     height: 50px;
     text-align:center;
     line-height: 50px;
     padding: 5px;	 
}

という形でFlexboxを試してみます。

Flexboxを使用する為に、まず初めにFlexboxコンテナを用意します。
コンテナにしたい要素に

display : flex;

または

display : inline-flex;

を追加します。

これでFlexboxコンテナの完成です。

コンテンツの配置方向、順序を決める(flex-direction)

■ 「flex-direction: row」の場合

下記のようにCSSを追加してみます。

#container {
     display: flex;
     flex-direction: row;
}

↓「row」は初期値です。コンテンツは左から右に表示されます。
row

■ 「flex-direction: row-reverse」の場合

#container {
     display: flex;
     flex-direction: row-reverse;
}

↓「row-reverse」の場合、コンテンツが右から左に表示されます。
row

■ 「flex-direction: column」の場合

#container {
     display: flex;
     flex-direction: column;
}

↓「column」の場合コンテンツは上から下に表示されます。
row

■ 「flex-direction: column-reverse」の場合

display: flex;
flex-direction: column;

↓「column-reverse」の場合、「column」とは逆にコンテンツは下から上に表示されます。
row

コンテンツの伸縮ができる(flex-grow)

■ 「flex-grow」の使い方

下記のようにCSSを追加してみます。

#container div:nth-of-type(1) {
     flex-grow: 1;	 	
}

#container div:nth-of-type(2) {
     flex-grow: 2; 
}

#container div:nth-of-type(3) {
     flex-grow: 1;	 
}

row
1番目と3番目のdivに「flex-grow: 1」、2番目のdivにのみ「flex-grow: 2」と設定した場合、2つめのdivは他の2倍の大きさになります。
マイナス(負)の数字は使用できません。

コンテンツの整列ができる(justify-contentとalign-items)

整列の設定をする前に、
コンテナ内のコンテンツの幅と高さを決めておきます。

【CSS】

#container div:nth-of-type(1) {
     width: 100px;
     height: 30px;
}

#container div:nth-of-type(2) {
     width: 100px;
     height: 50px; 
}

#container div:nth-of-type(3) {
     width: 100px; 
     height: 40px;
}

各コンテンツの幅を100pxとしました。

■ 「justify-content」の使い方【水平方向の整列】

「justify-content: center」の場合

#container {
      justify-content: center;
}

wrap
↑このように水平方向に中央揃えになります。

「justify-content: space-between」の場合

#container {
      justify-content: space-between;
}

wrap
↑このように均等にコンテンツ間隔がひらきます。

「justify-content: space-around」の場合

#container {
      justify-content: space-around;
}

wrap
↑「space-between」と同様、このように均等にコンテンツ間隔がひらきますが、
左右の端のコンテンツにも、各コンテンツ間隔の半分の間隔がつきます。

「justify-content: flex-start」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは左揃え。
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは上揃えになります。

「justify-content: flex-end」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは右揃え。
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは下揃えになります。

■ 「align-items」の使い方【垂直方向の整列】

「align-items: center」の場合

#container {
      align-items: center;
}

wrap
↑このように垂直方向に中央揃えになります。
応用して、「justify-content: center」も一緒に適用すると
wrap
↑コンテンツを縦横中央揃えにできます。

「align-items: baseline」の場合

#container {
      align-items: baseline;
}

コンテンツ内のベースラインを揃えます。
※ベースラインとは、文字を下揃えで配置するために使う仮想の基準線のことです。

「align-items: flex-start」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは上揃えに、
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは左揃えになります。

「align-items: flex-end」の場合

配置が横(flex-direction: row または row-reverse)の場合はコンテンツは下揃えに、
配置が縦(flex-direction: column または column-reverse)の場合はコンテンツは右揃えになります。

折り返しの設定(flex-wrap)

折り返しの設定をする前に、
コンテナ内のコンテンツの幅を決めておきます。

【CSS】

#container div:nth-of-type(1) {
     width:200px;
}

#container div:nth-of-type(2) {
     width:200px; 
}

#container div:nth-of-type(3) {
     width:200px; 
}

各コンテンツの幅を200pxとしました。

■ 「flex-wrap」の使い方「flex-wrap: wrap」の場合

下記のようにCSSを追加してみます。

#container {
      flex-wrap: wrap;
}

コンテナの幅が500pxなのに対し、各コンテンツの幅が200pxになっているので
本来であればコンテンツがはみ出してしまいますが、
wrap

↑親要素であるコンテナの長さを子要素が超えてしまった場合、このように折り返してくれます。

■ 「flex-wrap」の使い方「flex-wrap: wrap-reverse」の場合

下記のようにCSSを追加してみます。

#container {
      flex-wrap: wrap-reverse;
}

wrap

↑「flex-wrap: wrap」の時と同様に、このように折り返してくれますが
「flex-wrap: wrap-reverse」の場合は折り返し地点が逆になります。

「flex-wrap」の初期値は「nowrap」です。

最後に

Flexbox、ここには書ききれませんでしたがまだまだ「便利だ…」「すごい!!!」といった部分が沢山あります。
それはまた次の機会に紹介していければ…と思っております。

個人的には、簡単に縦横中央揃えが出来る「justify-content: center」「align-items: center」の組み合わせに震えました。
ありがたやありがたや。

Flexboxの動きを確認しながら記事を書きましたが、
「ここ違うぞ!」「そんな動きしないよ〜」「誤字!誤字!」などなどありましたら是非つっこんでやってください。

レスポンシブサイトを作る際にも大活躍してくれるのではないかと、実際にFlexbox触ってみながら思いました。
…実は今、レスポンシブサイトを製作中なのです偶然にも。

Flexbox、使い方を覚える為にも早速積極的に取り入れていきたいと思います!!!

WordPressのショートコードを自作したい!【vol.2】【めもめも】

どうも!すんです。
前回投稿したWordPressのショートコードを自作したい!【vol.1】【めもめも】
の続きになります!

今回はvol.2ということで、前回もちょっと触れた「囲み型ショートコード」の自作方法について、めもしていきたいと思います。

前回のおさらい!囲み型ショートコードとは、

[ショートコード名]...囲まれてしまった。[/ショートコード名]

↑このような形のもの。です。

では!早速!!

囲み型ショートコードの自作方法について!

今回も、function.phpにソースを書き込んでいきます。

例として、囲んだ文字の大きさと、色を変えることができるショートコードを作ってみます。

function 関数名( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('ショートコード名', '関数名');

↑上記の形で、自分でショートコード名と関数名を決め作成すると、
囲んだ文字が青色でフォントサイズが24pxになります。

今回は、spanタグを使用しましたが、もちろんその他のタグを使用してショートコードを作る事もできますよ!

実際に関数名とショートコード名を入れてみると…

function sun( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('test2', 'sun');

↑こんなかんじ!

前回の記事同様、
関数名を「sun」に。ショートコード名は「test2」にしてみました。

実際に作ったショートコードを使う時は、

[test2]文字色とサイズを変えたい文字はここに入れてね[/test2]

↑こんなかんじ!

その他にも、

特定のクラス属性を持ったタグで囲みたい!

function content1( $atts, $content = null ) {
    $val =<<<EOS
       <div class="content1">{$content}</div>
EOS;
    return $val;
}
add_shortcode('content1', 'sun');

↑こんなかんじで作ると、

[content1]content1のクラスを持ったdivに囲まれてしまった。[/content1]

content1のクラスを持ったdivタグで囲うことができます。

自己完結型ショートコードに続き囲み型ショートコードの自作方法も紹介してみましたが、
…ショートコードって、便利。ですね。

囲み型ショートコードも応用していけば色々な場面で活躍してくれそうです。

WordPressのショートコードを自作したい!【vol.1】【めもめも】

どうも。すんです。

今回は、WordPressのショートコードの自作方法について!

まず、WordPressで使うショートコードとは。

投稿記事内や特定のテンプレートファイルにて、
テキストやhtml、自作のプログラムなどを挿入することができるものです。

上手く使うと、とっても便利なものです。
作業効率も、ぐーーーーんとアップする!かもしれません。

ではさっそく、ショートコードの自作方法!について

「function.php」に書き込む!

簡単に書くと、こういった感じで記述していきます。

function 関数名() {
    $str =<<<EOS
        表示したい文字列や画像、htmlタグなどなど。をここに記述します
EOS;
    return $str;
}
add_shortcode('ショートコード名', '関数名');

例えば、

function sun() {
    $str =<<<EOS
        酒は飲んでも飲まれるな。
EOS;
    return $str;
}
add_shortcode('test', 'sun');

といった形でfunction.phpに記述した場合、
[test]というショートコードを記事内に書けば

酒は飲んでも飲まれるな。

と、ショートコードを書いた場所に表示されます。

テンプレートファイルに記述する場合は

<?php
echo do_shortcode('[test]');
 ?>

↑こんな感じです。

今回は簡単な文字列が呼び出せるショートコードを例としてあげましたが

たとえば特定の記事を呼び出したりだとか、ブログのタイトルを呼び出したりだとか。
もっと実用的なショートコードをつくることももちろん!可能です。

これはまた次の機会に。

今回めもしたのは、
「自己完結型ショートコード」の自作方法について。

自己完結型ショートコードとは、

[ショートコード名]

↑のようにショートコードひとつ記述するだけで終わり!
っていうもののことをいうみたいです。

その他に、
「囲み型ショートコード」というものもあり、

[ショートコード名]囲まれてしまった。[/ショートコード名]

↑のようなものです。

囲み型ショートコードの自作方法についても、またの機会に
めもしたいと思います。

WordPressでjQueryが動かない場合【めもめも】

どうも。すんです。
今回はWordPressを使う方なら誰でも一度はぶつかるであろう壁、
…というのは少し盛りましたぶつからない方もいらっしゃいますよねもちろん。(弱気)

え、うそ、jQuery動かないんだけど…

という大大大問題の解決方法について、
メモ程度に記しておきたいと思います。

WordPressにjQueryを埋め込む際、
まあ、普通にjsをリンクさせて、コードを埋め込みますよね?

jsファイルをリンクさせる場合は、header.phpに

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>

こんな感じでリンクさせて、

で、↓のようなコードを埋め込みたいとします。

<script type="text/javascript">
			$(document).ready(function() {
				$('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
</script>

こんなんちょろいちょろい

と、毎回埋め込んで動作を確認するんですが、
7割がた上手く動いてくれません。(私調べ)

普通に動いてくれる場合もたまーーーーーーにあるかもしれませんが、
動かない場合は、こう記述してみてください。

	<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
	</script>

「$」を「jQuery」に変えるだけで、あら不思議。

これで大抵動作するようになります。

なぜ「$」だと動いてくれないかというと、
既存のjQueryファイルには、他のjsライブラリファイルとのコンフリクトを回避する設定
「noConflict:function(X)」が記述されています。
この設定が邪魔をして、「$」では動作しないようになっているようです。

「$」を「jQuery」にしても動かない場合は、
WordPress本体がすでにjQueryを読み込んでくれているのに、
自分で本体を追加で読み込ませてしまっていて動かない〜〜ということもあるので、
確認してみましょう。

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.X.2'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.X.1/jquery.min.js"></script>

新しい本体の後に、古いバージョンのやつ読み込んじゃってるよー、
なんてことも時々あります。

それでも動かないんだけど!!!!という場合は、
……ググりましょう。

こうやってちゃんと書いておけば、
もう同じ失敗は繰り返さないよね!……きっと!!

(私もそろそろ学習します)