簡単WEBサイトテンプレート（PHP）のアップデート ver.180525

簡単WEBサイトテンプレート（PHP）のアップデート ver.180525

久しぶりに簡単WEBサイトテンプレート（PHP）をアップデートいたしました。
今回、flexboxを一部的に導入しまして、その他、若干の修正加えてアップデートした感じです。

ソースが古いままでもいいかな？と思ってますが、便利さは追求したいなぁと思った次第です。
あと、今回はflexboxを入れたことと、ちょっとした記述についても触れておきたいと考えた次第です。

flexboxとはCSSのレイアウトを組むためのモジュールでして、枠を組む時に簡単に枠組みができるようになるというCSS記述です。
今も多くの方々は若干面倒な組み方をしている記述が多いですが、flexboxにすると割と簡単に手配ができたという感じです。

ちょっと前くらいに、兼ねてから平素仲良くやり取りしている方から「flexbox」と「Grid Layout」のことをお聞きしました。
ということで、いつか取り組もうと考えながらメモを書いてた感じでした。
今回を機に、これからもflexboxを普通に使うように取り組んでいこうと思います。

flexboxのことはたくさんWEBに出ていまして、flexboxのことを紹介している代表的なサイトは「Webクリエイターボックス」さんではないでしょうか。

• これからのCSSレイアウトはFlexboxで決まり！
• 日本語対応！CSS Flexboxのチートシートを作ったので配布します
• IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！

Webクリエイターボックスさんを紹介しておきながらこんなことを言っていいか分かりませんが、ぶっちゃけ、ぼくはチートシートいただいてませんし読んでません。
ですので、Webクリエイターボックスさんのチートシートに書かれてたりすることと若干違いがあるかもしれませんが、ご容赦ください。

今回の作業に当たって、当方が参考にしたのは、海外のサイトの方が多かったような感じです。
特にバグやブラウザごとの記述に関するあれこれが見たかったこともあり、いろんなところを見て回りました。

それを自分流・・・というと大げさですが、特定のサイトに依存しない記述をしているつもりですので、「flexbox CSS」と検索して出てくる10ページまでに出てくるサイト全て参照したと思っていただけると幸いです。
また、まだ完璧に憶えたわけではありませんでして、まだまだ調整が必要な感じもしますので、何かありましたら、ご指摘の程宜しくお願いいたします。

• 簡単WEBサイトテンプレート（PHP） ver.180525
• ver.180525サンプルページ

上記はサンプルのページです。

これまでfloatを子に入れてた時は親に:afterでフォローを入れていましたが、今回からはもうありません。
以下の記述を親要素に入れてflexboxを始動（？）させた感じです。

#global ul {
	display: -webkit-flex; /** flexboxを始動する記述 **/
	display: -ms-flexbox; /** flexboxを始動する記述 **/
	display: -webkit-box; /** flexboxを始動する記述 **/
	display: flex; /** flexboxを始動する記述 **/
	-webkit-justify-content: center;
	justify-content: center;
}

何がどのような役割をしているかというお話は、リファレンスを読んでいただくとして、このような感じで、main.css、sp_main.css、tbl_main.cssのグローバルメニュー部分の記述を変えました。

sp_main.cssとtbl_main.cssに関しては、デスクトップの表示とは若干違うため、装飾も若干変えています。

今回から、以下の記述をdefault.css、sp_default.css、tbl_default.cssに書き加えました。

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

この記述は、divの横幅を指定したとして、その中にpaddingやborderを入れるか否か・・・という話を解決してくれる記述です。
上記の記述は、divなどの横幅を指定した時、paddingやborderの横幅を吸収してくれる記述というところです。

もともと、どの件も横幅を調整していたため、組み入れても組み入れなくても問題ではなかったんですが、今後、細かい装飾する時などに役立つであろうと想定してのことでした。

default.cssの細かい点の修正もしたので、default.css、sp_default.css、tbl_main.cssはそのままアップしていただいた方がいいかもしれません。

今回のアップデートではHTMLは全く触っていません。

今後、追々、flexboxをもっと導入できればいいかなぁ・・・と考えています。

いかがでしたでしょうか？

flexboxを触ってて思ったんですが、やはり慣れが必要な感じがしますね。
細かい調整はまだまだ触って慣れないといけない感じがしています。

色々疑問が残ってる感じです。
例えば、色んなリファレンスサイトでは、初期の設定と、そうでない設定が混在して若干分かりにくいとか。
それぞれ試して書かないといけない感じですね。

そんなこんなで色んな学びがあり、これを続けてもっと学びありにしたい感じがしたアップデートでした。
疑問などがありましたら、お気軽にご連絡くださいね。

執筆 : 清水 隼斗

簡単WEBサイトテンプレート（PHP）のアップデート ver.180525のAMPページ