HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

スポンサーリンク

flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。
乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横に並べることができればなんでもいい。


flexbox で子要素を横に並べる


とりあえず、DIV BOX を横に並べたいなら、こう書けばOK。
HTML
<div style="display:flex; border:1px solid #ccc;">
<div style="border:1px solid #ccc;">A</div>
<div style="border:1px solid #ccc;">B</div>
<div style="border:1px solid #ccc;">C</div>
</div>

※わかりやすくするために border をつけています。


A
B
C

ポイントは、display:flex
このスタイルの box の中にはいった ボックスは横に並びます。

見栄えを良くするために普通はクラスにして例示してますけど、その時のクラス名に flexbox を使うので勘違いしますけど、style display:flex; と入れればOKということです。

基本左寄りで float:left と float:left のクリアのセットとおなじ。
ところが flex box が便利なのは、親となる display:flex; をつけた div の中の子供をセンタリング、右寄せさせるのが簡単。


flexbox で子要素の位置合わせ


style の justify-content に以下のそれぞれを設定するだけです。
  • flex-start:左寄せ
  • flex-end:右寄せ
  • flex-center:中央寄せ
  • space-between:均等割り
  • space-around:均等間隔中央委寄せ
  • space-evenly


flex-start:左寄せ
A
B
C
D

flex-end:右寄せ
A
B
C
D

flex-center:中央寄せ
A
B
C
D

space-between:均等割り
A
B
C
D

space-around:均等間隔中央委寄せ
A
B
C
D

space-evenly:均等間隔中央委寄せ
A
B
C
D


flexbox でレスポンシブをサポート


flexbox は、レスポンシブデザインの~みたいな印象ですけど、実は違います。
前述のように box を横に並べるスタイルです。

でも flexbox には便利なスタイルがあります。
それが折り返し。

flex-wrap: warp;

です。

flex-warp を付けないとこうなります。
AAAAAAAAAA
BBBBBBBBBB
CCCCCCCCCC
AAAAAAAAAA1
BBBBBBBBBB1
CCCCCCCCCC1
AAAAAAAAAA2
BBBBBBBBBB2
CCCCCCCCCC2


<div class="flexbox">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">A1</div>
<div class="item">B1</div>
<div class="item">C1</div>
<div class="item">A2</div>
<div class="item">B2</div>
<div class="item">C2</div>

<style>
.flexbox{display:flex;}
.item{width:100px;}
</style>


flex-warp を付けるとこうなります。
AAAAAAAAAA
BBBBBBBBBB
CCCCCCCCCC
AAAAAAAAAA1
BBBBBBBBBB1
CCCCCCCCCC1
AAAAAAAAAA2
BBBBBBBBBB2
CCCCCCCCCC2

<div class="flexbox">
<div class="item">AAAAAAAAAA</div>
<div class="item">BBBBBBBBBB</div>
<div class="item">CCCCCCCCCC</div>
<div class="item">AAAAAAAAAA1</div>
<div class="item">BBBBBBBBBB1</div>
<div class="item">CCCCCCCCCC1</div>
<div class="item">AAAAAAAAAA2</div>
<div class="item">BBBBBBBBBB2</div>
<div class="item">CCCCCCCCCC2</div>
</div>
<style>
.flexbox{display:flex;flex-wrap: wrap;}
.item{width:100px;}
</style>


本当にレスポンシブにしたいなら。


一応、枠サイズで折り返すことはできてもh権頭の意味でレスポンシブにするときには、やはり @media で item の幅を変えてあげないと無理が出ます。

<div class="flexbox">
<div class="item">AAAAAAAAAA</div>
<div class="item">BBBBBBBBBB</div>
<div class="item">CCCCCCCCCC</div>
<div class="item">AAAAAAAAAA1</div>
<div class="item">BBBBBBBBBB1</div>
<div class="item">CCCCCCCCCC1</div>
<div class="item">AAAAAAAAAA2</div>
<div class="item">BBBBBBBBBB2</div>
<div class="item">CCCCCCCCCC2</div>
</div>
<style>
.flexbox{display:flex;flex-wrap: wrap;}
.item{width:100px;}
@media screen and (min-width: 641px) and (max-width: 768px) {
.item{width:100%;}
}
@media screen and (max-width: 640px) {
.item{width:100%;}
}
</style>


flexbox でのレスポンシブは、定型セットで以下のように覚えておきます。
<style>
.flexbox{
display:flex;
flex-wrap: wrap;
}
.item{
}
@media screen and (min-width: 641px) and (max-width: 768px) {
.item{width:100%;}
}
@media screen and (max-width: 640px) {
.item{width:100%;}
}
</style>


flexbox で子要素の高さをあわせる



flex box では、子要素の高さ合わせは標準で行われます。
AAAA
AAA
AAA
BBBBB
BBBBB
CCCCCCCCCC
AA
AAA
AAA
AA1

意図的に高さを変える場合には、以下のようなスタイルがあります。
  • align-self
  • auto:(デフォルト) 親要素の高さに合わせる
  • stretch:コンテンツの一番多い子要素に合わせる
  • flex-start:親BOXの中で上揃え
  • flex-end:親BOXの中で下合わせ
  • center:親BOXの中で中央揃え
  • baseline:ベースライン合わせ



flexbox でできること


flexbox でできることは、このほかにも逆並びにするとか様々ありますが、つかうかなぁ?って思いますので、とりあえず前述のことだけを記憶して、そういえばできたよねぇ~程度でいいと思います。


flexbox のまとめ


flexbox の中で常に使うものは、以下にまとめます。

つまり、
display:flex;
flex-wrap:warp;
@media screen and (min-width: 641px) and (max-width: 768px) {}
@media screen and (max-width: 640px) {}
の4行。

あとは必要なときに調べればいい。
逆にいえば工数をかけてまでこだわる必要があるのなら、って感じです。

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな