デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

CSS・Javascript

  • 英語版のサイトで埋め込むGoogle Mapも英語表示にしたいときはこの方法

    ·

    master

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

  • bxsliderで画像のズレに悩んだらこの方法

    ·

    master

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

  • ブラウザ幅に合わせて拡大縮小しつつ縦横比を一定にしたい時のCSSはこの方法

    ·

    master

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

    (さらに…)

  • iOS7に似合う極細書体を日本語部分に指定したい時の裏技

    ·

    master

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

    (さらに…)

  • iOS7で使われる極細のHelvetica書体をcssで指定したい時

    ·

    master

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

  • text-indent:-9999pxが使えない時はこの方法

    ·

    master

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

  • 日時データを経過時間に変換するPHPとJAVASCRIPTの方法

    ·

    master

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

  • 三点リーダがブラウザで文字の下側に揃って表示されてしまう時のcss解決方法

    ·

    master

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

  • AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法

    ·

    master

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

  • javascriptDBで出力されるタグを変更したい時はこの方法

    ·

    master

    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>