AtoZ 晴れ時々UTU

Open / Close

打止

04. Webデザイン 2019年6月30日 日曜日 8:12:11

ここのサイトのスタイル、一応の打ち止めとする。
モバイルファーストにして、PC版、その中でも中間の960〜1023pxの間だけ全く違うスタイルにするというミッション。
1023pxという中途半端なビューポートはiPad対策。
iPadは1024pxにあたるのだけど、中間のスタイルが適用されるけどなぜかめちゃくちゃ崩れるからPC版を表示するように逃げた。
またすぐ何かいじくることになるとは思うけどとりあえずはおしまい。

Open / Close

写真

04. Webデザイン 2019年6月27日 木曜日 20:32:44

ビューポート960px〜1024pxの間だけスタイルを変えたのと同時に、放置してたギャラリーにも手を加えた。
>>こちら
遅延読み込みさせてないからめちゃくちゃ重いけど。
あとは全てのヘッダーにメニューとして記述してスタイル整えれば一応の完成。

Open / Close

付加

04. Webデザイン 2019年6月20日 木曜日 7:18:53

ここのサイトもブレイクポイント増やしてビューポート幅に合わせてスタイルが変わるようにした。
あろうことか960pxから1024pxというよく使われるであろうサイズで…
例によって今はMacのChromeでしか見てないし、MBAの狭い画面だから縦長にした時にどう見えるかの確認もできてないけど。
それにしてもmixinでのメディアクエリ ってかなり難しいな。
どこまで入れ子にするか、可読性を考えると今までのやり方でいいんじゃないかと思える

Open / Close

挙動

04. Webデザイン 2019年6月17日 月曜日 6:49:05

せっかくMAMP環境作ってローカルで作業できるようしたのに、ChromeのデベロッパーツールとiPhoneの実機で挙動が違う…
結局いちいちアップロードして実機で確認、を繰り返してなんとかバグ取りしたけど。
あとはwin環境でのチェックなのだけど、サブ機にparallels入れてないから帰って机に向かわないといけない…
せっかくの持ち出し用枕元用マシンなのに…

Open / Close

鵺的

04. Webデザイン 2019年6月15日 土曜日 5:54:46

このサイト、スタイルを弄る時は本番サイトのソースをまるっとローカルにコピーして静的ページとして作業するのだけど、終わってサーバに上げるとスタイルが大幅に崩れる。
WordPressの何かがローカルに無いからなのかと思い、久々にMAMP入れて本番サーバのWordPress書類をガバッとMAMPに落としたら今度はカスタム投稿タイプやらテーマやらが効かずに素の状態になってしまう。DBはちゃんと落とせてインポートできてるのだけど…
なんだこれ。

Open / Close

開展

04. Webデザイン 2019年6月13日 木曜日 7:19:24

WordPressに持っていくと崩れるスタイル、ようやく直した。
今更感バリバリのスタイルだけどまあいいや。
ブラウザの幅960から1024だっけな、その間だけこのスタイルになるという実験。
今度はまた別のブレイクポイント作ってグリッドでも使ってみるか…
いやグリッドは計算がめんどいから嫌だな…

Open / Close

悪癖

04. Webデザイン

この前ここのスタイルを変えたばかりなのだけど、ブレイクポイントを一つ増やしてsassの勉強がてら違うスタイルを作ってる。
indexと個別ページのソースをローカルのhtml書類に落として、ローカルで作業するのだけど、ローカルでは意図通りなのに、サーバに上げるとスタイルが崩れる。
WordPressの何かが悪さしてるんだろうか…
これを防ぐにはローカルにMAMP入れてWordPress内で作業するしかないのか…
サイトごとにWordPress入れるのめんどいな…

Open / Close

格闘

04. Webデザイン 2019年6月10日 月曜日 7:22:49

相変わらず自サイトふたつのスタイルと、sassの勉強ついでに格闘しているのだけど、cssのshape-insideってまだ使えないのね(?
図形に回り込みさせる-outsideの情報はよく見るけど、-insideの情報は皆無といっていいくらい。
一応、-insideの代わりに、::beforeと::after使ってそれらの外形を左側なら::beforeの右側をくぼませて、っていうバッドノウハウは見つけたけど、これは高さをしていしないと使えなかった。
jsと組み合わせて表現するというのもみかけたけど、動きはともかく、カタチのためだけにjsを使うのはどうも…(ただjsがわからないだけ
なんとか表現できる方法はないものか…

Open / Close

破壊

04. Webデザイン 2019年5月20日 月曜日 9:26:55

テーマがいきなり崩れた…どのファイルも記述は間違ってないし、さっきまではちゃんと表示されてた…謎

Open / Close

衣替

04. Webデザイン

古臭くて眠〜いこのサイトの見た目をまあ今時でもないけど衣替えした。
htmlは変更無しでcssだけでの変更。
例によってMacのChrome、Safari、iOS Safari、iOS Chromeでしか確認してない。
多分IEだとめっちゃくちゃになるんだろうな…
それはまあそのうち対応。
そしてまたデザインの勉強がてらブレイクポイントをもう一つ設けて見た目をガラッと変えるつもり。

Open / Close

投稿

04. Webデザイン 2019年5月9日 木曜日 9:07:17

ここのブログ、全く記事を書いてないからsassの勉強用とかの実験場にしようかと思う。
だいぶ昔に組んだhtmlだから今見たら自分でイライラしそうだけど可能な限りhtml構造を崩さずにスタイル作りたい。
まあその前にどんなデザインにするか、それが問題なのだけど。

Open / Close

差合

04. Webデザイン, 40. 体調管理/独り言, 50. その他 2019年3月13日 水曜日 8:41:29

Webデザイナー、コーダーの職を募集してたからエージェント経由で応募したのだけどポートフォリオや履歴書がまさかの郵送。
なんでやねん。今時ポートフォリオ、しかもweb関連の会社なのに紙でやりとりするか??
なんかここダメな気がする…

Open / Close

装飾

04. Webデザイン 2018年4月13日 金曜日 20:08:05

サイトの名前を「A to Z」から「A 2 Z」に変更。
それに伴い、テキストじゃなく、CSSでの装飾を試して見た。
組み替えはしたけれど、一応空DIVとかは無しで組んだ。
今現在PCのchoromeのみで確認。
他ブラウザ、モバイルは未確認

Open / Close

re:デザイン終わり

04. Webデザイン 2013年3月28日 木曜日 20:08:42

このサイトのデザインしなおし、ほぼ終わり、にします。
IEの6では確認してないので悪しからず><
細々した調整を今後していくかも、しれません。

Open / Close

re:デザイン

04. Webデザイン 2013年3月25日 月曜日 20:03:09

このサイト、デザインしなおすことにします。
本番そのまま上書きしていくのでしばらく見苦しいかと思います><

TOP