ライフワークバランスのバランスのとり方が未だにわからない、大川です。
前回のブログ「辞書ツールを活用する」にて、謎の呪文を書き残したのを覚えていらっしゃるでしょうか。
（ちょっと時間が空いてしまいましたが）
| ！ | <!– –> |
|---|---|
| ぼ | border:1px solid red; border:1px solid #EEEEEE; border:1px solid pink; |
| いめ | <imgsrc=”images/”width=””height=””alt=””class=””><imgsrc=”http://placehold.jp/300×200.png”width=””height=””alt=””class=””> |
| て | <table><tr><th><td> <dl><dt><dd> |
| り | <ul><li> |
| ぐう | :nth-child(2n) |
| と | transparent |
| す | <style></style> |
以下の解説（？）は「wordpressの子テーマとは何か」が分かる人なら役に立つかと思います。
「子テーマ…？」と思った方は1回休み。
コーディングの流れ
私の場合、以下のような流れでコーディングをしています。
- ワイヤーフレーム、デザインを作成する
- 最終的な形に近いテーマやテンプレートを選ぶ
- ダミーテキスト、ダミー画像を流し込む
- プラグインやjQueryの動作、レスポンシブの動作を確認
- HPを構成するパーツの比率を整える
- 大まかなデザインを当てはめる
- 細かい部分を整える
ワイヤーフレーム、デザインを作成する
こんなサイトを作りたいな～と考えます。
このイラストは文字のサイズやサイト比率などを考慮していませんので、これをたたき台に、ワイヤーフレームやデザインを作っていきます。
ワイヤーフレームとは
最終的な形に近いテーマやテンプレートを選ぶ
wordpressならいろいろなテーマが選び放題！
細かい装飾はcssでどうにでもなるので、クリックやスクロールしたときの動き、レスポンシブ対応、アーカイブの見え方、カスタマイズのしやすさを中心にチェックして選びます。
ダミーテキスト、ダミー画像を流し込む
文章量と写真位置の把握のため、ダミー文章を流し込みます。
テーブルもリストも、とりあえずワーッといれちゃいましょう。
「文章はあとから」という場合も多いため、よくお世話になります。
ダミーテキスト、ダミー画像
日本語ダミーテキスト生成器
ダミー画像生成 モック用画像作成
コレが便利
| いめ（イメージ） | <imgsrc=”images/”width=””height=””alt=””class=””><imgsrc=”http://placehold.jp/300×200.png”width=””height=””alt=””class=””> |
|---|---|
| て（テーブル） | <table><tr><th><td> <dl><dt><dd> |
| り（リスト） | <ul><li> |
プラグインやjQueryの動作、レスポンシブの動作を確認
wordpressのテーマとプラグインの相性が悪い、使おうと思っていたプラグイン同士がコンフリクトする、などとはデザインを当てはめる前にチェックします。
タブレット対応が必要な場合はここで念入りに確認を。
最終段階で不具合が発覚すると、だいぶ凹みます。
HPを構成するパーツの比率を整える
ヘッダーを狭めたい、サイドカラムの幅を変更したい、全体の幅を広げたい。でもどこのcssを触るといいのかわからない！
と言うときにボーダーが便利です。
「Ctrl+Shift+C」でそれらしいところを探し、ボーダーを適用してみてください。
高さや幅調節がやりやすくなったはずです。
Bootstrapのグリッドシステムで構成されてる場合は、このやり方は適さない場合も有るのでご注意を！
コレが便利
| ぼ（ボーダー） | border:1px solid red; border:1px solid #EEEEEE; border:1px solid pink; |
|---|
グリッドシステムとは
大まかなデザインを当てはめる
ロゴ、ヘッダー、フッター、見出し、文字色、フォントなどを当てはめていくとそれっぽくなってきました！
このあたりで便利なのが、HTMLの中にcssを書いたり、文字列を一時的に消したり、偶数列だけ選んだり、透明にしたりする記述。
何度も使う文字列はコレ以外にも登録しちゃいましょう。
コレが便利
| す（スタイル） | <style></style> |
|---|---|
| ！（コメントアウト） | <!– –> |
| ぐう（偶数） | :nth-child(2n) |
| と（トランスペアレント：透明） | transparent |
細かい部分を整える
ここまでで、作業の8割は終わっていますが、今から全体の8割の時間を使うことになります。
ひたすらマージンとパディングと戦うことになりますので、またもや「ぼ」の出番です。
また、併せてタブレット、スマホの調整も行います。
3で大まかな見た目は大丈夫だったはずですので、細かい修正です。
もうちょっとvh/vwを使いこなせればこのあたりの作業は楽になるかな～と思うのですが…
（ちなみにボーダーが3色あるのは、コッソリ使いたいときは目立たない灰色（#EEEEEE）を使うためです。）
vhやvwといったViewport単位
知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る
コレが便利
| ぼ（ボーダー） | border:1px solid red; border:1px solid #EEEEEE; border:1px solid pink; |
|---|
まとめ
よく使う文字列は、使いやすい形で単語登録しておくと便利ですよ、という話でした！
コーディング技術の更新もしていきたいですね！