本付録は、メインシリーズであるWordPressのテーマ作成に役立ちそうな情報を補足していくパートだ。
前回はPRECSSのうち、最も重要となるモジュールグループを解説した。
ページの大部分を占めるものになり、これを理解しておかないと恐らく手を付けられないだろう。
逆に、これを理解しておけばある程度までは組むことができると思う。
どこでも配置できるようにという大前提を常に意識しておこう。
以下がその記事だ。
さて、今回もPRECSSの続き。
前回少し使ってしまったヘルパーグループと、もう一つユニークグループまで見ていく。
サンプルについて、ヘルパーは前回のものを少し例として出す程度に留め、ユニークは実際に作ってみよう。
これらはモジュールほど重要ではないが、やはりあった方がいいものなのでしっかり押さえておきたい。
なお、本付録は以下の本を参考にしている。
気になる方は、実際に本屋で中身を見てみたり、買ってみたりしよう。
また、PRECSSの公式ページも貼っておく。
是非、こちらも参照しながら進めていただきたい。
ヘルパーグループ
では、まずヘルパーグループから。
ヘルパーは基本的にある一つのスタイルについて、それを何かしらの値で上書きするためのものだ。
上書きを意図して行うため、ここに関しては!importantの付与が推奨されている。
また、一つのスタイルなので1行でセレクタから閉じ括弧まで書くことも許容している。
命名は先頭にhp_をつけ、その後ろはモディファイアと同じくkeyValueの形。
これを省略する場合は、やはりEmmetのチートシートを参考にしよう。
その他で言うと…
- px単位は省略し、他は分かりやすい頭文字をつける
- 小数点はアンダースコアで表現
- ネガティブな値(マイナスの値)はショートハンドを全て大文字で表現
- ショートハンドの後ろに文字列を続ける場合はローワーキャメルケース
こんなことが推奨されている。
例えば、背景色を白にするヘルパークラスを作ってみると…
.hp_bgcWhite { background-color: #fff !important; }こんな感じ。
その他、前回サンプルで使った例も見てみよう。
該当部分だけを抜粋してみる。
/*
*****************************
* Helper *
*****************************
*/
.hp_pb2e { padding-bottom: 2em !important; }
.hp_fz1_5e { font-size: 1.5em !important; }一つ目のhp_pb2eは、padding-bottomを2emにするという意味だ。
慣れないと少し混乱するかもしれないが、それを乗り越えれば当たり前に使えるようになるだろう。
さて、基本的には一つのプロパティのみを指定するヘルパーだが、挙動が限定的かつ明確な場合は複数のスタイリングをすることも可能。
公式ページの例だと以下のような感じだ。
.hp_centering {
display: block !important;
margin-legt: auto !important;
margin-right: auto !important;
}これを付与した対象はブロック要素となり、左右のmarginが自動で調整される…つまり、中央に配置されるようになる。
こんな使い方ができることも覚えておこう。
さて、公式に紹介があったので一つ補足を。
レイアウトでfloatを使った場合の解除方法だ。
これを解除するために、clearfixというものを使うことを推奨している。
…今回はそもそもfloatを使う予定はないので、これだけにしておこう。
気になる方は公式を参照してほしい。
ユニークグループ
今回の本題二つ目、ユニークグループも見てみよう。
ユニークという名前がついている通り、これはある1ページでしか使われないことを明示するためのグループだ。
不要になれば大胆に捨てられるスタイルであることも表しており、メンテナンス時に効力を発揮する。
これ自体もモジュールで、その大きさは自由。
接頭語はun_、後ろにつける名前はブロックやエレメントと同じものをイメージしてもらうといいだろう。
使いどころとしては、例えばサイトの最初に表示する扉ページだったり、トップページのみに表示する内容だったりだろうか。
あるいは、position: absolute;を設定するような通常のモジュール設計から外れるものに使うのもいい。
先に言ってしまうと、サンプルではスライドショーを入れる領域と、スクロールによって出し入れするボタン、スマホ用のメニュー表示ボタンとそれによって出てくるメニューあたりをこのユニークモジュールとして定義するつもりだ。
このユニークグループは、あらゆるイレギュラーに対応できる万能な回避策となる。
参考書には困ったらとりあえずユニークを使おう、とまで書かれている。
が、一か所でのみ使うことを想定しているため、かなり具体性が高くなる。
逆に言えば拡張性を失うことになるので、何でもユニークにする、という使い方は避けよう。
あくまでイレギュラーに対応するためのもの、という認識は忘れずに。
なお、CSSではどこで使われているかをコメントで残しておくといい。
サンプル：ユニークの作成
では、実際にユニークグループを作ってみる。
今回作るのは以下の2つだ。
- ページトップに戻るボタン
- (スマホ用)メニューを表示するボタン
スマホ用で出てくるメニューもユニークで作るが、それは出し入れするのに次回解説するプログラムグループが必要になる。
そのため、準備として呼び出すボタン側だけを実装しよう。
また、スライドショー領域も実際にはこのユニークを使うが、そこもJavaScriptがかなり絡んでくる。
その時にまとめて実装することにする。
では、順番に作ってみよう。
ページトップに戻るボタン
まずはこれだ。
画面の右下に、(今のところは)常にトップへ戻るボタンを表示したい。
表示・非表示の切り替えはJavaScriptが必要になるので、やはりその解説が終わってから実装しよう。
というわけで、まずはHTMLを。
<div class="un_upButton">
<i class="fas fa-arrow-up"></i>
</div>
<!-- /.un_upButton -->まあこれだけだろう。
画面上部へ移動するボタンなので、中身にFont Awesomeで上矢印を表示している。
で、CSSでは見た目の調整と、画面に対する配置なのでposition: fixed;とright, bottomプロパティで配置。
実装が完了したものが以下だ。
/* 全ページで使用 */
.un_upButton {
position: fixed;
font-size: 1.5em;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 0.5em;
border-radius: 0.5em;
right: 1em;
bottom: 1em;
}色々と気になるところがあるが…先にもう一つのボタンを見ていこう。
(スマホ用)メニューを表示するボタン
今度は画面の左下に、メニューを開くためのボタンを配置する。
HTMLはクラス名が少し違うだけで、他は上で作ったものとほぼ同じだ。
しかし、こちらはタブレット幅以上では非表示にしたいので、モディファイアを付けておこう。
前回までと同様、画面サイズがタブレット以上になった時に設定を行うので、__wLargeというモディファイア名をつける。
<div class="un_menuButton un_menuButton__wLarge">
<i class="fas fa-bars"></i>
</div>
<!-- /.un_menuButton -->次にCSS、一つ上と異なる点は2つ。
左下に配置したいのでrightではなくleftで指定するのと、レスポンシブデザインでタブレット幅以上の時は非表示にする部分だけだ。
/* 全ページで使用 */
.un_menuButton {
position: fixed;
font-size: 1.5em;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 0.5em;
border-radius: 0.5em;
left: 1em;
bottom: 1em;
}
/* タブレット幅以上の共通設定 */
@media screen and (min-width: 768px){
.un_menuButton.un_menuButton__wLarge {
display: none;
}
}これで画面を表示すれば、両方とも問題なく表示されるはずだ。
リファクタリング
さて、上でも書いてしまったが、この二つについてほとんどの設定は共通している。
そのため、同じ設定をun_navButtonというクラスにまとめてしまい、差分をモディファイアで実装する方針に変えよう。
名前をより一般的にするため、メニュー開閉を__left、トップへのスクロールを__rightとして実装する。
これで直すと…
<div class="un_navButton un_navButton__left un_navButton__wLarge">
<i class="fas fa-bars"></i>
</div>
<!-- /.un_navButton -->
<div class="un_navButton un_navButton__right">
<i class="fas fa-arrow-up"></i>
</div>
<!-- /.un_navButton -->/* 全ページで使用 */
.un_navButton {
position: fixed;
font-size: 1.5em;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 0.5em;
border-radius: 0.5em;
bottom: 1em;
}
.un_navButton.un_navButton__left {
left: 1em;
}
.un_navButton.un_navButton__right {
right: 1em;
}
/* タブレット幅以上の共通設定 */
@media screen and (min-width: 768px){
.un_navButton.un_navButton__wLarge {
display: none;
}
}これで完成だ。
まだページ自体が短くてスクロールは難しいので、ダミーコンテンツなどを入れてスクロールしてもついてくることなどを確認しておくといいだろう。
おわりに
今回は、ヘルパーグループとユニークグループを解説した。
必須ではないが、あると便利なものという位置づけだろうか。
やはり知らないよりは知っておいた方がいいので、なんとなく理解しておこう。
さて、次回はプログラムグループを解説する。
これはJavaScriptに関連するグループで、基本的にJavaScriptで何かしら取得や設定を行う場合にはこのプログラムグループを介して行う。
昨今のページでJavaScriptを使わないことはほぼないと思うので、しっかり押さえておきたい。
コメント