【CSS】background-colorとbackgroundの違い

投稿日時: 2016年4月27日投稿者: itsysgroup

ふと、CSSのbackground-colorとbackgroundの違いって何だろう？って思いました。

いつもは背景色を指定する場合は、

<style>
  #TableA{
    background-color: #FF8888;
  }
</style>

のようにbackground-colorを使用しています。

しかし度々、以下のように書かれたものも見ます。

<style>
  #TableA{
    background: #FF8888;
  }
</style>

どちらも同じ結果になるとは言え、どう違うんだろうと思っていました。
もともと見た目のデザインに興味が無かったことが、今まではっきり知らなかった原因なのですが。。。

background-colorとbackgroundの違いを言うと、個別に設定するか、まとめて設定するかの違いでした。

背景の指定には次の指定ができます。

背景色を指定する	background: ***;
背景の画像を指定する	background-image: url(***);
背景画像の並び方を指定する	background-repeat: ***;
背景画像の表示位置を指定する	background-position: ***;
背景画像のスクロールについて指定する	background-attachment: ***;

個別に指定する際は、上述のプロパティを使います。

逆に一括で指定したい場合は、backgroundプロパティを使います。
backgroundは、背景色や背景画像（並び方、スクロール、位置）を一括で指定するプロパティです。
このbackgroundプロパティを要素に対して設定すると、文書全体の背景をひとまとめに指定することができます。
具体的には、要素ID：TableAに対し、背景色（白）/背景画像（***.gif）/並び方（垂直方向）/表示位置（右上）/固定表示（固定する）

#TableA{
 background: #ffffff url(***.gif) repeat-y right top fixed;
}

このように一括して設定できます。

注意点としては、backgroundプロパティに指定していないプロパティは、デフォルトで設定されます。
例えば、

#TableA{
  background-image: url(***);
  background: #ffffff repeat-y right top fixed;
}

としてしまった場合、背景画像（***.gif）は指定されなかったとみなされます。
要は真っ白背景が表示されるだけです。

ちょっと気になったので、システム備忘録として載せておきます。

【CSS】マウスカーソルが乗るとテーブル行の色が変わる

投稿日時: 2016年4月26日投稿者: itsysgroup

CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録です。
ほんの少しのコーディングの差で変わらないケースも有ります。
例えば、tdを付けてしまってtdの背景色を変えていて、Trの背景色が変わらないとか。。。
なので間違いやすいケースも載せておきます。

まずは、正常に背景色が変わる場合

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) {  
      background-color: #FF8888;
    }  
    #tableA tr:nth-child(even) {  
      background-color: #88FF88;  
    }  
    #tableA tr:hover {
      background-color: #e5e5e5;	/* 行の背景色style="background-color: #FF8888;" */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
  </table>
</body>
</html>

下のテーブルはマウスカーソルが乗ると行の背景色が変わります。

セルA1	セルA2	セルA3
セルB1	セルB2	セルB3
セルC1	セルC2	セルC3
セルD1	セルD2	セルD3
セルE1	セルE2	セルE3

変わらないケース（１）
styleで#tableB tr:nth-child(odd) tdのようにtdで背景色を付けた場合は上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style>
    #tableB tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableB tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
    #tableB tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableB">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1	セルA2	セルA3
セルB1	セルB2	セルB3
セルC1	セルC2	セルC3
セルD1	セルD2	セルD3
セルE1	セルE2	セルE3

変わらないケース（２）
trタグの中のstyleで直接背景色を付けた場合も上手く行きません。
以下をコピペして適当な名前で保存して試してみると変更されないことがわかります。

<html>
<head>
  <style> 
    #tableA tbody tr:hover {
      background-color: #e5e5e5;	/* 行の背景色 */
    }
  </style>
</head>
<body>
  <table id="tableA">
    <tbody>
      <tr style="background-color: #FF8888;">
        <td>セルA1</td><td>セルA2</td><td>セルA3</td>
      </tr>
      <tr style="background-color: #88FF88;">
        <td>セルB1</td><td>セルB2</td><td>セルB3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルC1</td><td>セルC2</td><td>セルC3</td>
      </tr>
      <tr style="background-color: #88FF88;">
       <td>セルD1</td><td>セルD2</td><td>セルD3</td>
      </tr>
      <tr style="background-color: #FF8888;">
        <td>セルE1</td><td>セルE2</td><td>セルE3</td>
      </tr>
     </tbody>
   </table>
  </body>
</html>

上のソースを動かしても、テーブルにマウスカーソルが乗っても行の背景色が変わりません。

セルA1	セルA2	セルA3
セルB1	セルB2	セルB3
セルC1	セルC2	セルC3
セルD1	セルD2	セルD3
セルE1	セルE2	セルE3

ほんの少しのコーディングの違いですが、上手く背景色が変わる場合と変わらない場合が有るので、変わらない場合は良くチェックしてみてください。

以上、CSSだけでマウスカーソルが乗るとテーブル行の色が変わるシステム開発備忘録でした。

【CSS】テーブルの背景色を交互に変える

投稿日時: 2016年4月26日投稿者: itsysgroup

CSSでテーブルの背景色を変えるシステム開発備忘録です。
と言うは、極たまにしか使わないので、忘れてしまうことが多くて。。。

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableA tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

これは、疑似クラスの:nth-child(n)を使っています。
まず、疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。

例としてよく使われているaタグに使う疑似クラスを挙げます。
a:link{}
リンクする要素(ａ要素)のうち、まだ見ていない（キャッシュされていない）要素に対してスタイルを適用させます。
a:visited{}
リンクする要素(ａ要素)のうち、既に見た（キャッシュされている）要素に対してスタイルを適用させます。

今回のnth-child(n)は疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。
nにはodd、evenの他に数字や2nのように計算式を入れる事もできます。

#tableA tr:nth-child(odd) td で記述したセレクタは、
#tableAのtrのnth-child(odd)奇数行の状態にあるtdに対して、スタイルを適用することになります。

この辺りの詳細な説明は、ググってもらった方が良いですね。

尚、古いブラウザでは動かないことが有ります。例えばIE8とかの古いブラウザとかでは。
この辺りも別途考慮の必要？が有るなら調べて使用してください。

以上、【CSS】テーブルの背景色を交互に変える、CSSの備忘録でした。

【ASP.NET】　ajax post で、404エラーとなってしまう

投稿日時: 2016年4月25日投稿者: itsysgroup

今日はajax postで長文を送った場合にエラーになってしまった場合の対策備忘録です。
サーバはWindows IISです。

今までは普通に送れていたのに、長文にした時にエラーになってしまう場合は、IISにはじかれていると考えられます。
ちなみにデフォルトは何バイトか調べて居ません。

で、まずはエラーの内容確認

$.ajax({
   		type: "Post",
   		url: "************",
		contentype: "application/json"
		dataType:"json",
   		success: function(msg){
			document.open();
			document.write(msg);
			document.close();
   		},
   		error: function(XMLHttpRequest, textStatus, errorThrown){
			msg="--- Error Status ---"
			msg=msg+"<BR>"+"status:"+XMLHttpRequest.status;
			msg=msg+"<BR>"+"statusText:"+XMLHttpRequest.statusText;
			msg=msg+"<BR>"+"textStatus:"+textStatus;
			msg=msg+"<BR>"+"errorThrown:"+errorThrown;
			for(var i in errorThrown)
			{
				msg=msg+"<BR>"+"error "+i+":"+ errorThrown[i];
			}
			document.open();
			document.write(msg);
			document.close();
   		}
	});

エラーコードは次のような感じです。
　404.13　：　コンテンツの長さが長すぎます
　404.14　：　URL が長すぎます
　404.15　：　クエリ文字列が長すぎます

各々は以下のパラメータで対応できます。
　maxAllowedContentLength
　maxUrl
　maxQueryString

具体的には、web.congigの中に下のような感じで記述します。

<configuration>
 <system.webServer>
  <security>
   <requestFiltering>
    <requestLimits
           maxAllowedContentLength="30000000"       
	   maxUrl="300"       
	   maxQueryString="10000"/>   
	</requestFiltering>
  </security>
 </system.webServer>
</configuration>

で、今回の備忘録はajax postで長文を送った場合にエラーとなった場合への対応備忘録ですので、コンテンツが長い場合、URLが長い場合は調べて居ませんが、
クエリー文字列が長い場合、上の対応をしたとしても、実はまだエラーになります。

※クエリー文字列が長すぎる旨のエラーになってしまいます。

で、どうすれば良いかと言うともう一つ「maxQueryStringLength」パラメータを設定してあげます。
やはり、web.configの中で設定するのですが、

<configuration>
  <system.web>
    <httpRuntime maxQueryStringLength="10000" />
  </system.web>
</configuration>

私の環境では、

<configuration>
  <system.web>
    <httpRuntime targetFreamework="4.5" maxQueryStringLength="10000" />
  </system.web>
</configuration>

となりました。

これで長い文字列を含むajax Postでも正常にIISで受け付けてもらえました。

以上、ajax postで長文を送った場合にエラーとなった場合への対応備忘録でした。

Cordovaとは

投稿日時: 2016年4月22日投稿者: itsysgroup

iOSアプリをお手軽に作れると聞いて、とりあえず飛びついてみます。

そのお手軽に作れる仕組みが、「Cordova」と言うものらしいです。。。
いや、、初めて聞いたので、実際どんなものなのか、、、良く分かっていません。

少し調べていくと、
『オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。』
とか、
『CordovaはHTML5/CSS/JavaScriptで作ったWebアプリケーションをラッピングしてネイティブアプリ化する技術です。
そしてプラグインを通してスマートフォンネイティブのAPIをJavaScriptで呼び出せるようになっています。』
と、出てきます。

うーん。。。要は、HTML5/CSS/JavaScriptでプログラム（Webアプリケーション）を書き、何かのツールかFreamworkでiOS上でそのまま動くアプリとして登録できる？ってことなのかな？
あっ、「プラグインを通してスマートフォンネイティブのAPIをJavaScriptで呼び出せる」と有りますね。
具体的に良く分かりませんが、これから少しづつ調べていきたいと思います。

まずは仕組みから調査開始します。

jquery selectタグの選択されているテキストを取得する

投稿日時: 2016年4月14日投稿者: itsysgroup

jqueryネタの開発備忘録です。

jqueryを使用してselectタグで選択されているテキストの値を取得する方法が
すぐに分からなかったので調べた結果をメモしておきます。

結論から言うと、
:selected
を使います。

使い方は、

<select id='selectTest'>
  <option value='A'>表示A</ option>
  <option value='B'>表示B</ option>
  <option value='C'>表示C</ option>
  <option value='D'>表示D</ option>
  <option value='E'>表示E</ option>
</ select>

と、なっている場合

alert($('#selectTest').children(':selected').text());

とすることで、表示Aとか表示Bというテキスト値を取得できます。
とりあえず、アラートで表示していますが、適当に代入してください。

ちなみに、普通にvalueの値が欲しい時は、

alert($('#selectTest').val());

ですからね。

あと、selectで複数選択可能のテキスト値の取得の仕方ですが、eachを使用して回して取得します。
具体的には、

$('#selectTest').children(':selected').each(function(){
  alert($(this).text());
});

です。

以上、簡単に説明しました。。。

開発備忘録＆ふと思ったこと

読み流してください。。。システム開発ネタが多いです。

月別アーカイブ: 2016年4月