Developers Tech Notes

Archive for 2月 2016

2016年2月29日月曜日

（jQueryの学習）CSS：相対位置を操作する／offsetメソッド／左上からの要素の相対位置を取得する（その１）

今回からはCSSの相対位置を操作する方法を学びます。
以下、3つのカテゴリに分けて見ていきます。

左上からの要素の相対位置を取得する
左上からの要素の相対位置を設定する
親要素からの要素の相対位置を取得する

ここではjQueryにてCSSで定義された要素に対して、
左上からの相対位置の操作方法を整理します。

相対位置を操作するには、
用途に応じて「offsetメソッド」、「positionメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■左上からの相対位置を取得する
　・返却値（objectオブジェクト）＝要素．offset（）　※ver1.2～
■左上からの相対位置を設定する
　・返却値（jQueryオブジェクト）＝要素．offset（object）　※ver1.4～
　・返却値（jQueryオブジェクト）＝要素．offset（function）　※ver1.4～
■親要素からの相対位置を取得する
　・返却値（objectオブジェクト）＝要素．position（）　※ver1.2～

これらのメソッドを使うことで、要素のいろいろな相対位置が取得ができるようになります。

それでは本日は「1.左上からの要素の相対位置を取得する」を学びます。

まずは「単一要素」に対する左上からの相対位置を取得します。

1.左上からの要素の相対位置を取得する

1-1.offsetメソッド【返却値(objectオブジェクト) = 要素.offset( )】で1つの要素の左上からの相対位置を取得する

左上からの要素の相対位置を取得するためにはoffsetメソッドを利用します。

閲覧中のWebページ上、対象の要素がどの位置にあるのかが取得できます。

なお、対象要素の位置の基準点は、border外側の左上の角になり、marginは含みません。
（わかりにくいですが、「テストエリア１」や「テストエリア２」の「テ」文言のすぐ下あたりになります）

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、左上からの要素の相対位置が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(objectオブジェクト) = 要素.offset()
    //   サンプル：「テストエリア１」の左上からの相対位置を取得する
    // 左からの相対位置
    alert("[" + $(".box-css-test-area-1").offset().left + "]");
    // 上からの相対位置
    alert("[" + $(".box-css-test-area-1").offset().top + "]");
  });
});

実装例

指定した要素に対する左上からの相対位置を取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は「複数要素」に対する左上からの相対位置を取得する方法を学びます。

それでは、また。

2016年2月26日金曜日

（jQueryの学習）CSS：幅を操作する／outerWidthメソッド／borderの外側の幅を取得する

CSSの幅を操作する方法の3回目です。

本日は「3.borderの外側の幅(border、paddingを含む)を取得する」を学びます。

3.borderの外側の幅(border、paddingを含む)を取得する

3-1.outerWidthメソッド【返却値(数値) = 要素.outerWidth([True])】でborderの外側の幅を取得する

次にouterWidthを取得します。

outerWidthとは「borderの外側の幅」を表します。
つまり、「左右のborder＋左右のpadding＋width＝outerWidth」です。

なお、引数に「True」を設定することで、
「marginを含んだ幅（エリア全体の幅）」を取得することもできます。
つまり、「左右のmargin＋左右のborder＋左右のpadding＋width＝outerWidth」です。

利用方法はwidthメソッドと同様。

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.outerWidth([True])
    //   サンプル：「テストエリア１」のborderの外側の幅を取得する
    alert("[" + $(".box-css-test-area-1").outerWidth() + "]");     // marginを含まない
    alert("[" + $(".box-css-test-area-1").outerWidth(True) + "]"); // marginを含む
  });
});

実装例

指定した要素に設定されているborderの外側の幅を取得します。

要素: 　marginも含む:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
CSSの幅を操作する方法や、
width、innerWidth、outerWidthの違いが分かったと思います。

それでは、また。

2016年2月22日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：幅を操作する／innerWidthメソッド／borderの内側の幅を取得する

CSSの幅を操作する方法の2回目です。

本日は「2.borderの内側の幅(borderは除き、paddingは含む)を取得する」を学びます。

2.borderの内側の幅(borderは除き、paddingは含む)を取得する

2-1.innerWidthメソッド【返却値(数値) = 要素.innerWidth( )】でborderの内側の幅を取得する

次にinnerWidthを取得します。

innerWidthとは「borderの内側の幅」を表します。
つまり、「左右のpadding＋width＝innerWidth」です。

利用方法はwidthメソッドと同様。

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.innerWidth()
    //   サンプル：「テストエリア１」のborderの内側の幅を取得する
    alert("[" + $(".box-css-test-area-1").innerWidth() + "]");
  });
});

実装例

指定した要素に設定されているborderの内側の幅を取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
次回は「3.borderの外側の幅(border、paddingを含む)を取得する」を学びます。

それでは、また。

2016年2月19日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を設定する

引き続き、要素の幅を取得／設定する方法を学びます。

今回は、要素の幅を設定します。

1-4.widthメソッド【返却値(jQueryオブジェクト) = 要素.width(値)】で要素の幅を設定する

次に要素の幅を変更します。

「テストエリア」の幅を変えてみます。

値は「50」と数値型で指定することもできます。
また、算術複合代入子（+=、-=）を使用した相対的な指定も可能になっています。

サンプルソース

// HTML
<input type="button" value="指定したテストエリアの幅を50px大きくする"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(jQueryオブジェクト) = 要素.width(値)
    //   サンプル：「テストエリア１」の幅を設定する
    $(".box-css-test-area-1").width(50);     // ←絶対値指定（幅を50pxにする）
    $(".box-css-test-area-1").width("+=50"); // ←相対値指定（今の幅から50px広くする）
  });
});

実装例

指定した要素に設定されている幅を取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
次回は「2.borderの内側の幅(borderは除き、paddingは含む)を取得する」を学びます。

それでは、また。

2016年2月15日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を取得する（その３）

前回の続きで、
「複数要素」の幅を取得する方法を考えます。

1-3.widthメソッドとmapメソッドで複数要素の幅を取得する

複数の要素の幅は取得できなかったが、
調べてみると「mapメソッド【返却値（jQueryオブジェクト）＝要素．map(function)】」を利用することで、
複数要素の幅をまとめて取得できることがわかった。

mapメソッドには複数の使い方があり、
今回は「引数に設定したfunctionによって指定した要素が持つ情報を取り出す」ために利用します。

引数に設定するFunctionの構文

function 任意のfunction名(インデックス番号, セレクタの要素) {
  // ↓インデックスやセレクタの要素等の引数が利用できる
  ・・・任意の処理・・・;
  // ↓取り出した情報をjQueryオブジェクトで返却する
  return jQueryオブジェクト;
}

実際に動かしてみると、以下のようになります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    //   サンプル：「テストエリア１と２」の幅を取得する
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").map(getWidth).get() + "]");
    // ↑：getWidthで各要素の幅を取得し、その結果をオブジェクトに格納する
  });
});

// JavaScript
function getWidth(index, el){
  // 【構文】返却値(数値) = 要素.width()
  return $(el).width();
}

実装例

指定した要素に設定されている幅を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

mapメソッドを利用することで
複数の要素の幅がまとめて取得できることがわかりました。

次回は要素の幅を設定する方法を学びます。

それでは、また。

2016年2月12日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を取得する（その２）

引き続き、要素の幅を取得／設定する方法を学びます。

次は「複数要素」の幅を取得します。

1-2.widthメソッド【返却値(数値) = 要素.width( )】で複数要素の幅を取得する（できるか？）

1-1.では1つの要素の幅を取得しましたが、
複数の要素の幅は取得できないのか？を試してみます。

以下、サンプルの通り、
「テストエリア１」と「テストエリア２」を要素としてwidthメソッドを実行したところ、
文字列を返却するcssメソッドと同様に、1つ目の「テストエリア１」の幅のみ取得できました。

widthメソッドは複数要素には対応していないことがわかります。
以下のサンプルを動かしてみると、
CSSで定義した通りの値（例：テストエリア１なら「40」）が返却されることがわかります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
  <div class="box"><b>テストエリア２</b><div class="box-css-test-area-2">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}
/* テストエリア２ */
.box-css-test-area-2 {background:#F5EEFF; border:5px solid #88f; padding:20px; margin:10px; height:30px; width:450px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.width()
    //   サンプル：「テストエリア１と２」の幅を取得する
    alert("[" + $(".box-css-test-area-1, .box-css-test-area-2").width() + "]");
  });
});

実装例

指定した要素に設定されている幅を取得します。

要素:テストエリア１とテストエリア２

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

幅についても同様に、
前回と同じ方法では複数の要素の幅は取得できないことがわかりました。
次回は違う方法で考えます。

それでは、また。

2016年2月8日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：幅を操作する／widthメソッド／要素の幅を取得する（その１）

今回からはCSSの幅を操作する方法を学びます。
以下、3つのカテゴリに分けて見ていきます。

基本的には「高さ」と同じ内容になっています。
inner***やouter***の概念がわかっていれば、特に問題は無いと思います。

要素の幅を取得／設定する
borderの内側の幅(borderは除き、paddingは含む)を取得する
borderの外側の幅(border、paddingを含む)を取得する

ここではjQueryにてCSSで定義された要素の幅の操作方法を整理します。

要素の幅を操作するには、
用途に応じて「widthメソッド」、「innerWidthメソッド」、「outerWidthメソッド」を利用する必要があります。
メソッドの種類は以下の通り。

■要素の幅を取得する
　・返却値（数値）＝要素．width（プロパティ名）　※ver1.0～
■要素の幅を設定する
　・返却値（jQueryオブジェクト）＝要素．width（値）　※ver1.0～
　・返却値（jQueryオブジェクト）＝要素．width（function）　※ver1.4.1～
■borderの内側の幅を取得する
　・返却値（数値）＝要素．innerWidth（）　※ver1.2.6～
■borderの外側の幅を取得する
　・返却値（数値）＝要素．outerWidth（）　※ver1.2.6～

これらのメソッドを使うことで、要素のいろいろな幅が取得ができるようになります。

それでは本日は「1.要素の幅を取得／設定する」を学びます。

まずは「単一要素」の幅を取得します。

1.要素の幅を取得／設定する

1-1.widthメソッド【返却値(数値) = 要素.width( )】で1つの要素の幅を取得する

要素の幅を取得するためにはwidthメソッドを利用します。
返却値は「数値」のため、計算等の二次利用をするにはちょうど良い。

以下のサンプルを動かしてみると、
CSSで定義した通りの値（例：テストエリア１なら「40」）が返却されることがわかります。

ちなみに「幅(width)」とは、
枠外余白(margin)、境界線(border)、枠内余白(padding)のさらに内側の領域の幅を表します。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の幅が表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.width()
    //   サンプル：「テストエリア１」の幅を取得する
    alert("[" + $(".box-css-test-area-1").width() + "]");
  });
});

実装例

指定した要素に設定されている幅を取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

次回は複数の要素の幅を取得する方法を学びます。

それでは、また。

2016年2月5日金曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：高さを操作する／outerHeightメソッド／borderの外側の高さを取得する

CSSの高さを操作する方法の3回目です。

本日は「3.borderの外側の高さ(border、paddingを含む)を取得する」を学びます。

3.borderの外側の高さ(border、paddingを含む)を取得する

3-1.outerHeightメソッド【返却値(数値) = 要素.outerHeight([True])】でborderの外側の高さを取得する

次にouterHeightを取得します。

outerHeightとは「borderの外側の高さ」を表します。
つまり、「上下のborder＋上下のpadding＋height＝outerHeight」です。

なお、引数に「True」を設定することで、
「marginを含んだ高さ（エリア全体の高さ）」を取得することもできます。
つまり、「上下のmargin＋上下のborder＋上下のpadding＋height＝outerHeight」です。

利用方法はheightメソッドと同様。

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の高さが表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.outerHeight([True])
    //   サンプル：「テストエリア１」のborderの外側の高さを取得する
    alert("[" + $(".box-css-test-area-1").outerHeight() + "]");     // marginを含まない
    alert("[" + $(".box-css-test-area-1").outerHeight(True) + "]"); // marginを含む
  });
});

実装例

指定した要素に設定されているborderの外側の高さを取得します。

要素: 　marginも含む:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
CSSの高さを操作する方法や、
height、innerHeight、outerHeightの違いが分かったと思います。

それでは、また。

2016年2月1日月曜日

jQuery jQuery/API/CSS

（jQueryの学習）CSS：高さを操作する／innerHeightメソッド／borderの内側の高さを取得する

CSSの高さを操作する方法の2回目です。

本日は「2.borderの内側の高さ(borderは除き、paddingは含む)を取得する」を学びます。

2.borderの内側の高さ(borderは除き、paddingは含む)を取得する

2-1.innerHeightメソッド【返却値(数値) = 要素.innerHeight( )】でborderの内側の高さを取得する

次にinnerHeightを取得します。

innerHeightとは「borderの内側の高さ」を表します。
つまり、「上下のpadding＋height＝innerHeight」です。

利用方法はheightメソッドと同様。

注意：このメソッドは設定では使用できません。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素の高さが表示されます"><br>
<div class="box">
  <div class="box"><b>テストエリア１</b><div class="box-css-test-area-1">・・・略・・・</div></div>
</div>

// CSS
/* テストエリア１ */
.box-css-test-area-1 {background:#F5EEFF; border:5px solid #88f; padding:10px; margin:20px; height:40px; width:460px;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(数値) = 要素.innerHeight()
    //   サンプル：「テストエリア１」のborderの内側の高さを取得する
    alert("[" + $(".box-css-test-area-1").innerHeight() + "]");
  });
});

実装例

指定した要素に設定されているborderの内側の高さを取得します。

要素:

テストエリア１

border:5px; padding:10px; margin:20px; height:40px; width:460px;
（境界線:5px、枠内余白:10px、枠外余白:20px、高さ:40px、幅:460px）

テストエリア２

border:5px; padding:20px; margin:10px; height:30px; width:450px;
（境界線:5px、枠内余白:20px、枠外余白:10px、高さ:30px、幅:450px）

いかがでしたか？
次回は「3.borderの外側の高さ(border、paddingを含む)を取得する」を学びます。

それでは、また。

2016年2月29日月曜日

1.左上からの要素の相対位置を取得する

1-1.offsetメソッド【返却値(objectオブジェクト) = 要素.offset( )】で1つの要素の左上からの相対位置を取得する

サンプルソース

実装例

2016年2月26日金曜日

3.borderの外側の幅(border、paddingを含む)を取得する

3-1.outerWidthメソッド【返却値(数値) = 要素.outerWidth([True])】でborderの外側の幅を取得する

サンプルソース

実装例

2016年2月22日月曜日

2.borderの内側の幅(borderは除き、paddingは含む)を取得する

2-1.innerWidthメソッド【返却値(数値) = 要素.innerWidth( )】でborderの内側の幅を取得する

サンプルソース

実装例

2016年2月19日金曜日

1-4.widthメソッド【返却値(jQueryオブジェクト) = 要素.width(値)】で要素の幅を設定する

サンプルソース

実装例

2016年2月15日月曜日

1-3.widthメソッドとmapメソッドで複数要素の幅を取得する

サンプルソース

実装例

2016年2月12日金曜日

1-2.widthメソッド【返却値(数値) = 要素.width( )】で複数要素の幅を取得する（できるか？）

サンプルソース

実装例

2016年2月8日月曜日

1.要素の幅を取得／設定する

1-1.widthメソッド【返却値(数値) = 要素.width( )】で1つの要素の幅を取得する

サンプルソース

実装例

2016年2月5日金曜日

3.borderの外側の高さ(border、paddingを含む)を取得する

3-1.outerHeightメソッド【返却値(数値) = 要素.outerHeight([True])】でborderの外側の高さを取得する

サンプルソース

実装例

2016年2月1日月曜日

2.borderの内側の高さ(borderは除き、paddingは含む)を取得する

2-1.innerHeightメソッド【返却値(数値) = 要素.innerHeight( )】でborderの内側の高さを取得する

サンプルソース

実装例

Introduction

Popular Posts

Labels Cloud

Blog Archives

Featured Post