HOME > コラム > WEB全般 > 簡単WEBサイトテンプレート(PHP)のアップデート ver.180525

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

コラム

久しぶりに、簡単WEBサイトテンプレート(PHP)のバージョンアップを行いました。
部分的にCSSにflexboxを導入したことと、デフォルトのCSSの装飾を変えました。
この導入に至った経緯や、今後の方針をメモとして書き残して起きたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

簡単WEBサイトテンプレート(PHP)ver.180525イメージ
まずはじめに・・・

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

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

flexboxって?

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

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

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

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

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

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

組み込んだページ

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

ポイント
グローバルメニュー部分に組み入れたflexbox

これまで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ページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP