常連

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

自己紹介

有名人

表題の件、同じ質問が別にあり重複して申し訳ございませんが、
うまく実装できず、教えていただけますでしょうか。



下記のjsを現在実装しているのですが、
各section毎に高さが違う場合、ナビゲーションのカレントが中途半端な位置で
切り替わってしまいます。

こちらのソースを拝見すると各sectionにかっちり高さが指定されている上で
成立しているかと思うのですが。。。
https://www.tam-tam.co.jp/tipsnote/javascript/post4996.html



```HTML
	<div id="header">
		<div class="inner">
			<ul id="gnav">
				<li><a href="#contents01" class="current">コンテンツA</a></li>
				<li><a href="#contents02">コンテンツB</a></li>
				<li><a href="#contents03">コンテンツC</a></li>
				<li><a href="#contents04">コンテンツD</a></li>
			</ul>
		</div>
	</div>
	<div id="contents">
		<div class="inner">
			<div id="contents01">
				<h2>コンテンツA</h2>
				コンテンツAの領域
			</div>
			<div id="contents02">
				<h2>コンテンツB</h2>
				コンテンツBの領域
			</div>
			<div id="contents03">
				<h2>コンテンツC</h2>
				コンテンツCの領域
			</div>
			<div id="contents04">
				<h2>コンテンツD</h2>
				コンテンツDの領域
			</div>
		</div>
	</div>
```
```css
@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}
li{
	list-style-type: none;
}
#page {
	position: relative;
	width: 100%;
}
.inner {
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	padding: 20px 0;
	text-align: center;
	background: #dddddd;
}
#header #gnav {
	float: right;
}
#header #gnav li {
	float: left;
	padding-left: 20px;
}
#header #gnav li a {
	color: #666666;
	text-decoration: none;
}
#header #gnav li a.current {
	color: #000000;
	text-decoration: underline;
}
#contents {
	position: relative;
	z-index: 100;
	width: 100%;
	background: #bbbbbb;
}
#contents .inner div {
	height: 1000px;
	padding-top: 70px;
}
#contents .inner div:nth-child(even) {
	background: #777777;
}
#contents .inner div:nth-child(odd) {
	background: #999999;
}
```
```js
$(function() {
    // ナビゲーションのリンクを指定
   var navLink = $('#header #gnav li a');
 
    // 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく
   var contentsArr = new Array();
  for (var i = 0; i < navLink.length; i++) {
       // コンテンツのIDを取得
      var targetContents = navLink.eq(i).attr('href');
      // ページ内リンクでないナビゲーションが含まれている場合は除外する
      if(targetContents.charAt(0) == '#') {
         // ページ上部からコンテンツの開始位置までの距離を取得
            var targetContentsTop = $(targetContents).offset().top;
         // ページ上部からコンテンツの終了位置までの距離を取得
            var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;
         // 配列に格納
            contentsArr[i] = [targetContentsTop, targetContentsBottom]
      }
   };
 
  // 現在地をチェックする
   function currentCheck() {
       // 現在のスクロール位置を取得
        var windowScrolltop = $(window).scrollTop();
        for (var i = 0; i < contentsArr.length; i++) {
           // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
          if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
                // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
               navLink.removeClass('current');
               navLink.eq(i).addClass('current');
                i == contentsArr.length;
            }
       };
  }
 
   // ページ読み込み時とスクロール時に、現在地をチェックする
  $(window).on('load scroll', function() {
      currentCheck();
 });
 
 // ナビゲーションをクリックした時のスムーズスクロール
    navLink.click(function() {
      $('html,body').animate({
          scrollTop: $($(this).attr('href')).offset().top
       }, 300);
        return false;
   })
});
```

各section毎に高さが違う場合でも
カレントが正しい位置で表示されるようにしたいです！
ご教示お願いいたします！

シングルページでスクロールした際にナビゲーションに現在地を表示する

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。

Windows10でxamppで設定したWordpress、あるテーマの中のファイル「style.css」を書き換えてアレンジしたのですが、同じテーマで実際のサーバーへ転送（勿論同じ場所です。）したり、サーバーのファイルを直接編集したりしても結果が仮想環境の様に変わりません。

テーマのカスタマイズメニューにはメインタイトルのフォント変更が出来ないので、「style.css」を書き換えてアレンジしたいのですが、仮想環境では変わるのに実際に公開するサーバーで同じ「style.css」を書き換えても変わりません。

同様に、サイドバーのバックの地色変更（テーマのカスタマイズには無い）も「style.css」を書き換えてみましたが、仮想環境では変わりますが実際の環境では変わりません。

実際の環境には他に変更すべき所が有るのでしょうか？
よろしくお願い致します。

Wordpressでローカル仮想環境での設定を実サーバーへ

### 前提・実現したいこと

先日から回答をしていて悩んでいることがあります
「**回答で書くコードは質問者の理解度に合わせるべきか**」
です。

### 発生している問題・エラーメッセージ
このサービスを利用されている皆さんであれば
質問の内容を見ていればおおよそのスキルのレベルはわかると思います。
質問を受けて「あ、この人基本的なことからわかってないな」というとき
（1）その人のレベルに合わせて平易な、もしくは質問のコードに近い形で動くように書く
（2）目的を考え理解し、それに合わせて適切なコードを書く
どちらがいいか迷っています

### 該当のソースコード
もちろん（2）を書いてそのまま質問者が使って問題なければよいのですが、質問した内容のどこが悪いかわかるようにしないと応用が効かないし、スキルアップにならない気がしています。

### 試したこと
0. まずは質問者のコードから動かない要因を探し、なるべく元の形に近い動くコードを記載。
0. 回答にどこがどう違うか、考え方はこうだという解説をつける

### 補足情報（FW/ツールのバージョンなど）
このやり方が最終的にはベスト、にはなりえないので難しいですが、
このサービスの利用者として、より良い形になってほしいし
利用しやすくしたいのでご協力頂けますと助かります。

回答で書くコードは質問者の理解度に合わせるべきか

フロントエンドの必要性がよく理解できません。

Python(flask)やRuby(Ruby on Rails)などでWebアプリを開発してきました。ですが、その間、一度もフロントエンド（javascript)の需要を感じませんでした。

一体、いつ、どのように必要に迫られるのでしょうか？

決して、フロントエンドをdisるわけではないです。

むしろ、Node.jsが登場して、フロントもバッグもjavascriptで書けると知って、すごく興味があります。

ただ、React.jsやAngularを使ってまで（勉強してまで）、フロンド側に何か処理をさせなければならないのでしょうか？アクションごとにページ遷移してはいけないのでしょうか？

React.js, Angular, Vue.js, jQueryとさまざまなフレームワーク？ライブラリ？がありますが、どう使い分けるのでしょうか？そもそも、それらに頼るときとは、どのようなときなのでしょうか？


追記
回答ありがとうございました。こんなにたくさんの回答が得られるとは思っていませんでした。
非同期通信の例をきいて、なるほどと思いました。
本当に、ありがとうございました。

フロントエンドの必要性について

つまらない事なのですが,少し疑問に思ったので質問させて下さい.

WebページのソースをGitを利用してバージョン管理しようと思うのですが,ローカルリポジトリを何処に作成するのが一般的なのか悩んでいます.

具体的にはApacheのドキュメントルートをそのままローカルリポジトリとして指定してやるのが良いのか,それとも一度別のディレクトリをローカルリポジトリとして指定して必要に応じてドキュメントルートのファイルを更新するのが良いのかです.

一般的には後者だとは思うのですが,皆さんどの様にされているかお教えいただけないでしょうか？

Webサイトのバージョン管理について

よろしくお願いいたします。

現在、レスポンシブ対応のweb画面を製作中です。
レイアウトについて、有職者の皆様からお知恵やアドバイス、実現方法をご教示いただきたく存じます。

**下記画像が、実現したいレイアウト**（デザイン原案）です。
主に、カラーの楕円でマークしている部分を実現させるコーディングがうまくできません。
![イメージ説明](80e4ffee44848df4a73f7997352f6752.jpeg)



私が作ったものは以下です。
デザイン原案通りのレイアウト表示にするために試行錯誤していますが、現在のところうまくできていません。
また、**可能であればレスポンシブでスマホ画面にした際は、アイコン部分（赤楕円内）が、5つのpanelの一番下に並ぶようにもしたい**です…。
（試作段階なので原案と背景色やフォントが違う事をご了承ください。
また、navbarをfixにしているので、全画面をキャプチャする際にtop（背景がブルーの部分）がデザイン原案より短く見えています。）
![イメージ説明](8917970b32a19f6583ba5839e21885df.png)
黄色で囲ったテキスト部分、赤い楕円で囲ったアイコンの部分ですが、表示には全てpanelを使用しています。
フリーハンドのグレーで線を引いている部分が、panelの大体の領域です。
**デザイン原案にレイアウトを近づける為、アイコン部分（赤楕円内）は
position:relative;
bottom:100px;
の処理をCSSでして、TOP部分にかかるようにしています。**
ソースは以下です。
■html（Contents部分のみ記載）
```
<div id="content">
	<div class="container">
		<div class="row">

			<div  class="col-md-4 col-sm-4 item-1">
                <div class="panel panel-deafult">
         <div class="panel-header">HOGEHOGEHOGE</div>
                    <div class="panel-body">

                        <div>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                        </div>
                    </div>
                </div>
			</div>
			<div  class="col-md-4 col-sm-4 item-2 hidden-xs">
				<div class="img-box">   
<img src="images/7a660987-b8d8-478e-bf14-f199dd9e9c70.png" class="box-img img-responsive center-block" alt="">
            	</div>
            </div>
			<div  class="col-md-4 col-sm-4 item-3">
         <div class="panel panel-deafult">
                    <div class="panel-header">HOGEHOGE</div>
                    <div class="panel-body">
                        <div>
                           <p>hogehogehogehogehogehoge </p>
                        </div>
                    </div>
                </div>
			</div>
				<div  class="col-md-6 col-sm-6 item-4">
                <div class="panel panel-deafult">
                    <div class="panel-header">マルチデバイス対応</div>
                    <div class="panel-body">

                        <div>
                           <p>hogehogehogeho</p>
                           <p>hogehogehogehoge </p>
                           <p>hogehogehogehogehoge </p>
                           <p>hogehogehogehogehogehoge</p>
                        </div>
                    </div>
                </div>
			</div>
				<div  class="col-md-6 col-sm-6 item-5">    
 <div class="panel panel-deafult">
                    <div class="panel-header">HOGEHOGEHOGE</div>
                    <div class="panel-body">
                        <div>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                           <p>特徴１の説明文特徴１の説明文 </p>
                        </div>
                    </div>
                </div>
			</div>
		</div>
	</div>

</div>




```

■CSS（Contents部分のみ記載）
```/* CONTENT */
.panel-header{
    text-align: center;
    padding-top: 10px;
    height: 40px;
}

.panel-body{
     text-align: center;
}
img.box-img{
	width:291.33px;
	height:auto;

	position:relative;
	bottom:100px;
}

```
私のやり方では、デザイン原案のように
> **・アイコン部分（赤楕円内）を原案のような位置に配置した上で**
>         **↓**
> **・アイコン部分（赤楕円内）を真ん中にして4つのテキストの固まり（黄色楕円内）をアイコンの長さにあわせて並行に配置したい**

のですが、どのような方法を用いれば実現できるでしょうか。
**分からないので、とりあえず前述のようにpanelを使用して作ってみましたが、何か良い方法がないか、皆様のお知恵をお貸しください。**
どうぞよろしくお願いいたします。

**サンプルコード等**、具体的なご教示を頂ければ尚幸いです。
どうぞよろしくお願いいたします。

レスポンシブ対応web画面　レイアウト　画像をTOP画面とコンテンツ部分にかかるように表記したい

今までjavaについて勉強してきましたが、javascriptについても勉強してみようと思い、いろいろなサイトを見て回ってきましたが、どこのサイトを見ても"HTMLの知識は必須"と書かれています。
何故、javascriptの勉強をするのにhtmlの知識は必須なのでしょうか？どの程度まで理解できていればjavascriptについて学び始められるようになるでしょうか？

こちらはちょっとおまけの質問ですが、javascriptを初心者から勉強する上で参考になるサイト、もしくは書籍等紹介していただけると幸いです。

[追記]
たくさんの返答読ませていただきました。javascriptとhtmlの関係性、そして今は必ずしもそれが必須とは言えないということが理解できました。
自分のきっかけは小さなことですが、"googleスプレッドシート"のマクロがjavascriptベースで書けるということで興味を持ちました。
さらに、エンジニアとして(NWエンジニアですが・・・)そういったことができるようになるのは必ずしも損にならないと考えたので始めてみようと思いました。
自分の質問が言葉足りずの部分が多かったので、少しの間この質問を残し回答の評価が高いものをBAとしたいと思います。
皆様わかりやすい回答本当にありがとうございました。

Javascriptを勉強する際に何故htmlの知識が必要か？

スマホページを制作しているのですが、レンダリングが間に合っていないのか、一部が真っ白になってしまいます。
ソースを確認すると、読み込み自体は行われており、表示がされていないようです。

縦長のページで、ファーストビューの部分は表示されるのですが、高速で下の方へスクロールすると、真っ白になります。
真っ白な部分を長押し（テキストを選択）すると、選択した部分が表示されるという具合です。

![サンプル](0a8a6cfd6fc736b0a7a806eb6fe9e509.png)
左側が正しい表示、右側が真っ白な部分を長押ししてテキストを一部表示させた状態になります。

▼再現した環境
OS：Android 5.0以上
ブラウザ：Android Chrome

わかりずらくて申し訳ないですが、原因等わかる方いらっしゃいましたら、ご教示いただけますと幸いです。

Android5.0以上のスマートフォンにおいて、ページが一部表示されない

お世話になります。

HTMLファイルをiphone上で開くことはできますか？
モックアップをサーバ等にアップせずに確認を行いたいです。

よろしくお願い致します。

作成したHTMLファイルをIphoneで開きたい

###前提・実現したいこと
前提）
 異なる2つのwebページとして AAA.htmlとBBB.htmlがあるとします。
 それらのWebページをフリック操作で遷移したいのですが、その実現方法が分かりません


###調べたこと、試してみたこと
<div></div>でくくった中のことであるならば、
* swiper.js
* flickity
* http://blow-in.net/blog/entry-1433.html

実現したいのは異なるwebページ間の移動なので動きはあっているが構成が違うという感じです。

###補足情報(そもそも分かっていないこと)
 可能であればgithub.ioなどにポンとアップロードしてその挙動を確認できるようにしたいです。
 もしサーバ側の実装などが要るのであれば、その方法でも教えていただきたいです。

 Angular.jsなどさえあれば、github.ioにポンとAddして動かせるとかいうのであれば理想的です。

以上、よろしくお願いします。

異なる2つのhtmlをフリック操作で移動

CSSのガイドラインをつくるにあたって、
いろいろ調べている際に以下のガイド見つけました。

[Airbnb CSS / Sass スタイルガイド](https://github.com/nao215/css-style-guide)

ここで以下のようなことが書かれていました。

> ボーダーのないスタイルにはnoneの代わりに0を使うこと。

要するに以下のようにある要素のボーダーを消したいときに、`border: 0;`を推奨すると言っています。

```css
.box {
    border: none; //NG
    border: 0;  //OK
}
```

## 問題

なぜこのスタイルガイドは`border: 0;`を推奨しているのでしょうか。
`border: none;`と`border: 0;`の明確な違い(メリット・デメリット)は何なのでしょうか？

初歩的な質問かと思いますがどうぞよろしくお願いします。

## 調べたこと

以下のページなどで
> border:0 は border-width, border:none は border-style

であることなどはわかったのですが、CSSの運用においてそれぞれのメリット・デメリットまではよくわかりませんでした。

参考：[border:0 と border:none は何が違うのか](http://unformedbuilding.com/articles/border-0-or-border-none/)

border: 0;とborder: none;のそれぞれのメリットは？

イベントハンドラの中で使用するthisとeventオブジェクトの違いがわかりません。
以下のコードでeventオブジェクトとthisを出力したところ同じものが出力されました。
thisとeventの違いを教えてください。

```javascript
$(function() {
  $("form").on("submit", function(e) {
    console.log("送信ボタンが押されました");
    console.log(this);
    console.log("====================");
    console.log(e.target);
    e.preventDefault();
  });
});
```

thisとイベントオブジェクトについて

プロジェクト進行(構成?)について皆様のご意見を聞かせていただきたいです。

私の会社ではデザイナ、HTMLコーダ、プログラマが完全に分業になっています。

それぞれの役割は
**デザイナ**
画面の設計、WFの作成

**HTMLコーダ**
デザイナが作成したWFをHTML&CSSへ落とす(JavaScriptはほぼ実装せず)
Ajaxにより更新が入るような画面は更新前と更新後で2つのHTMLファイルを作成
ただし、BootstrapやMaterializecssなどCSSフレームワークとJSがまとまっているものは一部使用

**プログラマ**
サーバサイドのアプリ作成。HTMLコーダが作成したHTMLをレンダリング
さらに、デザイナが考案した画面の動作をJavaScriptで実現(Ajaxの画面更新や、アニメーションなど

サーバサイドではSpringBootを使用しており、HTMLレンダリング時のテンプレートエンジンはThymeleafを使用(プロジェクトによってはVelocityだったりも)

#### 問題
問題になっているのが、HTMLコーダが作成したHTMLをプログラマがそのまま使用できないということです。
デザイン変更でDOM構造が変わった場合など
HTMLコーダはダミーの値やリストの繰り返し要素などが入ったHTMLを成果物として持ってくるのですが

実際にプログラマが扱う場合、ダミー部分を削除したのちに、繰り返し部分はサーバサイドでテンプレート化し
Ajaxで更新する部分は外部ファイルに切り出したりしています。

デザインの更新部分の差分を目視で確認し、分割したテンプレートへ反映することとなり
下手するとHTMLコーダが作ったダミー要素が残っていたり、作成したものの反映漏れが発生したりもしています。
また、DOMの変更により実装済み部分のJavaScriptが動かなくなったりしたりもします。

皆さんのプロジェクトではHTMLコーダとプログラマとの分業の際はどのような手法を取っているのでしょうか。
このような状態はJavaだからというわけでくRubyやPHP、Nodeなどでも起こりうる問題だと思います。
「上記プロジェクト進行のこの部分がおかしい！」「◯◯に問題がある」など現状の問題点の指摘や
「こう手法を取ったらうまく行った」などの経験など皆様ご意見を聞かせいただきたいです。

どうかよろしくお願いします。

HTMLコーダとプログラマの仕事の進め方

###前提・実現したいこと
複数行で文末に「...」を実装したい。
レスポンシブで横幅が可変します。
縦幅は固定で指定しました。

https://teratail.com/questions/38076
を参考に、エリア末尾に::after要素で目隠しをほどこし、
content:"..."で「...」を与えてやっています。

が、文字数を計っているわけではないので、
テキストが長かろうが短かろうが、エリアが余っていようが満タンになっていようが、
常に「...」が表示されている状態です。

これをエリアに対する文字量で出しわけできないかと考えています。

###発生している問題・エラーメッセージ
レスポンシブなので、横幅を小さくすると、当然テキストエリアも小さくなる。
その場合は::after要素の「...」がイキイキととても活躍している。

が、逆にウィンドウを大きくすると、広々としたテキストエリアに対して
テキスト量は十分に収まっているにも関わらず、
申し訳なさそうに右端に「...」が鎮座しているという状況。

###該当のソースコード
```HTML
<div class="newsBox cf">
	<dl>
		<dt>
			<h6>新着情報</h6>
			<img src="images/news.jpg" alt="news">
		</dt>
		<dd>
			<p class="newsDate">2016年6月66日</p>
			<p class="newsTitle">ニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキストニュースタイトルテキスト</p>
			<p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
			<div class="more">
				<a href="newsdetail.html">詳しく見る</a>
			</div>
		</dd>
	</dl>
	<dl>
		<dt>
			<h6>新着情報</h6>
			<img src="images/news.jpg" alt="news">
		</dt>
		<dd>
			<p class="newsDate">2016年6月66日</p>
			<p class="newsTitle">ニュースタイトルテキスト<br>ニュースタイトルテキストテキスト</p>
			<p class="newsTxt">テキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
			<div class="more">
				<a href="newsdetail.html">詳しく見る</a>
			</div>
		</dd>
	</dl>
	
</div>

```
```CSS
/*newsBox*/
.newsBox { width: 100%; margin-bottom: 40px; overflow: hidden;}
.newsBox dl { float: left; width: 47.5%; margin: 0 5% 40px 0;}
.newsBox dl:nth-child(even) { margin-right: 0;}
.newsBox dl dt { position: relative; display: block; width: 100px; height: auto; min-height: 110px;}
.newsBox dl dt h6 { position: absolute; left: 0; top: 0; width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: rgba(169, 146, 92, 1); font-size: 16px; color: #fff;}
.newsBox dl dt img { position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.newsBox dl dd { width: 100%; background: rgba(228,198,124,0.1); padding: 40px 20px; text-align: left;}
.newsBox dl dd .newsDate { font-size: 16px; line-height: 1; margin-bottom: 40px; color: #997726;}
.newsBox dl dd .newsTitle { position: relative; height: 5.5rem;/*3行分*/ font-size: 22px; line-height: 30px; margin-bottom: 30px; overflow: hidden;}
/*★A*/
.newsBox dl dd .newsTitle::after { content: "..."; display: inline-block; position: absolute; top: 63px; right: 0; width: 70px; height: 24px; text-align: right;
	background: -moz-linear-gradient(left,  rgba(252,249,242,0) 0%, rgba(252,249,242,1) 50%, rgba(252,249,242,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%);
	background: linear-gradient(to right,  rgba(252,249,242,0) 0%,rgba(252,249,242,1) 50%,rgba(252,249,242,1) 100%);
}
/*★B*/
.newsBox dl dd .newsTxt { height: 5rem;/*3行分*/ font-size: 16px; margin-bottom: 30px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.newsBox dl dd .more { width: 65%; height: 60px; line-height: 60px; text-align: center; margin: 0 auto; border: 1px solid #997726;}

```

###試したこと
最初、★Bのように-webkit-box; -webkit-box-orient:と-webkit-line-clamp: 3;で複数行の三点リーダを実装しようと考えた。
→けれど現状webkit系のブラウザにしか対応していないという...！

そこで★Aの目隠し＋「...」作戦を敢行。
→可変するテキストエリアのサイズと文字量に応じて表示をコントロールしたい...！

なんとなくjQueryで文字数をカントしてどうこうできそうな気もするのですが、、
var count = $(this).val().length;//←こんな感じのやつ
具体的に何をどうしたらいいのかわかりません。
文字数の制限はPHPが簡単らしいのですが、PHPはまったくわからないので手が出せません。

どうにかなるのかかならないのか、なるとすれば具体的にどうすればいいのか、
どなたかご教授をお願いします...！

複数行で文末に「...」を実装したい（テキストエリア可変アリ）

###前提・実現したいこと
slick.jsのスライダーを内包したタブメニューを作成しています。
レスポンシブで、各タブの要素の高さが可変するのですが、
①タブの切り替えに合わせてコンテンツの高さを取得したいです。
また上下にタブを設置しているので、
②上下のタブのactiveクラスを連動させたいです。
**→②は解決できました。**

どなたか分かる方がいらっしゃいましたら、ご教授よろしくお願いします。
###発生している問題・エラーメッセージ
①タブを切り替えても、最初に表示されているタブコンテンツの高さが保持されてしまう。
②色々試したものの、結局できませんでした。orz
**→②は解決できました。**


###該当のソースコード
```HTML
<div class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

<div id="tabContent">
	<div id="page01" class="mainBodyBox tabBox">
		<h4>ここはtab01コンテンツです。</h4>
		<h5 id="page01_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
	</div>
	<div id="page02" class="mainBodyBox tabBox">
		<h4>ここはtab02コンテンツです。</h4>
		<h5 id="page02_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		<h5 id="page02_2">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		</div>
	</div>
	
</div>

<div id="tabMenu_bottom" class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

```
```javascript
//タブ
$(function(){
	$(window).on('load resize', function(){

		var w = window.innerWidth ? window.innerWidth: $(window).width();
		var x = 767;
		var tabContent_01 = $("#tabContent #page01").outerHeight();
		var tabContent_02 = $("#tabContent #page02").outerHeight();
		var tabContent_03 = $("#tabContent #page03").outerHeight();
		var tabContent_04 = $("#tabContent #page04").outerHeight();
		var tabContent = $("#tabContent .tabBox:visible").outerHeight();

		if (w <= x) {//ウィンドウサイズが767px以下の場合（SP）
			$("#tabContent #page01").css("height", tabContent_01);
			$("#tabContent #page02").css("height", tabContent_02);
			$("#tabContent #page03").css("height", tabContent_03);
			$("#tabContent #page04").css("height", tabContent_04);
			$("#tabContent").css("height", tabContent);//■1

			$(function() {
				$('#tabMenu li a').on('click',function(){
				$("#tabMenu li a").removeClass("tabActive");
				$(this).addClass("tabActive");
				$(".tabBox").css("visibility", "hidden");//■2
				$(".tabBox").css("height", "0px");
				$($(this).attr("href")).css("visibility", "visible");
				$($(this).attr("href")).css("height", "auto");
				$("#tabContent").css("height", tabContent);//■3
					return false;
				});
			})
		}
	});
});

//スライダーslick.js
$('.slide_01').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
	asNavFor: '.thum_01'
});
$('.thum_01').slick({
	slidesToShow: 4,
	slidesToScroll: 1,
	dots: false,
	focusOnSelect: true,
	asNavFor: '.slide_01'
});
//以下、スライダーが複数続きます。
```
```CSS
/*タブ*/
#tabMenu { position: relative; width: 100%; overflow: hidden; height: 40px;}
#tabMenu li { position: absolute; bottom: 0; float: left; width: 25%;}
#tabMenu li a { display: block; height: 30px; color: #fff; font-size: 11px; text-align: center; line-height: 30px; background-color: rgba(153,119,38,0.5); border-right: 1px solid #fff;}
#tabMenu li:last-child a { border-right: none;}
#tabMenu li:first-child { left: 0;}
#tabMenu li:nth-child(2) { left: 25%;}
#tabMenu li:nth-child(3) { right: 25%;}
#tabMenu li:last-child { right: 0;}
#tabMenu li .tabActive { height: 40px; color: #997726; line-height: 40px; background-color: #fff; border: 1px solid #997726; border-right: 1px solid #997726 !important; border-bottom: none;}
#tabMenu_bottom ul { height: 30px;}
#tabMenu_bottom ul li { height: 30px;}
#tabMenu_bottom ul li a { height: 30px;}
#tabMenu_bottom ul li .tabActive { height: 30px; line-height: 30px; border: 1px solid #997726; border-bottom: 1px solid #997726 !important;}
/*tabContent*/
#tabContent { position: relative; width: 100%;}
#tabContent .tabBox { position: absolute; top: 0; width: 100%;}

```
###試したこと
タブコンテンツの中にスライダーが入っているので、
通常のhideやdisplay:noneでのタブが実装できない。
（そうするとタブを切り替えた時にスライダーが表示されない）
なので、なんとかスライダーの高さを維持したまま、visibilityで処理している。（■2）
■1で#tabContentの初期の高さを取得しているのを、
■3で切り替わったコンテンツの高さに合わせて高さを更新したいつもり。
が、まったく動いていないのでずっと初期の高さが保持されてしまっている状態です。

activeクラスの上下タブ連動に関しては手付かずの状態です。
**→上下タブ連動は解決できました。**

高さの可変するタブのコンテンツ（スライダー入り）の高さを取得し、即時反映させたい。

それをはじめてみたのはPerlの書籍だったでしょうか。
最初は、クロシージャと読み間違え、プロシージャの誤植だと思ったのですが違いました。
その頃は、そんなもの無くてもプログラミング出来てました。(今もやってますが)

時は流れて、JavaScriptが大流行、Java8がリリースされる頃になって
やたら？たまに聞くようになってとっても気になるクロージャですが、
どうもいつまで経ってもわかった気になりません。

もちろん、色々なサイトや書籍で事あるごとに説明を読むのですが、
私の理解では、ざっくり関数内のstatic変数？ くらいの認識までにしか至らずに今まで参りました。

自分のあずかり知らぬところで世の開発者の皆様はクロージャーを日々駆使しているのでは無いかと思うと夜も眠れません。(もちろん嘘ですが)
何かそのせいで、自分のコーディングは日々回り道をしているのではととても気になります。
(Javaのインターフェースが分かった時には、パーン！みたいな感動があったので、もしかしたらそのようなことがあるのではと思ってます)

前置きが長くなりましたが、テラテイルだからこそこのような質問に答えてくれる方がいるに違いないと思い、恥を忍んで質問いたします。

他のサイトや書籍で読める説明的な説明はいりません。
クロージャに関して、以下の様なことを教えて下さい。

- クロージャってひとことで言うと何？ (多少語弊のある表現でも構いません)
- 分かった！って思った瞬間を覚えていたら、その時のことを教えて下さい。
- 結局、どんな時に使いますか？ 短いコードで表せたら知りたいです。
- タグに上げた以外でクロージャを使える言語はありますか？
- もしよろしければ、理解のための例題をくださると嬉しいです。
- 上記以外で、理解のためのに必要なことがあれば、とにかく教えて下さい。

全てでなくてもいいです、答えられることだけで構いません。

お忙しい中めんどくさい質問ですいませんが、よろしくお願い致します。

---
**追記** 2016/07/14 1:00

言語ごとに多少なりとも解釈や用途が違うということがあると思います。
その場合、統括的な解説なのか、言語特有な説明なのか明示して頂けると齟齬もなくなるかと思います。

では、改めてよろしくお願い致します。

恥ずかしながらクロージャが分かりません。

下記コードは画像のようになります。

```ここに言語を入力
<table border="3">
<tr>
<td rowspan="3">垂直方向の結合</td>
<td>データセル1</td>
</tr>
<tr>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
</tr>
</table>
```

![イメージ説明](aed81505a732a646a313e4233ca1bff4.jpeg)

例えば、動的にデータセル４データセル５データセル６・・・・・・・・・とその部分だけを追加していくようなJSを実装していたとします。

でもrowspan="3"で指定しているので、仮にデータセルが６まであったらレイアウトが崩れてしまいます。

rowspan=""をautoみたいな感じに扱い、データセルの分部が増えても対応できる方法はないでしょうか？

テーブルのレイアウト　rowspanを可変対応型にしたい

CSSでのレイアウト設計についてです。

WordPressのテンプレートで賢威を使っていたことがあります。

そのテンプレートのCSSファイルを覗くと、
共通の分部をCSSで緻密に細かくレイアウト設計していました。

といいますより、現代のサイトはCSS設計がほとんどだと思います。

例えば、各ページでサイト名のレイアウトはすべて同じという場合下記のように表現できると思います。

```html
<h1 class="sitename">サイト名<h1>


```

```css
h1.sitename{
	font-size:3em;
	text-align:center;
}
```

上記は簡単な例ですが、制作し始めて間もない頃は規模が小さいからいいのですが、
制作が進むにつれ、ページでのidやclassの割り振りも多くなり、CSSへの記述も多くなるので、
classやidが重複してしまいそうな気がします。

実際CSSの設計をしている方は、どんな考え方のもと設計をしているのでしょうか？

特に考えているわけではなく、とりあえず設計していき、
重複しているものがあればその都度修正したり、
同じCSSの内容があれば統合したり
そんな感じでやっているのでしょうか？

個人でやってるならそれでいいかもしれないんですが、
チームで開発している場合、そうもいかないと思うんです。

チームでの共同制作の場合

Aさん→Aファイルの制作+CSS設計もする
Bさん→Bファイルの制作+CSS設計もする
・・・
・・・
・・・
・・・

で完成させるのか

Aさん→Aファイルの制作のみ
Bさん→Bファイルの制作のみ
・・・
・・・
・・・
・・・
デザイナーさん→A～のすべてのファイルのCSS設計をするのか

チーム制作の場合、実際、どういった流れで制作しているのでしょうか？
前者の場合、idやclassが重複したり同じ内容のcssがあったりすると思うのですが、チーム制作の経験がないため分かりません。

コツというかポイントみたいなものがあればアドバイスいただきたいです。

CSSでのレイアウト設計について

display:tabel-cellの挙動が理解できません
display:tabel-cellの場合にはwidthを%指定すると%の増加に伴い、widthは減少してしまいます。
この場合、pタグの親要素はdivなのでそのwidthの300pxが%の基準になると考えていたのですが、
どうも異なります。原因が分かりませんので、どなたかわかる方教えていただけないでしょうか
```html
<div>
	<p></p>
</div>
```
```css
div {
    border: 2px solid black;
    height: 50px;
    width: 300px;
}

p {
    width: 10%;
    border: 2px solid red;
    height: 30px;
    display: table-cell;
}
```
width:10%のとき
![イメージ説明](2676815c02e2520ef3b9c20d4134a2e1.png)
width:1%のとき
![イメージ説明](da9a736d553c51d1aed8dd69eda84787.png)

table-cellのwidth%指定が分かりません

自分が作っているCSSが良いか悪いか判断したいです。

例）セレクタの階層が深くない方がパフォーマンス的にもメンテナンス性にも優れていることは分かります。
しかし、どこがどれほど深くなっているのか、探すのは大変です。
・一目でどこのセレクタの階層が深いのかが分かる
・どの程度まで階層を浅くすればいいのかが分かる（何か指標となる深さがあって、その指標を超えているか否かが分かる）

例）繰り返し出現する要素（複数のCSSファイルで上書きが繰り返されている等の要素）がどれくらい出現し、どれくらい減らせばいいかが分かる

などが一目で分かるツールがあれば嬉しいですが、
そもそも上に挙げた例で判断するのが正しいか間違っているかも分かりません。

自分が使っているCSSが良いか悪いか、どうやって判断するのが良いのでしょうか？