ここのサイトのスタイル、一応の打ち止めとする。
モバイルファーストにして、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がわからないだけ
なんとか表現できる方法はないものか…
テーマがいきなり崩れた…どのファイルも記述は間違ってないし、さっきまではちゃんと表示されてた…謎
古臭くて眠〜いこのサイトの見た目をまあ今時でもないけど衣替えした。
htmlは変更無しでcssだけでの変更。
例によってMacのChrome、Safari、iOS Safari、iOS Chromeでしか確認してない。
多分IEだとめっちゃくちゃになるんだろうな…
それはまあそのうち対応。
そしてまたデザインの勉強がてらブレイクポイントをもう一つ設けて見た目をガラッと変えるつもり。
ここのブログ、全く記事を書いてないからsassの勉強用とかの実験場にしようかと思う。
だいぶ昔に組んだhtmlだから今見たら自分でイライラしそうだけど可能な限りhtml構造を崩さずにスタイル作りたい。
まあその前にどんなデザインにするか、それが問題なのだけど。
Webデザイナー、コーダーの職を募集してたからエージェント経由で応募したのだけどポートフォリオや履歴書がまさかの郵送。
なんでやねん。今時ポートフォリオ、しかもweb関連の会社なのに紙でやりとりするか？？
なんかここダメな気がする…
テスト
サイトの名前を「A to Z」から「A 2 Z」に変更。
それに伴い、テキストじゃなく、CSSでの装飾を試して見た。
組み替えはしたけれど、一応空DIVとかは無しで組んだ。
今現在PCのchoromeのみで確認。
他ブラウザ、モバイルは未確認
投稿内に画像が無いとき
投稿内に画像があるとき
このサイトのデザインしなおし、ほぼ終わり、にします。
IEの6では確認してないので悪しからず＞＜
細々した調整を今後していくかも、しれません。
このサイト、デザインしなおすことにします。
本番そのまま上書きしていくのでしばらく見苦しいかと思います＞＜