常連

Webデザインを主にやっていまして、JavaScriptに関してはまだまだ勉強不足な点が多く、進めていく中でわからない箇所が出てきましたので質問させてください。

現在、マルチカラムレイアウトを作っていまして、tableレイアウトやflexboxは使用できない制約下にあります。

使用するのはレガシーブラウザにも対応したfloatを使用したレイアウトになるのですが、ご存知の通り、floatでは中身の要素の高さがそのまま各boxの高さになってしまいますので、下図のようにレイアウトが崩れてしまいます。

![高さが揃っていない状態](bdf6dde0c0dc362022423557442daca4.gif)

そこで、高さ揃えのプラグインなどを用いて調整するわけですが、こちらも制約があり、自作のスクリプトで高さ揃えをしないといけません。

HTMLの構成としては、fixedレイアウトでunorderd list直下にlistが並んでいる状態です。
nカラム構成なのかを取得して、各行ごとの高さを揃えるというスクリプトを、まず以下のように考えました。

```JavaScript
$(function(){
  
  "use strict";
  
  // Get total number of lists
  var numberOfLists = $('li:last-of-type').index() + 1;
  //console.log('numberOfLists:', numberOfLists);
  
  // Get width of parent ul and li
  var widthOfParent = $('li').parent().width(), 
      widthOfLi = $('li').outerWidth();
  //console.log('widthOfLi:', widthOfLi);
  
  // Count how many lists are in one row
  var listsInRow = Math.floor(widthOfParent/widthOfLi);
  //console.log('listsInRow:', listsInRow);
  
  // Count how many lists are in one column
  var listsInColumn = Math.ceil(numberOfLists/listsInRow);
  //console.log('listsInColumn:', listsInColumn);
  
    
  var r = listsInRow, 
      c = listsInColumn;
  
  // Add the same class to lists in one row
  for (var i=1; i<=c; i++) {
    $('li:nth-of-type('+'-n'+(i*r)+')').addClass('equal_height--'+i);
    for (var j=1; j<=c; j++) {
      for (var k=1; k<c; k++) {
        $('.equal_height--'+j).removeClass('equal_height--'+(j+k));
      }
    }
  }  
  
  
  // Give each class the same height
  var biggestHeight_1 = 0, 
      biggestHeight_2 = 0, 
      biggestHeight_3 = 0;  

  $('.equal_height--1').each(function(){  
    if($(this).height() > biggestHeight_1){    
      biggestHeight_1 = $(this).height();  
    }  
  });  
  $('.equal_height--1').height(biggestHeight_1); 
  
  $('.equal_height--2').each(function(){  
    if($(this).height() > biggestHeight_2){    
      biggestHeight_2 = $(this).height();  
    }  
  });  
  $('.equal_height--2').height(biggestHeight_2); 
  
  $('.equal_height--3').each(function(){  
    if($(this).height() > biggestHeight_3){    
      biggestHeight_3 = $(this).height();  
    }  
  });  
  $('.equal_height--3').height(biggestHeight_3); 
  

  // Failed pattern 3
//   var biggestHeights = [], 
//       equal_heights = [];
//   for (var m=1; m<=c; m++) {
//     biggestHeights.push('biggestHeight_'+m);
//     equal_heights.push('.equal_height--'+m);
//   }
//   console.log(biggestHeights,equal_heights);
  
//   $.each($(equal_heights), function(){
//     for (var n=1; n<=c; n++) {
//       if($(this).height() > biggestHeights[n]){
//         biggestHeights[n] = $(this).height();
//       }
//       $(equal_heights).height(biggestHeights[n]);
//     }
//   });  
 
  
  // Failed pattern 2
//   var biggestHeight = 'biggestHeight_', 
//       arr = [], 
//       maxArr = []; 
//   for (var m=0; m<c; m++) {
//     arr = biggestHeight + String(m);
//     //console.log(arr);
//     $('.equal_height--'+(m+1)).height();
//   }
  

  // Failed pattern 1  
//   var biggestHeight = 0, 
//       arr = [], 
//       maxArr = [];
//   for (var m=1; m<=c; m++) {
//     for (var n=1; n<=r; n++) {
//       arr[m-1][m+n-2] = $('.equal_height--'+m+':nth-of-type('+n+')').height();
//       //$('.wrap').append('<p>'+arr[m-1][m+n-2]+'</p>');
//     }
//   }
//   $('.wrap').append('<p>'+arr[0]+'</p>');
//   for (var p=0; p<c; p++) {
//     maxArr[p] = Math.max(arr[p]);
//   }
  
//   for (var q=1; q<=c; q++) {
//     $('.equal_height--'+q).height(maxArr[q]);
//   } 
  
  
});
```

各行ごとに同じクラス名を割り当てて、その中で比較をし、一番高い高さを、同じ行の中の要素全てに適用するという設計で、下図のように上手く揃ってくれたのですが、

![高さが揃っている状態](0e7f71a5c8edf54271e61d9b585d0c9f.gif)

最後の各クラスごとに高さ揃えをするというコード（// Give each class the same heightの下）を上手くまとめることができません。

全体的な設計やコードの書き方も含めて、ご教授いただけると幸いです。

ご参考までに、HTMLとCSSは下記のような感じです。

```HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
	<div class="wrap">
       <ul>
          <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit.</li>
          <li>Lorem ipsum dolor sit amet, no vel aliquid singulis, vix ex paulo choro. Facilisis concludaturque per eu, ad eius dolorem deleniti sed, quas detraxit et vel. At novum platonem sit. Qui eros timeam percipit te, possit mnesarchum ne mel. Et est iisque legendos,</li>
          <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li>
          <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li>
          <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea.</li>
          <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
          <li>Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li>
          <li>Vocent evertitur te has, exerci impetus ullamcorper ut sit. Has nulla mazim at, est harum molestie ei, vim et corpora deleniti consequuntur. Elit atqui nostrum ad nam, ad sententiae adipiscing eum. Electram petentium laboramus his ut, malis inani voluptaria id est. Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
          <li>Doctus phaedrum id est, pro lorem intellegam ut. Dicat deleniti instructior mel ei. Debet oratio tacimates vim ea, te pri rebum choro, scaevola volutpat omittantur ne nec. Natum eirmod facilisis mel in, porro appetere disputationi eu pri.</li>
          <li>Minim ridens duo in, ut his nibh albucius definitionem, id vis essent mollis interesset. Probo graece te cum.</li>
          <li>No sit semper maiorum, nibh nominati ei vim. Pro unum liber conceptam ut. No invidunt perfecto indoctum pri, ex falli mundi duo, esse fugit ea est. Mel ei ipsum aeterno bonorum, solum illud honestatis te nam, viderer intellegat et mea. Id quo porro alterum. Ne mea purto case. Quod nonumes corpora et sed, te quod fugit pri. Cu sea quis purto decore, ad iusto tation sed, iriure menandri honestatis te usu.</li>
          <li>Cu iuvaret volumus detracto eos, altera accusam eos ei, te falli suscipit comprehensam eam. Has ea graeci consequat, ex assum ponderum consetetur ius, electram iudicabit definitionem mea in.</li>
      </ul>
        
    	
    </div>
</body>
</html>
```

```SCSS
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);

$col-4: 960px;
$col-3: 725px;
$col-2: 530px;
$padding-wrap: 20px;

$width-li: 215px;
$padding-li: 10px;

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: lightgray;
}

.wrap {
  width: $col-4;
  padding: $padding-wrap;
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0 0 1px #ccc;
}

ul {
  overflow: hidden;
  list-style: none;
  & li {
    width: $width-li;
    padding: $padding-li;
    margin-bottom: 20px;
    float: left;
    color: #fff;
    &:not(:nth-of-type(4n)) {
      margin-right: 20px;
    }  // 3col: 3n, 2col: 2n
    &:nth-of-type(8n+1) {
      background-color: tomato;
    }
    &:nth-of-type(8n+2) {
      background-color: orange;
    }
    &:nth-of-type(8n+3) {
      background-color: desaturate(yellow, 30%);
    }
    &:nth-of-type(8n+4) {
      background-color: lighten(green, 10%);
    }
    &:nth-of-type(8n+5) {
      background-color: blue;
    }
    &:nth-of-type(8n+6) {
      background-color: navy;
    }
    &:nth-of-type(8n+7) {
      background-color: purple;
    }
    &:nth-of-type(8n) {
      background-color: gray;
    }
  }
}
```

どうぞよろしくお願いいたします。

フロートの高さ揃えについて

お世話になっております。
wordpress構築初心者でphpをうまく理解できず、困っております。。。

###前提・実現したいこと
現在、トップページに下記内容を表示したくWPcodexを読みながらコードを書いていますが、苦戦しております。
コードはどういった書き方が適切なのか、是非ご教示いただけたらと思います。

◎トップページに表示したい内容
・固定ページの一部(リンク/サムネイル)
固定ページは、page-service.phpのテンプレートを作成し、slugnameで管理しています。
今回、表示したい固定ページはデザインが共有の[service1][service2]...などです。



###分らない内容

・固定ページのurlを取得してslugnameで判定してループ表示させるには・・・？
こちらのサイトにたどり着きましたが、どう活用したら良いか分りません。
([http://wp2.trojanbear.net/1162.html](http://wp2.trojanbear.net/1162.html))
([http://dcs-webdesign.lolipop.jp/wordpress/1799.html](http://dcs-webdesign.lolipop.jp/wordpress/1799.html))

###ソースコード
```php
<section>
<?php 
$page_id = get_page_by_path( 'service1','service2','service6' );
$page = get_post( $page_id );
?>

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
<div class="squere-card">
    <div class="card__title" style="background:url('<?php echo $page->the_post_thumbnail_url; ?>')>
        <div class="card__title-text"><?php echo $page->the_title; ?></div>
    </div>
</div>
    <?php endwhile; ?>
<?php endif; ?>

<?php wp_reset_query();?>


```


以上です。
稚拙な質問ですが、ご回答いただけたら幸いです。

wordpress構文について。固定ページurlを取得してslugnameを判定するには？

お世話になります。

現在、HTMLのデザインをしているのですが、今一つ腑に落ちない、理解に違和感がある部分があり、相談させて頂きます。

現在、CSSでは
.PCbutton{
	position: absolute;
	top: 256px;
	left: 460px;
	width: 90px;
	color: #000000;
	font-size: 28px;
	text-align: center;
	font-family: "ＭＳ Pゴシック";
	background-color: transparent;
}
と設定したのですが、div classで、
<div class="PCbutton"> <input type="button" onclick="location.href='リンク先url'"value="ボタン" style="font-size: 21px"/></div>

と、記述しています。
デザインはCSSでやるべし、ということを聞いた記憶があったので、div styleをの部分を削除したり、CSSに持っていったりするとボタンのサイズが小さくなります。
そもそもで考えれば、styleの部分をCSSに持っていってボタンが小さくなるのはフォントサイズがCSSの記述より小さいので納得できるのですが、その小さいdiv styleを削除しても
ボタンが小さくなるのが理解できません。
どういうことなのでしょうか？
製作はMS Expression web4 で、ブラウザはWindows7Pro-32 IE11です。

HTMLのCSSとdiv class内の styleの関係

下記サイトのハンバーガーボタンを導入したのですが、
SPANでできている、ボーダーに下向きのシャドウを三つつけることができません。

spanはインライン要素ですが、box、textどちらのシャドウをつけるべきでしょうか？



2. 中央のラインが消え、上下のラインが回転しながらクローズボタンにを採用。
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

・また、レスポンシブなので、サイズを小さくしたかったのですが、線が二本線になってしまいます。

下記サイトのハンバーガーボタンを導入したのですが、 SPANでできている、ボーダーに下向きのシャドウを三つつけることができません。

■ 現状

いわゆる高級ペライチと言われるサイトを現在作成しておりまして、ヘッダーメニューの項目をクリックすると、同ページ内のセクションページに遷移するように設定されてます。

■ 課題

![イメージ説明](de841f8eeb986d71afc79668b8a0fb9a.png)

クリック後はヘッダーメニューの下にセクションページが反映されるようにしたいのですが、固定されたクリック後に固定されたヘッダーメニューと遷移先セクションが重なってしまうという問題が発生しています。

■ 対策してみた事例

ヘッダーメニューのclassにposition:static、セクションのclassにposition:relativeを入れてみたり、セクションのclassにpadding-top:65px（ヘッダーメニューの高さ）と指定してみたりしたのですが、理想の形にはいかず。。。

どなたかご教授いただけますと幸いです。
宜しくお願いいたします。

ヘッダーメニューをクリックした後、固定されたヘッダーメニューと遷移先ページが重なってしまう

Webの画面上にあるイメージをクリックすることで、POSTでsubmitする処理ですが、IE11では処理を行っているタブとは別に新しいタブが開いてしまします。
新旧のタブではそれぞれPOSTで遷移した内容が表示されます（画面上に表示される内容は同一です）が、それぞれ別にリクエストが発行されているため、チェックのため埋め込んだのワンタイムパスワードは異なっています。

Chromeでは、IEとは異なり新しいタブは開かず同一タブ内で画面が遷移する（これが想定している動きです）のですが、なぜIEでは別の新しいタブを開いてしますのか、また新しいタブを開くことは規制できるか、教えてください

```JavaScript

// 登録内容の確認・変更処理本体
var goToKc0100 = function(p1, p2) {
	$('form')
	.attr('action', '/mypage/userupdate')
	.append('<input type="hidden" name="param1" value="' + p1 + '" />')
	.append('<input type="hidden" name="param2" value="' + p2 + '" />')
	.submit();
};

// 登録内容の確認・変更処理イベント受付部
$('.s1 a').click(function () {
	var p1 = document.getElementById('data1').value;
	var p2 = document.getElementById('data2').value;
	goToKc0100(p1, p2);
	return false;
});
```
---
追記：
ローカルの開発環境ではこの現象は再現しないのですが、商用と商用の確認のためのステージング環境では再現します。
開発環境との違いは、プロトコルがHTTPSになっていることです。

JavaScriptによるsubmit()で新しいタブが開くことを規制したい

簡単なCMSを構築しています。
その中で、1つのformにactionを2つ使いたいと思っています。
1つはフォームから入力した記事をデータベースに登録するスクリプト、もう1つはプレビュー画面を表示するスクリプトです。

2つのactionを指定するにはどうすればよいでしょうか？

教えていただけると幸いです。

よろしくお願い致します。

1つのフォームで２つのactionを使うには

お世話になります。

よく正規表現で出てくる特殊な文字行頭（^）と行末（$）ですが、よくどっちがどっちを意味していたのか忘れてしまいます。
というのも記号自体が何かを連想する形になっていないためです。
例えばエスケープシーケンスならば
「\n」← あぁnewlineだからかな？とか
「\t」なら タブ文字だからかな？
といった具合に、なぜその文字がそうなのかが略称で想像できます。

行頭（^）行末（$）の記号には何か意味があるのでしょうか？

正規表現で使う行頭行末の記号の由来

Limechat2用にスクリプト作成をしているのですが
スクリプトコンソールにてエラーが出てしまい、原因がわかりません。
どなたかご教授お願いします。

エラー内容
')' がありません。 (Microsoft JScript コンパイル エラー line 4)

プログラム
var interval = 0*60*60*1000 + 0*60*1000 + 2*1000; //時間+分+秒
function event::onChannelText(prefix, channel, text){
  if(text.match(/^てすと$/)){
    sendRaw("privmsg" + channel + " " + "数秒後ログを表示します");
    setTimeout(showTime, interval);
  }
}

function showTime(){
  sendRaw("privmsg" + '#テスト部屋' + " " + "時間経過");
}

スクリプト作成でのエラーで困っています。

###前提・実現したいこと
レスポンシブで一度は問題なく表示されていたサイト

###発生している問題・エラーメッセージ
スマホで表示された時に、レスポンシブ対応によりスマホ用に表示されるはずのサイトが、PC表示になり、さらに、スライダー画像部分も隠れて表示されるはずの画像が一行3枚横並びに表示されています。
そのスライダー部分だけ幅が広く表示され、

上記の記載を訂正いたします。
PC表示になりではなく、スマホ用に表示になっているのですが、スライダー部分が横一行に4枚画像が並んだ状態で始まります。
サイト読み込み時は、一瞬正常にそれぞれのバナーなど100％表示されますが、その後すぐスライダー部分だけが横並び画像が見える状態になります。

スライダー以外の部分は、縮小されて左寄せで表示されています。



###ソースコード

http://sake-kinoi.com/

追記させていただきます。

もともと問題なかった状態は、スマホ最適化された表示になっていました。
ソースの変更は行っていないです。

###補足情報(言語/FW/ツール等のバージョンなど)

レスポンシブで一度は問題なくスマホ表示されていたサイトを元通りにしたいです(^^♪

POSTした値をセッションに追加して配列にしています。
POSTした値と同じ[key]があったときは上書きしたいのですが、何度やってもうまく行きません。
どのようにしたら上書きするでしょうか。

```PHP
    session_start();

    //セッション変数「cart」が未設定の場合は空の配列に初期化
    if (!isset($_SESSION['item'])) {
        $_SESSION['item'][] = array();
    } else if (is_string($_SESSION['item'])) {
        //セッション変数「item」に文字列が存在していれば配列セッションitemを代入
        $_SESSION['item'][] = array($_SESSION['item']);
    }
    sort($_SESSION['item']);
    $key = in_array($_SESSION['item'][ $_POST['key'] ]);

//セッション変数内にPOSTで送られてきたidと同じものが無かった場合の処理
    if ($key) {
        if (isset($_SESSION['item']['type'])) {
            $_SESSION['item']['type'] = $_POST['type'];

            if (isset($_SESSION['item']['days'])) {
                $_SESSION['item']['days'] = $_POST['days'];

            }
        }
    }else{
        if (isset($_POST['key'])) {
            if (isset($_POST['type'])) {
                if (isset($_POST['day'])) {
                    if (isset($_POST['price'])) {
                        if (isset($_POST['days'])) {
                            //送られてきたデータを配列に格納
                            $item = array('key'    => $_POST['key'],
                                          'type'   => $_POST['type'],
                                          'day' => $_POST['day'],
                                          'price'  => $_POST['price'],
                                          'days'     => $_POST['days']);
                        }
                    }
                }
            }
        } else {
            echo = 'no item';   //何もカートに入っていません
        }
    }
//セッション変数「item」に配列の中身を追加
    if (isset($item)) {
        $_SESSION['item'][] = $item;
    };

    $item = $_SESSION['item'];
    $item = array_filter($item);
```
セッションは配列にして受渡ししています。
$item = $_SESSION['item']
```PHP
Array ( 
[1] => Array ( [key] => 1450669337 [type] => 4 [dayset] => 20151225 [price] => 1,000 [days] => 1 )
[2] => Array ( [key] => 1450669517 [type] => 6 [dayset] => 20151231 [price] => 3,000 [days] => 3 ) )

```

セッションの配列を上書きしてくれない

検索ボックス(google)で「jquery 現在の要素」と入力すると「jquery 現在の要素を取得」と出てきます。
この現在の要素とは、フォーカスされていたりオンマウスされていたりする要素という認識で合っておりますか。

「現在の要素」という言葉の意味

失礼します。

入力フォームが空白で検索ボタンを押下すると、リクエストパラメーターにインプットタグの「name」が付与されて検索をかけてエラーが起きてしまいます。

テキストボックスが無入力の場合はインプットタグごとパラメーターから外したいのですが何か方法をご存知の方宜しく御願いします。