前回に引き続きcolumn-widthを指定することでレイアウトしてみることにします。
DEMO：縦書き（column-width）固定
Firefox以外高さを入れないと、妙な空きができてしまいます。
IEの場合テキスト量が段毎に同じように割り振られてしまうようでcolumn-fill:auto;を入れました。
（デフォルトでcolumn-fill:auto;のはずですが明示的に入れないとダメなようです。）
column-widthだけを指定して可変長のテキストが自動でうまく収まればブログなどでも使えそうですが、ちょっと難しそうです。
使い所としてはポイント的な差し込みで使うことは可能なので今度はそういった例にチャレンジしたいと思います。
PCブラウザ環境が変化してきましたので、そろそろ縦書き表現も
こなれてきたのだろうかと始めてみた気づきを書いておきます。
DEMO:縦書き（カラム有り）
今回はカラムの親に幅と高さを指定して調整しています。
指定しないとブラウザ間でまちまちな動きをします。
最初column-widthで調整していたのですが、動きが読めなくなってきたのでcolumn-countで指定する方法にしました。もしかしたらcolumn-widthでもうまくいく方法があるのかもしれません。
参考
・折り返し（box-lines/flex-wrap）
display:box仕様でbox-linesにmultipleがあるがAndroidブラウザー4.3以下では対応していない。
＞従来通りfloatを使う
Firefox(43.0.4)ではflex-wrap:wrapは動いている模様
・簡易なグリッドレイアウト代替
＞display:tableのほうが低コスト
あくまでもflexboxでメリットが有るならやるべきか。
・最後の要素を幅を伸縮調整する（flex-grow）
＞上記の折り返しがある場合はサポートブラウザを留意する
・並び順（reverse）
＞row-reverseした時に右寄せになってしまうのは
justify-content: flex-end;
とすることで左寄せになる
columnの場合は特に癖はないので
JSなどでやっていたリストの降順、昇順ソートが簡易にできそうではある。
・並び順（order）
＞数字の若いものが先頭に来る
flexbox 2009仕様（box）では初期値が1
nth-child(n)か class OR idで個別に指定する。
例えばアイテム全体にorder:2
先頭にしたいもののIDにorder:1としてもうまくいかなかった。
実際の動きはジェネレーターを参考にされたい
CodePen – Flexbox playgroung
Flexy Boxes — CSS flexbox playground and code generation tool
Visual Guide to CSS3 Flexbox: Flexbox Playground |
もし過去のバージョンに対応させられるコストがあるならAutoprefixer（Bracketsにプラグインを入れるのがお手軽）や
IE8、9に対応させるFlexibility（display:flex仕様）や
更新が止まってしまっているがdoctyper/flexie: Legacy support for the CSS3 Flexible Box Model(display:box仕様)などがポリフィルとして使えるだろう。
現時点ではPCではIE11、Chrome Firefoxの最新版
SPではiOS7以上のSafari Android4.4ブラウザー Chromeの最新版
のdisplay:flex仕様で製作可能なプロジェクトであれば使いドコロはあるだろう。
※Adjust Admin Categoriesは投稿時現在4.2.6まで動作保証
WordPress4.4.1で以下のようにカスタムタクソノミーを作りました。
タクソノミー：ユーザー種類
階層化設定：あり
「チェックボックスをラジオボタンにする」を含め全て有効化して
カスタム投稿に表示するようにしたのですがラジオボタンになりませんでした。
解決：「親の選択が出来ないようにする」を停止にするとラジオ表示になりました。
WordPressのテンプレートを作る時のTipsです。
functions.phpに以下を追加すると
テンプレートのファイル名と同じ名前のCSSを読み込みます。
page.phpならcss/page.cssを読み込む。
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
global $template;
$url= get_stylesheet_directory_uri() . '/css/'.basename($template, '.php').'.css';
// $header = @get_headers($url);
// if ($header[0] != "HTTP/1.1 404 Not Found") {
wp_enqueue_style('page-style',$url, array('sitename-style'));
// }
}
注意したいのは必ずテンプレート名.cssファイルを読み込もうとするので
テンプレート毎のCSSを作っておくか、
本番時は上記コードのコメントを外してキャッシュプラグインなどを入れると良いかと思います。
条件判定を何も考えないで書いちゃうと
if(条件A && 条件B && 条件C && …)っていう見通しの悪いコードができてしまうので改善できないか考えてみました。
以下コードになります。
//AND条件のチェック
function andCheck($array){
$flg = 0;
foreach( $array as $key ){
$flg += $key ? 0 : 1;
}
return $flg > 0 ? false : true;
}
//OR条件のチェック
function orCheck($array){
$flg = 0;
foreach( $array as $key ){
$flg += $key ? 1 : 0;
}
return $flg > 0 ? true : false;
}
$arr = array(1 === 2,
6 > 6,
'10'.'0' === 100,
0*0 == 0
);
echo andCheck($arr) ? 'ok' : 'ng'; //ng
echo orCheck($arr) ? 'ok' : 'ng'; //ok
以下のようなコードを書きそうになって、もっと簡単に書けなかったっけ？ってなったのでメモしておきます。
//これが…..
if(条件){
$hoge.addClass('active');
}else{
$hoge.removeClass('active');
}
//こうじゃ！.....
$hoge.toggleClass('active',条件);
５行が１行に！
以上になります。
