2018-06-17

コントロール

不離意の宮（仕事・考察系）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

宿命（運命）の事案が見えるってカッコイイ気がする…！

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

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

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

2018-05-25

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

幻実の宮-物理層（コード系）

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

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

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

<nav id="●●●"><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.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は無くても行けるかも？ */
  }
}

2018-03-29

jQueryで表示切り替え

幻実の宮-物理層（コード系）

n番目のliをクリックすると対応した別セクション（section）の#charactor(n)（nは数字）を表示すると言うのをjQueryで勉強で作ってみました。
オリジナルシナリオのキャラクター紹介のページに使う予定です。

そう言うとかっこいいけど、プロの人から見たら大した事ない上に色々ご指摘があるかもしれません。
（自己責任でお願いします）

＜デモページはサイト調整のため現在非表示＞

各キャラクター紹介のエリアはposition: abosolute;で同じ場所に重ねてdisplay: none;で表示を消してます。
デフォルトとして一番上（最初）のキャラだけ表示。（必要に応じて表示時アニメーション用cssのclassもこのidだけ追加しておく）

─────初期設定
※charactor　と　$beforeID　はコンテンツに合わせて適当な名前に

最初に$beforeIDに#charabtor1を指定（格納）
$beforeIDはクリックされた時、１個前にクリックして表示させたidを保管しておく変数

─────liがクリックされる度、

何番目のliがクリックされたかをvar indexで保存して、
１個前に表示させたidをまず非表示（＆表示時アニメーション用cssのclassを削除）に
今クリックで表示されたidを　$beforeID = $('#charactor' + index);　で上書きで保管

その後

（そのidに表示時アニメーション用cssのclass追加）
そのidのセクションを表示

───────────────────

こんな感じで…

$(function() {
  var $beforeID = $('#charactor1'); //初期設定（仮に指定）

////////クリックされたら////////
  $('#charaList li').on('click',function(){

    //何番目のliがクリックされたか
    var index = $('#charaList li').index(this) + 1;

    //$beforeID（１つ前にクリックされたID）を非表示＆アニメーションclass削除
    $beforeID.fadeOut(600);
    $beforeID.removeClass("viewAnimation");

    //今クリックで表示されたIDを保管（上書き）#charactor + index
    $beforeID = $('#charactor' + index);

    //（アニメーションclass追加＆）そのID（$beforeID）を表示
    $beforeID.addClass("viewAnimation");
    $beforeID.fadeIn(1000);
  });
});

<div id="charaViewWrap">
<div id="charaList">
	<ul>
	<li>キャラクター001</li>
	<li>キャラクター002</li>
	<li>キャラクター003</li>
	<li>キャラクター004</li>
	<li>キャラクター005</li>
	</ul>
</div>

<section class="charaView viewAnimation" id="charactor1">
	<h3>キャラクター001</h3>
	<p>説明001-01</p>
	<p>説明001-02
</p>
</section>

<section class="charaView" id="charactor2">
	<h3>キャラクター002</h3>
	<p>説明002-01</p>
	<p>説明002-02
</p>
</section>

<section class="charaView" id="charactor3">
	<h3>キャラクター003</h3>
	<p>説明003-01</p>
	<p>説明003-02
</p>
</section>

<section class="charaView" id="charactor4">
	<h3>キャラクター004</h3>
	<p>説明004-01</p>
	<p>説明004-02
</p>
</section>

<section class="charaView" id="charactor5">
	<h3>キャラクター005</h3>
	<p>説明005-01</p>
	<p>説明005-02
</p>
</section>

</div> <!----- charaVeiwArea end ----->

空の回廊

独りよがりなWebLog（たまにTemporary）

コントロール

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

jQueryで表示切り替え