CSS・Javascript

  • データベース不要、PHP等が使えなくてもHTMLとJavaScriptだけでMySQLのようなselect文が使えるのはもちろん、whereでの条件設定も使えるという便利なjavascriptDBはお手軽なデータベース構築におススメ。

    db_core.jsのダウンロードは以下のURLから

    http://jsdb.sourceforge.net/usarho.html

    設定方法

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

    <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>

    使い方

    body内で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 selectArr2 = DBTest.Select('select passwd from members where login="joan"');
    DBTest.View(selectArr2,document);
    </script>

    サンプルページ

    上記のコードをブラウザで見るとただの文字だが、body内に以下のデータが書き出されている

    <table>
    <tbody>
    <tr>
    <td>palafrugell </td>
    </tr>
    </tbody>
    </table>

    上記サンプルの場合、1単語1件のみのデータだが、内容に関係無くテーブル形式のデータとして出力される

    解説

    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. MySQLと同様にwhereを使って条件抽出も可能

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

    5. 書き出し

    DBTest.View(selectArr2,document);

    単独で扱うにはこのままでも良いが、ページ内に埋め込むことを考えると出力されるテーブルにidやclassを設定したりテーブル以外のタグで書き出したい時もあるだろう。
    javascriptDBの出力データの成形およびタグの設定については次の記事で掲載する。

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

  • 記号が小さく表示されてしまう時は、スタイルシートで以下のfont-familyを指定するといい。

    font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;

    他の部分には影響させたくない場合は、以下のようにclassで設定しておくといい。

    CSS

    .kigou {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
    }

    HTML

    <span>●や○を含む文字</span>

  • IE11ではユーザエージェントの文字列が、IE10等のいままでのIEの各バージョンとは表記のルールが変更されている。
    そのため、古くから使われてきた、javascriptによるブラウザの振り分けでは判別出来ないケースが起きる。

    (さらに…)

  • Pop EasyはRemodalよりもさらに軽量。jqueryでモーダルウィンドウを実装するためのスクリプト。

    通常版
    jquery.modal.js → 5キロバイト

    min版はさらに軽量で
    jquery.modal.min.js → 2キロバイト

    Remodalと違いデフォルトではスマートフォンには対応していないため、スマートフォン向けサイトで使用する場合はスタイルシートでポップアップウィンドウのサイズを設定する等の必要があるが、エフェクトの指定等も簡単に出来るからサイトの高速化を考えている人にはおススメなスクリプトと言えよう。

    設置は簡単。

    まずは最小限のスタイルシート

    CSS

    <style>
    .modal p {
    	font-size: 14px;
    	text-align: left;
    	margin: 10px 0 0;
    }
    .modal p:hover {
    	cursor: pointer;
    }
    .overlay {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 1000;
    	display: none;
    }
    .modal {
    	display: none;
    	background: #eee;
    	padding: 0 20px 20px;
    	overflow: auto;
    	z-index: 1001;
    	position: absolute;
    	width: 500px;
    	min-height: 300px;
    }
    </style>

    javascriptはbody閉じタグの直前に

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type='text/javascript' src='./js/jquery.modal.js'></script>

    オプションの設定のjavascriptを読み込む

    JAVASCRIPT

    <script type='text/javascript'>
    $(document).ready(function(){
    	$('.modalLink').modal({
    		trigger: '.modalLink',
    		olay:'div.overlay',
    		modals:'div.modal',
    		animationEffect: 'fadeIn',
    		animationSpeed: 400,
    		moveModalSpeed: 'fast',
    		background: '000000',
    		opacity: 0.5,
    		openOnLoad: false,
    		docClose: true,
    		closeByEscape: true,
    		moveOnScroll: true,
    		resizeWindow: true,
    		videoClass:'video',
    		close:'.closeBtn'
    	});
    });
    </script>

    オプションの一部を説明すると

    animationEffect
    スライドインまたはフェードイン

    animationSpeed
    moveModalSpeed
    表示速度

    background
    オーバーレイの背景色

    opacity
    オーバーレイの透明度

    HTML

    呼び出しボタン(リンク)

    <a class="modalLink" href="#modal1">Click</a>

    オーバーレイのためのタグが別途必要

    <div class="overlay"></div>

    ポップアップするモーダルウィンドウはこんな感じ

    <div id="modal1" class="modal">
    	<p class="closeBtn">Close</p>
    	<h2>モーダルウィンドウのサンプル</h2>
    </div>

    サンプルページ

    ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

    ダウンロードはこちら
    http://thomasgrauer.com/popeasy/

  • Remodalは軽量で簡単設置、スマートフォンにも対応している、jqueryでモーダルウィンドウを実装するためのスクリプト。

    どれくらい軽量かと言うと、例えば多機能で多くのサイトで使われているfancyboxを例にあげると、

    jquery.fancybox.js → 49キロバイト

    それに比べて

    jquery.remodal.js → 9キロバイト

    min版はさらに軽量で

    jquery.remodal.min.js → 4キロバイト

    もちろん、fancyboxとの機能差はあるが、コールバックも受けられ、ちょっとしたモーダルウィンドウには十分な機能がある。
    特に、スマートフォン向けサイトのような場合は、回線速度を考え少しでも軽くすることがユーザーエクスペリエンスの向上に繋がることから導入することをおススメする。

    設置は簡単。

    まずはスタイルシートを読み込む

    CSS

    <link rel="stylesheet" href="./css/jquery.remodal.css">

    javascriptはbody閉じタグの直前に

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.remodal.min.js"></script>

    呼び出しボタン(リンク)

    HTML

    <a href="#modal">Click</a>

    ポップアップするモーダルウィンドウはこんな感じ

    HTML

    <div class="remodal-bg">
    	<div class="remodal" data-remodal-id="modal">
    		<h1>Remodal</h1>
    		<p>モーダルウィンドウのサンプル</p>
    	</div>
    </div>

    サンプルページ

    ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

    ダウンロードはこちら
    https://github.com/VodkaBears/Remodal

  • jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

    サンプルページ

    まずはjqueryを読み込む

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

    一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

    JAVASCRIPT

    <script type="text/javascript">
    $(function(){
    	$('#top-link').hide();
    	$(window).scroll(function(){
    		if($(this).scrollTop() > 50){
    			$('#top-link').fadeIn(1000);
    		}else{
    			$('#top-link').fadeOut(500);
    		}
    	});
    	$("#top-link").click(function(){
    		$('html, body').animate({scrollTop:0},300);
    	});
    });
    </script>

    解説

    スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
    スクリプト内の数字「1000」はボタンがフェードインする速度
    スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
    スクリプト内の数字「300」はスクロールする速度

    ボタンを表示させたままで構わなければもっと簡単

    <script type="text/javascript">
    $("#top-link").click(function(){
    	$('html, body').animate({scrollTop:0},500);
    });
    </script>

    スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

    CSS

    <style>
    #top-link{
    	position:fixed;
    	right: 10px;
    	bottom: 30px;
    	padding:10px 0px;
    	width: 100px;
    	text-align:center;
    	color:#fff;
    	cursor:pointer;
    	cursor:hand;
    	background-color:#ccc;
    }
    </style>

    ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

    HTML

    <div id="top-link">Page Top</div>

     

  • 注意書きや補足説明などを記載する際に、文章の頭に「※」「・」「●」「■」などを使うことはよくある。
    1行で終わる場合は問題無いが、長文で複数行に折り返す場合、2行目以降は1字下げ、文章のラインを揃えると見やすくなる。

    2行目から1字下げしたい時のスタイルシートはこの方法

    HTML

    字下げしたい行をdivで囲う
    任意の場所で改行したい時は途中に<br />を入れても構わない。

    <div class="ind1">※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。<br />暗証番号をご存知でないとカードはご利用いただけません。</div>

    CSS

    .ind1 {
    	padding-left: 1em;
    	text-indent: -1em;
    }

    2文字下げたい場合

    HTML

    <div class="ind2">※※ご利用になる場合は売上票へのサインとご本人による暗証番号の入力が必要です。暗証番号をご存知でないとカードはご利用いただけません。</div>

    CSS

    .ind2 {
    	padding-left: 2em;
    	text-indent: -2em;
    }

    なお、UTF-8を使用し文章の頭に「●」「■」「○」「×」といった記号を使った時、ブラウザで表示するとほかの文字小さくなることがある。
    文字幅が1文字分にならず、せっかく綺麗に1文字下げているのに揃わない。

    記号が小さく表示されてしまう時はスタイルシートで以下のfont-familyを指定するといい。

    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;

    フォントを全体に影響させたくない場合は、上記の「ind1」や「ind2」の中に指定しても良い。

    .ind1 {
    	padding-left: 1em;
    	text-indent: -1em;
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
    }
  • ウェブサイトの表示は高速であればあるほどユーザーの離脱率は低くなりUX(ユーザーエクスペリエンス)も向上する。
    表示速度もサイト評価の対象となるとGoogleもコメントしているように、サイトの高速化は急務といえる。

    大きな変更を必要としない高速化として、スタイルシートの最適化、圧縮、軽量化は効果的な方法。

    検索すると様々なcss圧縮のウェブサービスが見つかるが、難読化がメインだったり、圧縮のレベルを設定できないなど、不便なサイトも多い。
    最適化・軽量化の処理をした後も、サイトの更新等でcssの修正が必要となる場合も多いことから「適度な軽量化」が出来るサイトとして、以下のサイトをおススメする。

    http://e-optimize.jp/services/csstidy/css_optimiser.php

    使い方は簡単。

    1. ページ左側にある「CSS Input」のテキストボックスの中にcssファイルの中身をペーストするか、「URLから入力」で最適化・軽量化したいcssファイルのURLを指定する。

    2. 実行ボタンを押す。

    3. 画面下部に最適化・軽量化されたcssファイルが表示される。

    4. 表示されたcssファイルをコピーして保存。

    最適化・軽量化されたcssファイルの上部には

    入力: 6.901KB, 出力:4.964KB, 圧縮率: 28.1% (-1937 Bytes)

    のように表示されるので、どれだけ圧縮、軽量化できたかも確認できる。

    また、オプションとしてCode LayoutとOptionsの項目があり、

    Code Layoutでは

    圧縮率(コードレイアウト)を

    最高 (改行なし)
    高 (セレクタ1行表記)
    標準 (プロパティごと改行)
    低 (プロパティをインデント)

    からプルダウンで選択することが出来る。

    Optionsでは

    CSSの内容を保護する
    セレクタをアルファベット順で整列(注意)
    プロパティをアルファベット順で整列
    セレクタの再編成
    ショートハンドCSSの最適化
    colorの値を簡略化する
    font-weightを数値にする
    セレクタを小文字にする
    プロパティの文字:
    変更なし   小文字   大文字
    不要なバックスラッシュを削除
    最後のプロパティには ; をつけない
    規格外のプロパティは削除
    タイムスタンプを追加
    最適化の結果を保存する

    からチェックボックスで有効にする項目が指定出来る。

    今後の修正を必要としないcssファイルの場合は圧縮率を「最高」にしてもいいが、修正や追加などのメンテナンスが必要なcssファイルの場合は

    標準 (プロパティごと改行)

    がおススメ。
    また、Optionsは以下の

    colorの値を簡略化する
    font-weightを数値にする
    不要なバックスラッシュを削除

    にチェックのままで良いだろう。

    なお、最適化のためにcssファイル内のコードの順序等も変更されるから、必ず元のcssファイルは保存しておき、表示に問題が無いことを確認することが大切。

  • googleも推奨している新しいAdsenseは非同期になり表示が早くなるという利点もある。

    非同期広告コードの例

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins
    style="display:inline-block;width:300px;height:250px"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
    </ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    Adsenseはページに3個まで設定可能だが、各非同期コードに含まれるadsbygoogle.jsは1つで良いのだろうか、それともそれぞれの広告に付ける必要があるのか。

    この疑問にはAdSenseのヘルプページ「よくある質問」で答えられている。
    https://support.google.com/adsense/answer/3221666?hl=ja

    ページ上に複数の広告コードがある場合、各広告ユニットに

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    を含める必要がありますか?

    いいえ、その必要はありません。adsbygoogle.js は 1 回だけ読み込まれます。

    ということで、adsbygoogle.jsは1つにまとめられる。

  • Javascriptも使わず、スタイルシートのみで簡単にテーブルのデザインを変更して、スマートフォン等でも見やすくすることが可能です。

    CSS

    /* 通常時の設定 */
    #list-tbl{
    	border-collapse: collapse;
    }
    #list-tbl th{
    	width: 180px;
    }
    	#list-tbl th,
    	#list-tbl td{
    	border: 1px solid #ccc;
    }
    
    /* 800px以下になった場合の設定 */
    @media only screen and (max-width:800px){
    	#list-tbl th,
    	#list-tbl td{
    		width: auto;
    		display: list-item;
    		list-style-type: none;
    		border: none;
    	}
    	#list-tbl th{
    		color: #fff;
    		background: #ccc;
    	}
    }

    HTML

    <table id="list-tbl">
    <tbody>
    <tr><th>1月3日</th><td>南方週末社説差し替え事件。同月7日より出版の自由を求めるデモが行われた。</td></tr>
    <tr><th>1月13日</th><td>シボレー・コルベット7代目モデル(C7型)がアメリカの「デトロイトモーターショー13」プレビューイベントにて発表される。</td></tr>
    <tr><th>1月16日〜20日</th><td>アルジェリア南部イナメナスの天然ガス関連施設をイスラム系武装勢力が襲撃し、日本人技術者を始めとする多数の死傷者が発生した。(詳細→アルジェリア人質拘束事件)</td></tr>
    <tr><th>1月17日</th><td>ソマリアを正式承認。国交を樹立</td></tr>
    <tr><th>1月20日</th><td>アメリカ合衆国大統領就任式。2012年11月の選挙の結果により、バラク・オバマ大統領が続投でアメリカ大統領に就任した。</td></tr>
    <tr><th>1月22日</th><td>ロシアの小型衛星BLITSがスペースデブリに衝突。BLITSは衛星としての機能を喪失。当初は2007年1月11日に破壊された中国の気象衛星風雲1号Cの破片と思われていた。<br />スマトラ島の北部、アチェ州直下でマグニチュード(M)5.9の地震が発生、14歳の少女1人が死亡、15人が負傷した。(詳細→スマトラ島地震 (2013年1月))</td></tr>
    </tbody>
    </table>

    PC(ウィンドウサイズ800px以上の場合の表示)
    スクリーンショット 2013-06-21 14.41.57

    スマートフォン等(ウィンドウサイズ800px未満の場合の表示)
    スクリーンショット 2013-06-21 14.43.34