空の回廊

独りよがりなWebLog(たまにTemporary)

レスポンシブで表示がおかしいの乱

ベースが少し古く、HPの情報もダラダラと長くなってしまったサイトで、
情報的に整え直すついでにフォントの設定(remで指定)やbox-sizingの設定とかもして、スマホの方で動作確認したら、上手く表示されず。。

viewportの設定してみたり外したり適当に入れてみたけど、改装前より妙に大きくなったり小さくなったり。。。
メディアクエリも使っても何か変。。 rem設定が悪いのか…?

ぐわーやっぱり苦手だー。 もーやだこんなの。 とか心の中で言いながら、ふとcssのhtmlの設定を見たら
「あ… これかも…」
な設定を発見。
他のをコピって使ったので、それが原因だったミタイ。
無事解決したと思いたいけど、不安です。

メディアクエリを入れる事もしてない(今の所)ので、metaのviewportは消しました。
メインの横幅とかいっそ全部%で指定した方が良いのではと思ったり。

難しいょ

コントロール

普段、自分はプロなんだろうかと思いながら生活してるけど

何かトラブルやミスがあった時に
「プロ失格」
と感じて、ああ私プロなのか…と…


作業・スケジュールのコントロール
…だけならまだ何とかなるけど

さらに 普段の
気持ちの状態のコントロール
これが厄介で
足並みが年々揃わなくなってる気が。。。

心の第一エンジン
心の第二エンジン
体のエンジン

って分類してます。
何が第一で第二なのか、自分でもまだ分からないけど
何か2つあるのは感じてる。。!

どこかチキン・ジュグラー・コンドラチェフの波…
って経済っ!?

もしかしたら
「普段の中で、いつもと違う体験をする」
とリセットされるかもしれない…!(中々できない体たらく)


また、単価の低い仕事を受けるかの基準は
金額以外のメリットが自分にあるか、なのかなと…

学びたいジャンルのスキル習得、人脈、
あとは、自分の仕事に対するポリシー、将来の展望。

でも、去年色々向き合った結果、ポリシー、将来の展望を見つけられたので、ハッキリしなかった物差しを具現化できたのは良かった…!

とは言え、、断るのは勇気がいるし、
今胸に抱えているのは 複雑で微妙なのよねぇ…。

でも、その選択を誤り続けると、普通に働いていた方がよっぽど良い訳で…
時間も取られちゃうし…

苦労するのも大事かもしれないけど、
避けて生きていかないと、
または買うべき苦労は選ばないと増えてダメージを受けるだけで、

自分の意志で働いてるハズが自由で無くなっちゃう。


それに、避けても出てくるものが運命だったリ宿命、因果だったりするのかなーと。
であれば、それに対してはある程度意識して向き合える気がする。

宿命(運命)の事案が見えるってカッコイイ気がする…!

なんて…
今は自分の因果が引き寄せてしまったので反省しなきゃな。。
ただ、仕方ない部分もあるし、言い訳もしたいけど…(する時は極力自分の中で…!)

気持ちのコントロール…対応の選択肢…その時その時でどれを選ぶか難しいです。

なんて
仕事量も稼いでるお金も大したレベルじゃないけども…!
(でもあまり自分を低く言うと相手に失礼になっちゃうから…ね…とかゴニョゴニョ)

IEだけ画像の下に余白、IEだけ効かないパターン

(liで)画像+リンクで横並び表示で、
横幅を超えるとで下に流れるレイアウトで

画像の下の余白の対策(vertical-align:bottom;)をしたのに、IEだけそれが効かない現象に遭遇。。

IEだけ適用されるcssで対処しました。
(もっとシンプルな方法があったかもしれないケド…)

<nav id="●●●"><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--></nav>
#●●● li{
 display: inline-block;
 margin: 0;
 padding: 0;
}

nav#●●● li a {display: block;}
nav#●●● li a img{vertical-align:bottom;}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #topmenuArea li {
   height: 100px; /* 高さを見ながら調整 */
  }
  *::-ms-backdrop, nav#●●● li a img {
   display: block; line-height: 1; /* line-heightは無くても行けるかも? */
  }
}