ここのサイトのスタイル、一応の打ち止めとする。
モバイルファーストにして、PC版、その中でも中間の960〜1023pxの間だけ全く違うスタイルにするというミッション。
1023pxという中途半端なビューポートはiPad対策。
iPadは1024pxにあたるのだけど、中間のスタイルが適用されるけどなぜかめちゃくちゃ崩れるからPC版を表示するように逃げた。
またすぐ何かいじくることになるとは思うけどとりあえずはおしまい。
ビューポート960px〜1024pxの間だけスタイルを変えたのと同時に、放置してたギャラリーにも手を加えた。
>>こちら
遅延読み込みさせてないからめちゃくちゃ重いけど。
あとは全てのヘッダーにメニューとして記述してスタイル整えれば一応の完成。
ここのサイトもブレイクポイント増やしてビューポート幅に合わせてスタイルが変わるようにした。
あろうことか960pxから1024pxというよく使われるであろうサイズで…
例によって今はMacのChromeでしか見てないし、MBAの狭い画面だから縦長にした時にどう見えるかの確認もできてないけど。
それにしてもmixinでのメディアクエリ ってかなり難しいな。
どこまで入れ子にするか、可読性を考えると今までのやり方でいいんじゃないかと思える
せっかくMAMP環境作ってローカルで作業できるようしたのに、ChromeのデベロッパーツールとiPhoneの実機で挙動が違う…
結局いちいちアップロードして実機で確認、を繰り返してなんとかバグ取りしたけど。
あとはwin環境でのチェックなのだけど、サブ機にparallels入れてないから帰って机に向かわないといけない…
せっかくの持ち出し用枕元用マシンなのに…
このサイト、スタイルを弄る時は本番サイトのソースをまるっとローカルにコピーして静的ページとして作業するのだけど、終わってサーバに上げるとスタイルが大幅に崩れる。
WordPressの何かがローカルに無いからなのかと思い、久々にMAMP入れて本番サーバのWordPress書類をガバッとMAMPに落としたら今度はカスタム投稿タイプやらテーマやらが効かずに素の状態になってしまう。DBはちゃんと落とせてインポートできてるのだけど…
なんだこれ。
WordPressに持っていくと崩れるスタイル、ようやく直した。
今更感バリバリのスタイルだけどまあいいや。
ブラウザの幅960から1024だっけな、その間だけこのスタイルになるという実験。
今度はまた別のブレイクポイント作ってグリッドでも使ってみるか…
いやグリッドは計算がめんどいから嫌だな…
この前ここのスタイルを変えたばかりなのだけど、ブレイクポイントを一つ増やしてsassの勉強がてら違うスタイルを作ってる。
indexと個別ページのソースをローカルのhtml書類に落として、ローカルで作業するのだけど、ローカルでは意図通りなのに、サーバに上げるとスタイルが崩れる。
WordPressの何かが悪さしてるんだろうか…
これを防ぐにはローカルにMAMP入れてWordPress内で作業するしかないのか…
サイトごとにWordPress入れるのめんどいな…
相変わらず自サイトふたつのスタイルと、sassの勉強ついでに格闘しているのだけど、cssのshape-insideってまだ使えないのね（？
図形に回り込みさせる-outsideの情報はよく見るけど、-insideの情報は皆無といっていいくらい。
一応、-insideの代わりに、::beforeと::after使ってそれらの外形を左側なら::beforeの右側をくぼませて、っていうバッドノウハウは見つけたけど、これは高さをしていしないと使えなかった。
jsと組み合わせて表現するというのもみかけたけど、動きはともかく、カタチのためだけにjsを使うのはどうも…（ただjsがわからないだけ
なんとか表現できる方法はないものか…