生活情報オンライン

ITエンジニアが役立つ情報を発信します。

バッチファイル処理の初歩

f:id:somegoro:20170609001832p:plain
先月から入っている仕事がついにリリースを迎えています。約一か月間、寝不足になりながらも頑張りました。


さて、そめごろうとしては久しぶりにシステム導入のフェーズになります。前職ではよく参加していたフェーズなのですが、現職ではアプリケーション開発をメインで実施していたのでシステム導入はなかなかありませんでした。


ということで、システムについての知識があやふやになってきているので円滑に業務を遂行するためのお勉強記事を書きます。今回はシステム導入の基本作業である「バッチファイル処理について」の記事を書きます。


拡張子は.batまたは.cmd

基本中の基本ですね。テキストにバッチ処理を書いたら拡張子は.batまたは.cmdで保存しましょう。私は基本的に.batで保存しますが、職場では.cmdで保存する人が多いです。文字数も同じですし、どちらもで構わないでしょう。

環境変数でPATHに追加

システムのプロパティにある環境変数でPATHに追加すると、コマンドプロンプトからファイル名指定だけで実行できるようになります。いわゆるパス通ってるからですね。この設定をしていないと常にフルパス指定しなければバッチファイルは実行できません。

help で説明を見よう

help set でsetについての説明を見ることが出来ます。
help if でifのかなり参考になる説明を見ることが出来ます。少し慣れてきて細かな仕様が知りたいときにはネットで検索するのもいいけど確実な情報はここを確認することで取得できます。


ちなみにhelpの説明を終了するにはEscキーを押下します。コマンドプロンプト自体を終了するにはhelpを終了させてからexitで出来ます。

ラベル定義

:label3 これでラベルを定義することが出来ます。ラベルとは関数のようなものです。バッチファイルには関数がありません。そして、

goto label3
または
call label3

でlabel3ラベルに移動することが出来ます。

バッチファイルから他のバッチファイルを呼び出す

バッチファイルは他のバッチファイルを呼び出すことも出来ます。それにはバッチファイル名を記載すればいいだけです。しかしこの方法ではバッチファイルを呼び出した後に戻ってこないでそのまま終了してしまいます。


なのでそうならないようにcallを使用して他のバッチファイルを呼び出します。callで呼ばれたバッチファイルはexit 0とすることで戻り値を返せます。この例では0を返しています。バッチ処理を終了させるならexit /b です。そして、if errorlevel 0 これで戻り値に0が返ってきたか確認できます。


基本はこんな感じでしょうか。以下によく使用するコマンドを羅列していきます。

start sample.bat

別プロセスを起動して実行する。プロセスたくさん作ってパフォーマンス試験するときなどに便利そうですね。

pause

続行するには何かキーを押してください . . .

echo Hello

Helloと出力します。おなじみのテストコマンドです。

echo off

これ以降はecho表示させない。必要な表示を見逃さないためには大事な処理です。

@

この行はecho表示させない。

@echo off

この行はecho表示させない。これ以降はecho表示させない。

echo.

改行する。

set arg=atai

スクリプト実行中のみに有効な環境変数を定義する。

echo %arg%

変数の中身を参照する。

rem または ::

コメントアウト

mkdir

ディレクトリを作成する。

xcopy

コピーする。

%0

このバッチファイルのパス

cls

画面をクリアする。

ping localhost -n 5 > nul

5秒待つ(バッチファイルにはsleepやwaitは存在しない!)



以上、「バッチファイル処理の初歩」でした。


今回ご紹介したものだけでもかなり便利なバッチファイルを作成することが出来ると思います。しかし、バッチファイルにはまだまだおもしろい機能がありますよ。追ってご紹介していきます。


それでは今回の記事はこの辺で。


[改訂新版]Windowsコマンドプロンプトポケットリファレンス

[改訂新版]Windowsコマンドプロンプトポケットリファレンス

  • 作者:山近 慶一
  • 出版社/メーカー: 技術評論社
  • 発売日: 2016/03/04
  • メディア: 単行本(ソフトカバー)

javascript 即時関数の書き方

今回はjavascriptの即時関数を紹介します。


私は最初に即時関数を見たときはその記述方法に驚きました。
しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。
だんだん見慣れてもきますので、もし即時関数を難しく感じても最初だけなので安心してください。


さっそくですが、実際のコードはこのような感じになります。

即時関数の書き方

(function(){
  //処理...
})();


通常の関数ではロード(定義)された後に呼び出しをされないと実行されませんが、上記のように記載することで「定義後、即実行」という挙動になります。


通常の関数と比較してメリットとよく言われるのが「スコープが閉じている、いわゆるスコープを汚さない」ということです。スコープが閉じていることにより、「他の場所で定義した変数」と同じ名前の変数を定義し使用しても、「他の場所で定義した変数」に影響を与えることはありません。


これは、複数の外部ファイルの読み込みなどで複雑に入り組んでしまい「このアプリでどのような変数を使用しているのか把握できない」ような状況で有用かと思います。


また、即時関数には上記の他にも書き方がありそれぞれ次のように書きます。

引数を指定する場合

引数を指定する場合ではこのように書きます。

(function(val1, val2){
  //処理...
})(1, 2);

関数名を付与する場合

即時関数には、関数名を付与することも出来ます。

(function sokuji_func(){
  //処理...
})();

以上、即時関数の記載方法でした。

追加実験

即時関数には関数名を付与できることを利用して関数定義した場所以外から呼び出せるのか次のコードを書いて試してみました。
結果として、下記のようなエラーが起きてしまい期待していた挙動にはなりませんでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
  var sokuji = (function(arg){
    var $p = document.getElementById("p_sokuji");
    $p.style.color = arg;
  })("red");

  var $b = document.getElementById("b_sokuji");
  $b.onclick = function(){
	  sokuji("blue");
  }
}
</script>
</head>
<body>
<p id="p_sokuji">Hello Sokuji Function</p>
<button id="b_sokuji">テスト</button>
</body>
</html>

このようなエラーです。
f:id:somegoro:20170522003943p:plain

ううむ、即時関数を呼び出すにはどのようにしたら良いのでしょうか。
引数なしだったらいけそうな気もします。再度、色々なアプローチで実験してみようと思います。


☆彡追記
この記事について助け舟を出していただきました。 id:KazmaArakaki様、ありがとうございます。とても丁寧な説明でわかりやすかったです。
http://kazmaarakaki.hatenablog.com/entry/2017/05/24/223720kazmaarakaki.hatenablog.com

ということで、上記追加実験のエラーについて解決することが出来ました。即時関数は名前をつけても基本的には呼び出すことは出来ません、その事実は引数なしでも変わりません。しかし唯一、即時関数の中からなら呼び出すことが出来るのです。こういった呼び出し方は「再帰」なんて呼びますよね。それでは実際にソースコードを書いていきます。

文字色をランダムに換える関数

var sokuji = (function(arg){
  // 0~4までの数をランダムで取得
  var ran = Math.floor( Math.random() * 5 );
  // 文字の色を設定
  var $p = document.getElementById("p_sokuji");
  
  if($p.style.color == arg[ran]){
    //今の文字色と同じ色ならば、即時関数を再起的に呼び出す
    sokuji(["red", "blue", "green", "pink", "black"]);
  }
  $p.style.color = arg[ran];

})(["red", "blue", "green", "pink", "black"]);


上記のように即時関数を呼び出すには再帰的に呼び出します。(※動作確認未実施です。これから再追加試験としてやります)


今回の記事は以上です。とても良い勉強になりましたね!

javascript(jQuery)読み込みの仕組みを解説!

今回は javascript / jQuery の読み込まれる仕組みを解説します。


window.onload / ready / $(function(){}) など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうかで今後の開発の質が大きく変わってくることかと思います。


例えば、ある要素に対して押下イベントを登録するにしてもDOMツリーが構築されてから登録処理を実施しないとイベント登録はされません。なぜなら登録先の要素が無いために登録処理が空振りに終わってしまうからです。


ではDOMツリーが構築されるタイミングはいつなのか、適切なタイミングで登録するにはどうしたらいいのか。このあたりの理解があやふやな方は是非読んでいってください。


よく使う$(function(){...とは何なのか

jQueryを使うときには、次の式を書きますね。

$(function(){
  //処理...
});

これは次の式の略です。

jQuery(document).ready(function() {
  //処理...
});

この式は他にもこのような記載方法があります。機能はどれも同じです。

$(document).ready(function(){
  //処理...
});

jQuery(function(){
  //処理...
});

これらの式はHTMLがDOMツリーを構築完了した直後に呼ばれる式です。ですので要素に対してのイベント登録は上記の式の中に書けば登録することが出来ます。しかし、CSSレンダリングや画像の読み込みなどはまだ行われていないので、要素や画像の高さを取得することは出来ません。

全体の順番

全体としての順番は次の通りです。


1.Webページの読み込み開始
  基本的には上から順番にWebページが読み込まれていきます。

 ↓

2.HTMLを読み込んでDOMツリーの構築
  ここでDOMツリーの構築が完了すると次の式たちが実行されます。

$(document).ready(function(){
  //処理...
});
$(function(){
  //処理...
});

 ↓

3.CSS、画像、サブフレーム(iframeとか)の読み込み
  ここで各種コンテンツの読み込みが完了すると次の式が実行されます。

window.onload = function(){
  //処理...
}

こうやって書いても良いです。

$(window).load(function(){
  //処理...
});

  ここだとCSSレンダリング後なので、要素のheight,widthが取得できます。
  もちろん画像のheight,widthも取得できます。


ちなみにTips

window.onloadは一度しか呼ばれません。二つ以上書くと最後に書いたもののみ実行されます。

window.onload = function() {
  //処理1...
}

window.onload = function() {
  //処理2...
}

これは、上記のように window.onloadに代入されるので最後に書いたものに上書きされるためです。


すべてのコンテンツの読み込みが完了した時点で処理を複数実施したい場合は次のように書きます。

$(window).on('load', function() {
  //処理1...
});

$(window).on('load', function() {
  //処理2...
});


これをjQueryなしでやるには次のように書きます。

function onload_function1(){
  //処理1...
}

function onload_function2(){
  //処理2...
}

window.addEventListener('load', onload_function1);
window.addEventListener('load', onload_function2);


window.onloadと違い次の式は何回でも記載することが出来るので安心して使いましょう。

$(function(){
  //処理...
});


この式をjQueryを使用せずにjavascriptのみで呼び出すのは次のように書きます。

document.addEventListener( "DOMContentLoaded", completed );

この書き方の対応ブラウザは次通りです。

Chrome Firefox InternetExplorer Safari
1.0~ 1.0~ 9.0~ 3.1~


また、途中で記載した次の式は、jQueryの関数.loadを使用した呼び出し方です。

$(window).load(function() {

これはwindow以外の要素でも使用することが出来ます。指定した要素の読み込み完了した時点で発火するイベントの登録ということですね。

<img src="test.gif" alt="test" id="test">
$( "#test" ).load(function() {
  //処理...
});



これをjavascriptのみで実行するには次のように書きます。

window.addEventListener("load", completed );



いかがでしたでしょうか。
以上、今回は javascript / jQuery の読み込まれる仕組みを解説でした。


改訂新版 jQuery本格入門

改訂新版 jQuery本格入門


Windows10 サービスの起動の仕方

こんにちは。今回は「Windows10 サービスの起動の仕方」をご紹介します。


Windows10が発売されてから久しいですが、コントロールパネルの配置などユーザーインターフェースに色々と変更がありましたのでお困りの方も多いかと思います。


私自身もサービスを起動方法については毎回のようにWebサイトで調べていましたので、簡単な起動方法を記事にしようと思いました。

Windows10 サービスの起動の仕方

さて、それではさっそく紹介していきます。今回はベーシックな方法を2点ご紹介します。

1.「Windows管理ツール」から起動する方法

Windowsボタンを押下してアプリケーション一覧の中からWindows管理ツールを開きます。その中にある「サービス」を押下します。
f:id:somegoro:20170517002018p:plain


これで次のようにサービスを起動することが出来ます。
f:id:somegoro:20170517002316p:plain


2.「ファイル名を指定して実行」から起動する方法

もう一つの方法は、Windowsボタン+Rを押下して「ファイル名を指定して実行」ウィンドウを開きます。


そこに「services.msc」と入力してOKボタンを押下します。
f:id:somegoro:20170517002232p:plain



以上、「Windows10 サービスの起動の仕方」を2点ご紹介しました。


あまり使う機会がないので、ついつい忘れてしまいますが作業自体はとても簡単ですね。忘れたら是非また見に来てください。

jQueryでも高速化!メソッドチェーン/連想配列で値を設定

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。
somegoro.hatenablog.com

今回はその高速化についての記事です。


jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています。確かにそのとおりなのですが、書き方を少し工夫するだけでjQueryの処理は飛躍的に速くなるのです。


今回の記事では、高速化するための書き方を2点ご紹介します。
それではご紹介していきます。

高速化1 メソッドチェーンでつなぐ

普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "500px");
$(this).css("height", "300px");


それをこのように書くことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px");

この書き方ですと $(this) へのアクセスが一度で済みます。
ですので、その分の処理が少なくなるので結果として処理時間が短くなる(=高速で処理できる)と言うことになります。


さらに.cssだけでなく、他のプロパティでもメソッドチェーンで繋ぐことが出来ます。

$(this).css("width", "500px")
       .css("height", "300px")
       .text("設定しました");

記述量も少なくなる上に処理も速くなって一石二鳥ですね。これを使わない手はないです。


高速化2 連想配列で設定

さて次は連想配列を使って値を設定する方法をご紹介します。
普通にjQueryの処理で書くとこのようになります。

$(this).css("width", "300px");
$(this).css("height", "300px");

それをこのように書くことが出来ます。

$(this).css({
  width: "300px",
  height: "300px"
});

この書き方は高速化1の方法よりも個人的に見た目が好きなので、私はよく使います。
処理速度としてはどうでしょう、こちらの方が体感的には少々速い気がしますがあまり気になる程の差はないように感じます。


今回ご紹介した書き方は、変数でもこのように設定することが出来ます。

var variable_width = 300;
$(this).css("width", variable_width)
       .css("height", "300px");

$(this).css({
  width: variable_width,
  height: "300px"
});

便利で簡単ですね。


以上、jQueryでも処理を高速化する方法2点でした。メソッドチェーンや連想配列はこの他にも様々な場所で活躍しますので、この機会にぜひ覚えていってください。


それではこの辺で。

jQueryクックブック

jQueryクックブック

jQueryでCSSのwidth, height を簡単に取得/設定する方法

今回は jQueryで width, height の値を簡単に取得する方法をご紹介します。

今までの取得方法

今まで私は、幅と高さを取得する際に次のように書いていました。

$(this).css("width");
$(this).css("height");

javascriptで取得する方法であるdocument.getElementByIdなどと比較すればこれでも簡単なのですが、もっと簡単に取得できる書き方を先日知りました。

簡単な方法

$(this).width();
$(this).height();

これで取得できます。jQueryの基本的な書き方のようです。ちなみに値を設定するにはそれぞれ次のように書きます。

$(this).width(500);
$(this).height("300px");

単位なしで書くとpx単位での設定になります。もちろんpxを明示的に書いても設定することが出来ます。%, vh, vw なんかも設定できます。簡単ですね。


私が今まで実施していた書き方だと値を設定するには次のように書きます。

$(this).css("width", "500px");
$(this).css("height", "300");

これも単位なしで書くとpx単位での設定になります。これも、もちろんpxを明示的に書いても設定することが出来ます。やはり多少記述が長くなりますね。「塵も積もれば」で、この多少の違いは見過ごせません。


私がよくやっていることは.cssで値を動的に設定することです。

変数で設定

次のように値を変数にすることで動的に値を設定できます。

$(this).css("width", variable_width);

さらに、上記で変数にした部分は関数にすることも出来ます。関数の戻り値で値を設定するのです。

関数の戻り値で設定

次のように値を関数の戻り値で設定することで動的に値を設定できます。

$(this).css("width", function(){
  return variable_width;
});


そして、意外と忘れがちなのが初期化です。

初期化

上記のようにjQueryを使って設定した値を初期化して元のCSSで設定していた値に戻したい。そんなときには次のように書きます。

$(this).css("width", "")

簡単ですね。この初期化の書き方でピンときた方もいるかと思いますが、.cssではCSS上で値を設定しているのではないのですね。HTML上にstyleで設定しているのです。.cssという書き方なのに、面白いですね。


以上、width, height の値を設定する色々な方法でした。なお、今回の処理については処理速度は意識していません。あくまで簡単に値を取得/設定する方法にフォーカスした内容です。


処理速度を意識するならjQueryでなく、javascriptで書いてしまった方が断然速いです。ですので、お手軽プログラミングでなく処理速度に厳密なプログラムを書く際にはjavascriptでゴリゴリ書いていくことをオススメします。


いつか処理速度を意識したjavascriptの記事も書きたいなぁ(´-`).。oO

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)

Amazon「ほしい物リスト」ボタンを作る方法!あのボタンを自作する!

今までご紹介したHTML5/CSS3の機能を組み合わせることで綺麗なボタンを自分で作成することが出来ます。


Twitter、Facebook、Amazonなどのあらゆるボタンを自由に作れますので、今回の記事では実際に「Amazon ほしい物リスト」のボタンを作成してみます。

Amazon ほしい物リストボタンの作り方

あのAmazonの象徴的なボタンを作ります。完成イメージは次のとおりです。

そめごろうのほしい物リスト


使用している4つの機能

よく見かけるボタンですよね。
使っている機能は今まで記事にてご紹介した次の4点です。
1.HTML5/CSS3 簡単に「上下中央揃え」にする2つの方法 インライン要素、ブロック要素 - 生活情報オンライン
2.HTML 角を丸くする方法 - 生活情報オンライン
3.HTML5/CSS3 グラデーションのかけかた - 生活情報オンライン
4.HTML リンクを押せる範囲を拡大する方法 - 生活情報オンライン


これらを組み合わせると上記のようなこれぞAmazonなボタンを作成することが出来ます。


上記のボタンはきちんとボタンとしてのジャンプ機能も持ち合わせています。ジャンプ先は本記事の作成者である「そめごろう」のAmazonほしい物リストです。
このジャンプ先を変更することで、ご自分の「ほしい物リスト」へジャンプするボタンも作成することが出来ます。


ブログの隅にこんなボタンがあったら思わずクリックして覗いてみたくなってしまいますね。

ソースコード

それではソースコードをご紹介します。今回ももちろんコピー&ペーストOKです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
@charset "utf-8";

.a-button {
  border-color: #a88734 #9c7e31 #846a29;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 13px;
}

.a-button:active{
  border-color: #a88734 #9c7e31 #9c7e31;
}

.a-button-text {
  color: #111;
  font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  height: 100%;
  line-height: 29px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.a-button-inner {
  background: rgb(243,208,120);
  background: -webkit-linear-gradient(top,rgba(240,193,75,0.9),rgba(247,223,165,0.9));
  background: linear-gradient(to bottom,rgba(247,223,165,0.9),rgba(240,193,75,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  border-radius: 2px;
  display: block;
  height: 29px;
  position: relative;
  width: calc(13em + 20px);
}

.a-button-inner:hover{
  background: -webkit-linear-gradient(top,rgba(240,193,75,1),rgba(247,223,165,1));
  background: linear-gradient(to bottom,rgba(247,223,165,1),rgba(240,193,75,1));
}

.a-button-inner:active {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
}
</style>
</head>
<body>

<span class="a-button">
  <span class="a-button-inner">
    <a href="http://amzn.asia/ih5VQQG" class="a-button-text">そめごろうのほしい物リスト</a>
  </span>
</span>

</body>
</html>

ちなみに、リンク(ジャンプ先)は上記ソースコードのうちの次の部分です。

<a href="http://amzn.asia/ih5VQQG" class="a-button-text">

この「"http://amzn.asia/ih5VQQG"」をご自分のリンクに変更することで、ご自分のほしいものリストにジャンプするボタンを作成することが出来ます。


なお、リンクの作成方法については次のとおり公式サイトに記載があります。
Amazon.co.jp ヘルプ: ほしい物リストを作成する


上記の公式サイトには図が無いので少々わかりづらいかもしれません。
図を使った説明がお好みの方は、こちらの方の記事が明るいです。
www.sukicomi.net

HTML5/CSS3 簡単に「上下中央揃え」にする2つの方法 インライン要素、ブロック要素

HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。


要点を掴めばこんな風によそ見してても簡単に出来ます。
f:id:somegoro:20170324023808j:plain
ぜひこの記事を読んで、要点を掴んでいってください。


さてそれでは、今回の記事では次の2つの上下中央揃えパターンをご紹介します。
・インライン要素 of ブロック要素
・ブロック要素 of ブロック要素

インライン要素 of ブロック要素


インライン要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#parent_block{
  border: 1px solid black;
  height: 100px;
  width: 250px;
  text-align: center;/* 横の位置を中央にする */
}

#child_inline{
  line-height: 100px;/* 行間を指定 */
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="parent_block">
  <span id="child_inline">インライン要素</span>
</div>
</body>
</html>

インライン要素とブロック要素の境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。

ブロック要素 of ブロック要素



ブロック要素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#block_parent{
  align-items: center;/* 縦の位置を中央にする */
  border: 1px solid black;
  display: flex;
  justify-content: center;/* 横の位置を中央にする */
  height: 100px;
  width: 250px;
}

#block_child{
  border: 1px solid blue;
}
</style>
</head>
<body>
<div id="block_parent">
  <div id="block_child">ブロック要素</div>
</div>
</body>
</html>

こちらにもブロックとブロックの境界がわかりやすいように、それぞれ青と黒でボーダーを引いています。

HTML 角を丸くする方法

角を丸くする

HTMLで角を丸くする方法のご紹介です。



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.radius_div{
  border: 1px solid black;
  border-radius: 4px;
  width: 100px;
  height: 40px;
}
</style></head>
<body>
  <div class="radius_div">
  </div>
</body>
</html>

HTML 網掛け&hover テーブルの作り方

HTML 網掛け&hover テーブル

今回は「網掛け&hover テーブル」の作り方をご紹介します。

table header 1table header 2table header 3
table data 1Atable data 1Btable data 1C
table data 2Atable data 2Btable data 2C
table data 3Atable data 3Btable data 3C
table data 4Atable data 4Btable data 4C
table data 5Atable data 5Btable data 5C


これは先日ご紹介した「シンプルなテーブル」の作り方の装飾版となります。
somegoro.hatenablog.com

網掛け、hoverとは

網掛けとは、一行毎にセルの色が変更されることを表しています。網目のような模様なので、このようなテーブルを網掛けテーブルと言います。

hoverとは、マウスオーバー(マウスを上に乗せること)したときの処理を表しています。今回はhoverでセルの色が変わるようにしました。

ソースコードのご紹介

さて、それではソースコードをご紹介しましょう。もちろんコピー&ペーストして使用していただいて結構です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table.shade_table {
	font-size:11px;/* テーブルセルの高さを調整したいときにはここを編集してください */
	border-collapse: collapse;
	background-color: white;
}

table.shade_table th {
	border: 1px solid black;
	padding: 8px;
	background-color: #DDDDDD;
}

table.shade_table td {
	border: 1px solid black;
	padding: 8px;
}

#table_body tr:nth-child(even) {
	background: #EEEEEE;
}

#table_body tr:hover {
  background-color: #FFCC99;
}

</style>
</head>
<body>
  <table class="shade_table">
    <thead>
      <tr><th>table header 1</th><th>table header 2</th><th>table header 3</th></tr>
    </thead>
    <tbody id="table_body">
      <tr><td>table data 1A</td><td>table data 1B</td><td>table data 1C</td></tr>
      <tr><td>table data 2A</td><td>table data 2B</td><td>table data 2C</td></tr>
      <tr><td>table data 3A</td><td>table data 3B</td><td>table data 3C</td></tr>
      <tr><td>table data 4A</td><td>table data 4B</td><td>table data 4C</td></tr>
      <tr><td>table data 5A</td><td>table data 5B</td><td>table data 5C</td></tr>
    </tbody>
  </table>
</body>
</html>

今回は以上となります。

作成してほしいサンプルプログラムがありましたらご連絡ください。

HTML リンクを押せる範囲を拡大する方法

リンクを押せる範囲を拡大する方法

divで範囲を決めて、aはいっぱいに広げる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.link_wrapper{
    border:solid 1px black;
    height:50px;
    position:relative;
    width:200px;
}

.link_wrapper a{
    height:100%;
    position:absolute;
    width:100%;
}

.link_wrapper a:hover {
    background-color:black;
}
</style>
</head>
<body>
  <div class="link_wrapper">
    <a href="#">リンク</a>
  </div>
</body>
</html>

要素aのdisplayをblockにしてしまう方法もある。

HTML5 / CSS3 シンプルなテーブルの作り方

今回はHTML5/CSS3で、シンプルなテーブルの作り方をご紹介します。


久しぶりにWebページを作るときに忘れがちですよね。
また、プログラム経験が浅い方はテーブル作りに手間取ることもあるでしょう。


今回の記事ではそんなテーブルを出来るだけシンプルな形でソースコードまで載せます。もちろんコピー&ペーストOKです。


table header 1table header 2table header 3
table data 1Atable data 1Btable data 1C
table data 2Atable data 2Btable data 2C
table data 3Atable data 3Btable data 3C
table data 4Atable data 4Btable data 4C
table data 5Atable data 5Btable data 5C


ソースコード

上記テーブルのソースコードはこちらです。コピペどうぞ。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table.simple_table {
	font-size:11px;/* ここでテーブルサイズが決定する */
	border-collapse: collapse;
}
table.simple_table th {
	border: 1px solid black;
	padding: 8px;
	background-color: silver;
}
table.simple_table td {
	border: 1px solid black;
	padding: 8px;
	background-color: white;
}
</style>
</head>
<body>
  <table class="simple_table">
    <tr><th>table header 1</th><th>table header 2</th><th>table header 3</th></tr>
    <tr><td>table data 1A</td><td>table data 1B</td><td>table data 1C</td></tr>
    <tr><td>table data 2A</td><td>table data 2B</td><td>table data 2C</td></tr>
    <tr><td>table data 3A</td><td>table data 3B</td><td>table data 3C</td></tr>
    <tr><td>table data 4A</td><td>table data 4B</td><td>table data 4C</td></tr>
    <tr><td>table data 5A</td><td>table data 5B</td><td>table data 5C</td></tr>
  </table>
</body>
</html>


シンプルゆえにソースコードも短く、非常に簡単な作りのテーブルでしたね。


応用編はこちらをどうぞ。
somegoro.hatenablog.com

HTML5/CSS3と筋トレに夢中な話

久しぶりの更新になってしまいました。
久しぶりすぎて90日以上更新のないブログに出てしまう広告が出てしまっている。。。


最近は資格の勉強にプラスして「仕事」と「筋トレ」に力を入れていました。

仕事について

お仕事では無事に転職することが出来まして、現在はHTML5/CSS3/javascriptでWeb画面作りをしています。Web画面作りはやはりとても面白いです。転職では、やっとの思いで辿り着いた最終面接で不採用となるなど一時はどうなることかと思いましたがこうやって楽しく働くことが出来て本当に良かったです。
somegoro.hatenablog.com


2年ほどシステム業界から遠ざかっていたのですが、その間にWeb技術は実に見事な進化を遂げていますね。Web画面作りがさらに楽しくなりました。
jp.techcrunch.com

今務めている会社は業界関係なしに仕事ができるので、これから色々なWeb画面を作れるようで楽しみです。スカウトなどのご連絡いただけた方、転職したばかりなのでご期待に沿うことができず済みません。しかし副業は禁止されていないので、個人的な依頼なら喜んでお受けいたします。


次のお仕事は同僚が炎上させてしまったプロジェクトをお手伝いすることになりそうです。なんでも「Bootstrap」なるフロントエンドのWebアプリケーションフレームワークを使うそうです。使ったことないですがBootstrap公式サイトを見た感じ簡単そうですね。
getbootstrap.com



筋トレについて

約2か月ほど前から筋トレを始めました。きっかけは健康診断です。転職の際に健康診断をしたのですが、自分の体重を見て驚愕しました。学生時代から13キロも減っていたのです。これはマズイと明治のプロテインを購入し筋トレを始めました。

こちらのプロテインは、数多くあるプロテインの中でも価格が安い上にタンパク質含有量も多いので大変おススメです。結構甘いので、体重を増やしたい方には特におススメです。私はこれを飲んで2か月で7キロ増やしました。体脂肪率も少々増えましたが、基準値内には余裕をもっておさまっています。筋トレ&プロテインを継続してあと6キロ増やします。


タンパク質含有量が多いと記載しましたが、自分が一日にどのくらいのたんぱく質を必要としているかご存知ですか?筋肉はもちろんのこと、髪の毛や肌も主成分はタンパク質です。心身ともに健康的に生きていくためにはタンパク質は必要不可欠です。


自分が1日に必要なタンパク質の量は「体重」や「運動強度」によって異なります。詳細は次の記事に記載してありますのでぜひご一読ください。
somegoro.hatenablog.com


それでは近況報告でした。

HTMLのみでアイコンを制御する方法。サイズ・色・動きなど

今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。



以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。
somegoro.hatenablog.com

アイコンを制御する方法

制御したいアイコンに対して、クラスを追加します。具体的な書き方として次の5種類をとりあげて記載します。

・Larger Icons(大きさ倍率制御)
・Unify Icons(種類間の大きさ統一)
・Color Icons(色の制御)
・Animated Icons(動きの制御)
・Rotated & Flipped Icons(傾きの制御)



Larger Icons

アイコンの大きさを制御します。それぞれ標準サイズ、2倍サイズ、3倍サイズ、4倍サイズ、5倍サイズです。


<div class="fa fa-camera-retro fa-lg"></div>
<div class="fa fa-camera-retro fa-2x"></div>
<div class="fa fa-camera-retro fa-3x"></div>
<div class="fa fa-camera-retro fa-4x"></div>
<div class="fa fa-camera-retro fa-5x"></div>



Unify Icons

アイコン表示のサイズを統一します。アイコンのサイズは種類によりそれぞれ違います。そのため、異なる種類のアイコンを使用してリストを作るときにはガタガタになってしまいます。それを回避するため各種アイコンのサイズを揃えます。


また、アイコンを2倍サイズや3倍サイズなどにすると隣り合った要素との幅が狭くなってしまいます。そんなときは、この「fa-fw」を適用すると上手く表示されます。ですのでこの記事では常に「fa-fw」を適用してアイコンを表示しています。(HTMLコードを記載するときはわかりにくいので記載していません)


ホーム
スケジュール
Github
設定

<i class="fa fa-home fa-fw"></i>ホーム
<i class="fa fa-calendar fa-fw"></i>スケジュール
<i class="fa fa-github fa-fw"></i>Github
<i class="fa fa-cogs fa-fw"></i>設定



Color Icons

アイコンの色を制御します。これはHTMLの中に「css」を埋め込んでいるだけです。


<i class="fa fa-android" style="color:#A4C639;"></i>



Animated Icons

アイコンを動かします。待機中(Loading)などに便利です。「fa-spin」だと滑らかに回転、「fa-pulse」だとカクカクに回転します。


<div class="fa fa-spinner fa-spin"></div>
<div class="fa fa-circle-o-notch fa-spin"></div>
<div class="fa fa-refresh fa-spin"></div>
<div class="fa fa-cog fa-spin"></div>
<div class="fa fa-refresh fa-pulse"></div>
<div class="fa fa-spinner fa-pulse"></div>



Rotated & Flipped Icons

アイコンが傾きます。それぞれ90度傾き、180度傾き、270度傾き、傾きなし、ひっくり返しです。


<div class="fa fa-shield"></i>
<div class="fa fa-shield fa-rotate-90"></div>
<div class="fa fa-shield fa-rotate-180"></div>
<div class="fa fa-shield fa-rotate-270"></div>
<div class="fa fa-shield fa-flip-horizontal"></div>
<div class="fa fa-shield fa-flip-vertical"></div>




以上、5種類のアイコン制御方法の紹介でした。次のサイトFont Awesome Iconsでアイコン制御方法をWEB上にアップしてくれています。記事で取り上げたアイコン制御の他にもたくさんの制御方法があります。気になる方はサイトの Example タブから確認してみてください。
fontawesome.com

テキスト領域からはみ出すときに、末尾省略符号(三点リーダー...)で残りを表示させない方法

末尾省略記号の表示のさせ方

今回の記事では、領域が足りないときに三点リーダーで表示する方法をご紹介します。


テキストが領域からはみ出すときに、「...」と表示させて残りを表示させていないWebページをよく見かけますよね。あれです。画像で見るとこんな感じになります。


f:id:somegoro:20160708044151p:plain


私はこの表示方法の仕方を覚えては忘れてを繰り返していました。何度同じこと調べるんだと自分でも思ったので記事にしました。これで私自身の調べる手間も省けます。それでは実際の手順を記載していきます。

手順

1.HTMLで次のように記載

<div class="three-point-test">
三点リーダーのテストをしています。これで指定した横幅以上になれば...で表示されるはずです。この書き方は複数行では対応していません。
</div>


2.cssで次のように記載

.three-point-test {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


以上です。これで、指定した横幅以上の文字は省略されて「...」で表示されます。それでは仕組みを詳しく見ていきましょう。

仕組み

実際に三点リーダーを設定しているのは「text-overflow」です。

text-overflow: ellipsis;

この「text-overflow」を機能させるに、次の3つの設定をする必要があります。

1.横幅の指定

width: 300px;

横幅を指定します。

2.はみ出た部分を表示しない

overflow: hidden;

ボックスの範囲内に内容が入りきらない場合に、はみ出た部分は表示しない。

3.改行禁止

white-space: nowrap;

改行を禁止します。



あまり使わないので忘れがちですが、忘れたときにはまたこのページを見ると良いかと。