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 ----->