CSS・Javascript

  • 海外からの利用者に向けて二カ国語や多言語のサイトを構築する時、アクセスページなどに埋め込むマップもそのページの対応言語に合わせたいケースはよくある。
    基本的にはアクセスしたユーザーの環境により表示は変わるのだが、クライアントの担当者が確認する時に日本語で地図が表示されているのは気持ち悪い。
    (さらに…)

  • bxsliderのデフォルトで設定されている影を消すのは以前のエントリーで書いたが、ページに組み込んだ時にローテーション画像の位置がずれて気になる場合がある。
    (さらに…)

  • スマートフォンやタブレットに対してワンソースで対応するレスポンシブルサイトが流行ってきているが、テキストの流し込みやGoogleMapの表示を常に一定の縦横比で表示するようにしたい時はこんなスタイルシートを使うといい。

    (さらに…)

  • 前回の「iOS7で使われる極細のHelvetica書体をcssで指定したい時」では、iOS7のシステム他で採用された極細のHelveticaNeue-UltraLightをスタイルシートで指定する方法を解説したが、日本語サイトの場合、タイトルのみに限定しても日本語が混じるケースが多いだろう。
    実際、HelveticaNeue-UltraLightのみの指定では、日本語のフォントは太いままで、かなり不自然になる。

    (さらに…)

  • iOS7のシステム他で採用された極細の欧文書体。
    この書体はHelveticaと呼ばれるフォントファミリーのひとつであり、表示出来るモバイル端末はフォントがインストールされているiPhoneやiPadに限定され、残念ながらAndroidでは表示出来ない。
    (さらに…)

  • サイトのロゴ等、テキストにタグを指定して画像に置き換える方法は定番だが、text-align:rightを使いテキストを右揃えで使っている場所ではtext-indent:-9999pxの方法は使えない。
    (さらに…)

  • 日時データ(2014-05-01 23:59:59)をTwitterなどで使われている「○秒前」「○分後」「○時間前」「○日前」のような表記に変換するには、以下のスクリプトを使う。
    (さらに…)

  • 三点リーダとは、いわゆる中黒「・」が3つ並んで1文字分になっている記号のこと。
    (さらに…)

  • JavascriptのみでデータをMySQLのように扱えるJavascriptDBは既存のデータの抽出にも使える。
    (さらに…)

  • JavaScriptのみでデータをMySQLのように使えるjavascriptDBの使い方(その1)で、javascriptDBの簡単な設定方法は説明したが、ページ内に埋め込むことを考え、スタイルシートが使えるように出力されるテーブルにidやclassを設定したり、タグを設定するための方法を説明する。

    設定方法

    jqueryおよびダウンロードしたdb_core.jsを読み込む

    JAVASCRIPT

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="db_core.js"></script>

    同様にheader内でjavascriptDBの設定
    (別ファイルにしても構わない)

    JAVASCRIPT

    <script>
    var DBTest = new Database ("DBTest");
    DBTest.CreateTable("members",Array("id","login","passwd","tel"));
    
    DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
    DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));
    
    var selectArr1 = DBTest.Select('select * from members');
    var selectArr2 = DBTest.Select('select passwd from members where login="joan"');
    
    var selected1 = mView(selectArr1);
    var selected2 = mView(selectArr2);
    
    $(document).ready(function(){
    	$("#output1").html(selected1);
    	$("#output2").html(selected2);
    });
    
    function mView (o){
    	var res = "<table>";
    	for(i = 0; i < o.length; i++){
    		res += "<tr>";
    		for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
    		res += "</tr>";
    	}
    	res += "</table>";
    	return res;
    }
    </script>

    ボディ内の書き出したい場所にid=”output1″、id=”output2″を設置

    HTML

    <body>
    
    <h2>select * from members</h2>
    <div id="output1"></div>
    
    <h2>select passwd from members where login="joan"</h2>
    <div id="output2"></div>
    
    </body>

    サンプルページ

    上記サンプルにアクセスすると以下のデータが出力される

    <h2>select * from members</h2>
    
    <div id="output1">
    	<table>
    		<tbody>
    		<tr>
    			<td>1</td>
    			<td>rosibel</td>
    			<td>clau</td>
    			<td>934856890</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>joan</td>
    			<td>palafrugell</td>
    			<td>934856890</td>
    		</tr>
    		</tbody>
    	</table>
    </div>
    
    <h2>select passwd from members where login="joan"</h2>
    
    <div id="output2">
    	<table>
    		<tbody>
    		<tr>
    			<td>palafrugell</td>
    		</tr>
    		</tbody>
    	</table>
    </div>

    解説

    1. データベースをセット

    var DBTest = new Database ("DBTest");

    2. テーブル名とカラム名をセット

    DBTest.CreateTable(“members”,Array(“id”,”login”,”passwd”,”tel”));

    3. データを挿入

    DBTest.Insert("members",Array(1,"rosibel","clau","934856890"));
    DBTest.Insert("members",Array(2,"joan","palafrugell","934856890"));

    4-1. セレクト文にて全データを出力(mySQLと同様)

    var selectArr1 = DBTest.Select('select * from members');

    4-2. MySQLと同様にwhereを使って条件抽出も可能

    var selectArr2 = DBTest.Select('select passwd from members where login="joan"');

    5. 各抽出データをテーブルに成形 ※1

    var selected1 = mView(selectArr1);
    var selected2 = mView(selectArr2);

    6. 各データをjqueryを使って書き出し

    $(document).ready(function(){
    	$("#output1").html(selected1);
    	$("#output2").html(selected2);
    });

    ※1 javascriptDBの結果をテーブルに成形するfunction

    function mView (o){
    	var res = "<table id='my-tbl'>";
    	for(i = 0; i < o.length; i++){
    		res += "<tr>";
    		for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
    		res += "</tr>";
    	}
    	res += "</table>";
    	return res;
    }

    ※1で javascriptDBの結果をテーブルタグで書き出すように設定しているが、サンプルのように<table>にidを設定(<table id=’my-tbl’>)したり、必要に応じて<hd>の代わりに<th>を使ったり<td class=’col-ab’>のようにすることができる。
    あとは書き出したタグに対応したスタイルシートを設定すればいい。

    CSS

    <style>
    h2 {
    	margin-bottom:1px;
    	font-weight:normal;
    	font-size:1em;
    }
    table {
    	border-collapse: collapse;
    }
    table td {
    	padding:2px 8px;
    	text-align:center;
    	border:1px solid #ccc;
    }
    </style>