ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2024年11月5日火曜日

【JavaScript】画面の座標に関するものCSSだけで吹き出しをつくる

仕事で、吹き出し用の部品を作らなければならなくなったので、実装方法しらべてみました。 以下の参考URLが分かりやすかったので、これを参考にしたら対応できました。
 【参考URL】
投稿者 時刻: 0 件のコメント:
ラベル: , , , , , ,

2024年11月4日月曜日

【JavaScript】画面の座標に関するもの

 要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできる JavaScript のプロパティがたくさんあります。
 JavaScript では、要素を移動したり配置するときに、座標を正しく計算するためにしばしばそれらを必要とします。 
以下が参考にした情報です。

 (1) 位置情報 ・要素の位置座標を取得する（「position()」と「offset()」） https://www.sejuku.net/blog/65040 　
⇒「position()」は、特定のHTML要素の位置座標を取得することができるメソッドで、画面上の座標ではなくあくまでも親要素から見た位置座標である 　
⇒「position()」が親要素からの位置座標なのに対して「offset()」は画面上の位置になる






 (2) サイズ 

https://taneppa.net/jquery-size/ 

ページ全体のサイズは

$(document).width(); 

$(document).height();

ブラウザサイズは
$(window).width();
 $(window).height();

(3) スクロール 
どれだけページをスクロールしたかは「scrollTop」関数を使用します 
var vScrollDistance = $(window).scrollTop();
 また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。
 var hScrollDistance = $(window).scrollLeft();

①スクロール位置を取得・設定する方法
・画面のスクロール位置取得設定

// 画面の水平方向のスクロール位置を取得
var x = window.scrollX;
// 画面の垂直方向のスクロール位置を取得
var y = window.scrollY;
// 画面の左上にスクロール位置を設定する
window.scroll(0, 0);
// 画面の左から50ピクセル、上から100ピクセルにスクロール位置を設定する
window.scroll(50, 100);
// scrollTo()も動きは同じ
window.scrollTo(50, 100);


②要素のスクロール位置取得設定
// 要素を取得
var ele = document.getElementById('ele');
// 要素の水平方向のスクロール位置を取得
var x = base.scrollLeft;
// 要素の垂直方向のスクロール位置を取得
var y = base.scrollTop;
// 画面の左上にスクロール位置を設定する
ele.scrollLeft = 0;
ele.scrollTop = 0;


<a href="https://usagidoki.com/js-get-set-scroll/">https://usagidoki.com/js-get-set-scroll/</a>

 (4) ジオメトリ 
参考URL：














(5)getBoundingClientRect() 
要素の寸法と、そのビューポートに対する相対位置に関する情報を返します。
var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect();

console.log('要素の幅:', rect.width); console.log('要素の高さ:', rect.height); console.log('要素の上端からの距離:', rect.top); console.log('要素の左端からの距離:', rect.left); console.log('要素の下端からの距離:', rect.bottom); 

console.log('要素の右端からの距離:', rect.right); 

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

(6) マウス座標系




投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2023年1月22日日曜日

【WEBサイト】Chromeのブラウザキャッシュ

 モジュール更新して、WEBサイトみたら、jsファイルが古いものを使っていることがありました。

以下のサイトにかいてありますが、よくある問題なのですが、困ったものです。 

https://www.magical-remix.co.jp/magicalog/archives/3020

「更新したはずのサイトがお客さんのパソコンブラウザからは更新されてない…ということはよくある話です。そのたび、「キャッシュが原因ですのでキャッシュをクリアしてください。」と言ってきました。
大体最近は「原因はキャッシュです。Ctrl+F5してください。」と言ってます。。。」

 

原因はキャッシュファイルを見ているので、その対策検討するのにChromeのキャッシュファイルについて調べてみました。

 

①キャッシュファイルの場所

以下のサイトみるとキャッシュファイルの場所が記載されています。

実際みると暗号化されているようで中身は正しくみれませんでした。

https://www.tipsfound.com/chrome/01001 


場所→C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\Cache

 

②キャッシュファイルの場所

ブラウザのキャッシュ無効化

→ChromeであればデベロッパーツールのNetworkタブにある「Disable cache」にチェックを付けることでキャッシュを無効にすることができます。

 

https://magazine.techacademy.jp/magazine/39352

 

後はIISの設定か、HTMLにタグ追加とか行う方法もあるようです

他のブラウザは以下サイト参考にするといけそうです。

https://blanche-toile.com/tools/webdev-browser-cache

 

投稿者 時刻: 0 件のコメント:
ラベル: , , , , , ,

2023年1月17日火曜日

【CSS】ボタンとスタイル

 ボタンにスタイルを付けってかっこよくするために勉強するのによいサイトがありました。

https://jajaaan.co.jp/css/button/


ボタングループ化して、かっこよくするには以下のサイトを参考すると勉強になります。

https://coliss.com/articles/build-websites/operation/css/css-tutorial-patterned-buttons-by-red-team-design.html

投稿者 時刻: 0 件のコメント:
ラベル:

2021年5月21日金曜日

Webアイコンフォントの作り方

 ホームページでアイコン作成するのに、便利なツールがありました。

以下のサイトで詳しく説明されているので、手順通りに大なうとデモページが作成できます。

デモページを参考にすると、アイコンをうまく使うことができます。

 

【参考ページ】

 https://qiita.com/m-nakamura/items/abc871b1da6cfaf4db42

【Webアイコンフォントツール：IcoMoon】

https://icomoon.io/app/#/select

投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2016年8月22日月曜日

【HTML5/CSS】リスト要素に、マークに画像を使用する際の方法

 ホームページのリスト要素の先頭に画像を付けたい時があります。
そこで、その方法について、調べてみました。

下の画像が、リスト要素に矢印画像を付けた例です。



１、HTML
 headタグ内に使用するcssファイルを定義します。
<link rel="stylesheet" href="./css/test.css" type="text/css">


body要素にリスト要素を定義します。
<body>
    <header>
        <div class="navi_spec" style="float:none;">
            <ul class="spec-ul">
                <li class="sample1"><a href="#top">リスト１</a></li>
                <li class="sample1"><a href="#">リスト２</a></li>
            </ul>

            <div class="navi_spec2" style="float:none;margin-top:-20px">
                <ul class="spec-ul2" style="background:#715c1f">
                    <li class="sample2"><a href="jiko_sp.html#top">リスト３</a></li>
                    <li class="sample2"><a href="houmon_sp.html#top">リスト４</a></li>
                </ul>
            </div>
        </div>
    </header>
    <h1>Test App</h1>
     <div id="content"></div>
</body>
 
２、CSS
 test.cssファイルに以下リスト要素を定義します
         ul {
            list-style-type:none;
            line-height:1.3em;
        }
        li.sample1{
            padding-left:22px;
            background-image:url("arrow_black2.png");
            background-repeat:no-repeat;
            background-position:0px 0px;
        }
        li.sample2{
            padding-left:22px;
            background-image:url("arrow_white2.png");
            background-repeat:no-repeat;
            background-position:0px 0px;
        }

【参考URL】
http://www.webword.jp/cssguide/ref-list/index5.html
投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2016年7月30日土曜日

【HTML5/CSS】印刷を横で出力する方法

ブラウザで縦だと全部印刷できずに、横であれば全部印刷できるホームページがあります。
ブラウザの印刷設定で横にすれば、横印刷できます。

そこで、最初から横印刷できるようにCSSで設定する方法について記載します。


CSSに次のように記載する（A４横向き印刷）

@page { size: A4 landscape; }


sizeプロパティ
　　@pageで定義するページボックスのサイズと向きを指定する際に使用します。
landscape
    横位置、サイズは出力先に合わせて自動的に設定


数値でサイズを指定する場合は次のようになります。
@page { size: 210mm 297mm } /* A4タテと同じ */ 


 マージン指定もできます(10mm設定)。
@page {
  size: A4;
  margin: 10mm;
}


 
 
投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2016年7月19日火曜日

【HTML5/CSS】Webサイトで背景色が印刷できない場合にCSSで行うこと、及びブラウザの設定

Webサイトを印刷すると、背景色が印刷できない現象があり、調べて対応策をまとめてみました。

１、現象
例として、Yhoo!Japanを印刷使用とすると、次のように背景色が印刷できません。


対策方法を実施することで次のように背景色も印刷することができるようになります。

２、対応策
(1) CSSでの対応方法
 プログラムで対応するには、Canvasで書けばできるという話もありますが、手間がかかります。
Chromeの場合は、CSSに下記のように記述することで、背景色も印刷することができます。

body {
    -webkit-print-color-adjust: exact;
}


(2) ブラウザの設定方法
 Webサイトは、デフォルトは、印刷に不要な部分を印刷しない設定になっています。
おそらく、無駄にカラー印刷を省くためのような気がします。
そこで、各ブラウザで次の設定をすると、背景印刷ができます。

背景色まで含めて印刷したいのにプレビューで表示されない場合は下記の内容を確認して下さい。

・Chromeの場合
①「GoogleChromeの設定」から「印刷」をクリック
②「詳細設定」をクリック
③「背景のグラフィック」 のチェックボックスをオン

・firefoxの場合
①[ファイル]メニューの[ページ設定]をクリック
②[書式とオプション]の[背景色と背景画像も印刷]のチェックボックスをオン

・IEの場合
①[ファイル]メニューの[ページ設定]をクリック
②ページ設定ダイアログで　[背景の色とイメージを印刷する]のチェックボックスをオン

・Edgeの場合
残念ながら、Edgeには設定はないそうです。
IEで印刷してくださいと、下記URLでMicrosoftサポートが回答してありました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10150795920




【参考URL】
http://hacknote.jp/archives/11460/
 http://lifeon.lion.co.jp/print.htm

投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年6月15日水曜日

【HTML5/CSS】pタグのtitle属性がipadで表示されない対応方法（ツールチップ)

pタグでtitleを設定すると、パソコンでは、titleが表示されます。
（ツールチップ）
しかし、ipadではtitleが表示されません。
どうやら、ipadだとtitle表示すると、タッチしているので、問題なのだそうです。

そこで、タッチ時(mouseover)に、divタグをbodyに追加して、擬似ツールチップ表示します。

その例を紹介します。

１、HTMLとJavaScriptでタイトル設定






(1) HTML
divタグで、id =cpair_details_td1を定義する

　<div id="cpair_details_td1"></div>
               
(2) Javascript（Typescript)
jQueryで、、id =cpair_details_td1にpタグを追加する。
tittleを定義して、ツールチップ表示する

   　 $('#cpair_details_td1').append($('<p class="td_result1" title="総決済損益額">').text("総トレード損益"));


２、mouseoverとdivタグ追加
id=td_result1のmousemoveイベントとmouseoutイベントを定義して、
ipadでタッチしたときの処理定義する。

id_bodyはbody要素のidです。
body要素にdiv要素(id=ptips）を追加して、ツールチップ表示します。
InfoBackgroundはtitle表示時のシステムの持っている背景色です。

               $(".td_result1")
                    .mouseover(function (e) {
                        var str = $(this)[0].title;
                        $("#id_body").append("<div id='ptips'>" + str + "</div>");

                        $("#ptips")
                            .css("position", "absolute")
                            .css("background", "InfoBackground")
                            .css("top", (e.pageY) + 15 + "px")
                            .css("left", (e.pageX) + 15 + "px")
                            .css("display", "none")
                            .css("filter", "alpha(opacity = 85) ")
                            .css("opacity", "0.85")
                            .fadeIn("fast")
                            ;
                    }).mouseout(function () {
                        $("#ptips").remove();
                    });


投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年5月20日金曜日

【HTML5/Javascript】Canvasを使った損益グラフを作成してみよう

HTML5のCanvasの使い方を【参考URL】にある「損益グラフ」を使って学習してみました。


1. HTML
 index.htmlというファイルを作成して、以下のコードを記載します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>損益グラフ</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <h1>損益グラフ</h1>
    <canvas id="canvasProfitLoss" width="1200" height="600" style="border:1px solid #000000;"></canvas>
    <script type="text/javascript" src="test.js" charset="Shift-JIS"></script>
</body>
</html>

JavaScriptを外部ファイル(test.js)で記載して、読み込みます。
日本語を使うため、charset="Shift-JIS"を記載してください。


2. Javascript
(1)canvasにグラフ作成する関数を外部ファイル(test.js)に記載する
（ProfitLossChartという関数で、クラスの代わりとなります）
この関数を使って、返り値のインスタンス定義する(this.???がインスタンスが持つパラメータになります)

function ProfitLossChart(minPrice, minProfitLoss, maxPrice, maxProfitLoss, unitsPrice, unitsProfitLoss) {
            this.canvas = document.getElementById("canvasProfitLoss");
            this.minPrice = minPrice;
            this.minProfitLoss = minProfitLoss;
            this.maxPrice = maxPrice;
            this.maxProfitLoss = maxProfitLoss;
            this.unitsPrice = unitsPrice;
            this.unitsProfitLoss = unitsProfitLoss;
            this.tickSize = 20;
            this.context = this.canvas.getContext('2d');
            this.rangePrice = this.maxPrice - this.minPrice;
            this.rangeProfitLoss = this.maxProfitLoss - this.minProfitLoss;
            this.unitPrice = this.canvas.width / this.rangePrice;
            this.unitProfitLoss = this.canvas.height / (this.rangeProfitLoss);
            this.centerProfitLoss = Math.round(Math.abs(this.minProfitLoss / this.rangeProfitLoss) * this.canvas.height) ;
            this.centerPrice =  + Math.round(Math.abs(this.minPrice / this.rangePrice) * this.canvas.width);
            this.iteration = (this.maxPrice - this.minPrice) / 1000;
            this.scalePrice = this.canvas.width / this.rangePrice;
            this.scaleProfitLoss = this.canvas.height / this.rangeProfitLoss;
        };

※javascriptのインスタンスについては、次のURL一読するとよいと思います。
http://qiita.com/nmta/items/696eeab1d6b96e3bfc1a

コンテキスト(this.context)は、canvas に描画するための API にアクセスできるオブジェクトとなっています。

(2)X軸作成
刻みとラベルを表示した軸を作成する関数を定義します。
(クラス（ProfitLossChart）に関数を定義する）

    ProfitLossChart.prototype.drawPriceAxis= function () {
        var context = this.context;
        context.save();
        context.beginPath();   // 現在のパスをリセットします
        //左から10 pix オフセット, y 方向は中心(開始点設定）
        context.moveTo(10, this.centerProfitLoss);
        //水平線を作成
        context.lineTo(this.canvas.width, this.centerProfitLoss);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();

        // 右側に刻みを書く
        var pricePosIncrement = this.unitsPrice * this.unitPrice;
        var pricePos, unit;
        context.font = this.font;
        context.textAlign = 'center';
        context.textBaseline = 'top';

        pricePos =  pricePosIncrement;
        unit = this.unitsPrice ;
        while (pricePos < this.canvas.width) {
            //刻み描画
            context.moveTo(pricePos , this.centerProfitLoss - this.tickSize / 2);
            context.lineTo(pricePos , this.centerProfitLoss + this.tickSize / 2);
            context.stroke();
            //刻みにラベル描画
            context.fillText(unit + this.minPrice, pricePos, this.centerProfitLoss + this.tickSize / 2 - 30);
            unit += this.unitsPrice;
            pricePos = Math.round(pricePos + pricePosIncrement);
        }

        //X軸中心にラベルを表示
        context.font = "12px 'ヒラギノ角ゴシックProN W3'";
        context.fillStyle = "green";
        context.fillText("価格(円)", this.canvas.width / 2, this.centerProfitLoss + this.tickSize / 2 -50);
        context.restore();
    };

(3) Y軸(利益/損失）作成
ProfitLossChart.prototype.drawProfitLossAxis = function () {
      var context = this.context;
      context.save();
      context.beginPath();
      //縦軸描画
      context.moveTo( 20, 0)
      context.lineTo( 20, this.canvas.height);
      context.strokeStyle = this.axisColor;
      context.lineWidth = 2;
      context.stroke();
      // 刻み描画
      var profitLossPosIncrement = this.unitsProfitLoss * this.unitProfitLoss;
      var profitLossPos, unit;
      context.font = this.font;
      context.textAlign = 'right';
      context.textBaseline = 'middle';
      profitLossPos = this.centerProfitLoss - profitLossPosIncrement;
      unit = this.unitsProfitLoss;
      while (profitLossPos > 0) {
          context.moveTo(20 - this.tickSize / 2, profitLossPos);
          context.lineTo(20 + this.tickSize / 2, profitLossPos);
          context.stroke();
          context.fillText(unit, 70 - this.tickSize / 2 - 3 , profitLossPos);
          unit += this.unitsProfitLoss;
          profitLossPos = Math.round(profitLossPos - profitLossPosIncrement);
      }
      profitLossPos = this.centerProfitLoss + profitLossPosIncrement;
      unit = -1 * this.unitsProfitLoss;
      while (profitLossPos < this.canvas.height) {
          context.moveTo(20- this.tickSize / 2, profitLossPos);
          context.lineTo(20 + this.tickSize / 2, profitLossPos);
          context.stroke();
          context.fillText(unit, 70 - this.tickSize / 2 - 3, profitLossPos);
          unit -= this.unitsProfitLoss;
          profitLossPos = Math.round(profitLossPos + profitLossPosIncrement);
      }
        //　Y軸ラベルを作成
      context.font = "12px 'ヒラギノ角ゴシックProN W3'";
      context.fillStyle = "green";
      context.fillText("利益/損失(円)", this.centerPrice + 140, this.canvas.height / 4);
      context.restore();
  };

(4) 損益ライン作成
ProfitLossChart.prototype.drawEquation = function (drawFunction) {
      var context = this.context;
      context.save();
      this.transformContext();

      context.beginPath();
      context.moveTo(this.minPrice, drawFunction(this.minPrice));

      for (var x = this.minPrice + this.iteration; x <= this.maxPrice; x += this.iteration) {
          context.lineTo(x, drawFunction(x));
      }
      context.restore();
      context.lineJoin = 'round';
      context.lineWidth = 3;
      context.strokeStyle = 'red';
      context.stroke();
      context.restore();
  };

(5) コンテキストの変換
    ProfitLossChart.prototype.transformContext = function () {
      var context = this.context;
      this.context.translate(this.centerPrice, this.centerProfitLoss);
      context.scale(this.scalePrice , -this.scaleProfitLoss);
  };

(6) 実行
パラメータを定義し、インスタンス作成し、描画実行する
インスタンスは、ファンクション（ProfitLossChart)をnewすることで作成することができます。 
 
    var minPrice = 0;
    var maxPrice = 2200;
    var minPL = -10000;
    var maxPL = 10000;
    var unitsPrice = 50;
    var unitsProfitLoss = 500;

    //　インスタンス(chart)作成
    var chart = new ProfitLossChart(minPrice, minPL, maxPrice, maxPL, unitsPrice, unitsProfitLoss);
  chart.drawPriceAxis();
  chart.drawProfitLossAxis();

  //損益グラフ作成
   var pStrike = 2110;
   var pCall = 5.5;
   chart.drawEquation(function (x) {
        if (x > pStrike)
        {
            return 100 * (x - pStrike - pCall);
        }
        else
        {
            return -(100 * pCall);
        }
   });


【参考URL】
http://www.codeproject.com/Articles/1100873/Charting-Profit-Loss-of-Financial-Options-Using-HT
投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年5月10日火曜日

【HTML5/CSS】画像を使わないでCSS3でローディング用アニメーションをつくってみよう

HTML5のサイト作成にて、時間がかかる処理の時にLoadingアイコンを表示しているサイトがよくあります。
そこで、Loading用のアイコン表示させる方法について調べてみました。

１、ソースコード


(!) HTML5(htmlファイル)
 ローディングを表示する<div>をHTMLに用意しCSS3でアイコンをつくる

    <div  id="loader">Loading...</div>
    <div id="loader_p">
        <p> Loading...</p>
    </div>

(2) CSS(cssファイル)
#loader {
  position: absolute;
  font-size: 10px;
  text-indent: -9999em;
  border-radius: 50%; 
  border: 10px solid #00F;
  border-right-color: transparent;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
#loader,
#loader:after {
  border-radius: 50%;
    width: 60px;
    height: 60px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

 #loader_p
{
   position: absolute;
   margin-top:0px;
   margin-left:0px;
   width: 60px;
   height: 60px;
}
#loader_p > p
{
   margin-top:30px;
   margin-left:12px;
   font-size:12px;
   color:#00F;
}

２、説明
(1) HTML
id="loader"がくるくる回る円のの部分です。
id="loader_p"がLoading...と表示する文字の部分です。

 (2) CSS
 1.1秒回転する”load8”アニメーションを無限（infinite）に繰り返すように指定します。
easingはlinearで設定しています。
  animation: load8 1.1s infinite linear;

Safari、Opera、iOS Safari、Android Browser用にベンダープレフィックスの『-Webkit-』をつけます。


@keyframesは、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を指定します。

必ず指定しないといけないのは、最初と最後で、0% (または from) と100% (または to) で指定します。
回転させるので、rotateで回転角度を指定します。
 @keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

id="loader_p"のCSSは、表示位置と幅高さを指定しています。
特にアニメーションは指定していません。

【参考URL】
http://www.html5-memo.com/webtips/css3-loading/
http://scene-live.com/page.php?page=77
http://projects.lukehaas.me/css-loaders/

http://sterfield.co.jp/designer/css3%E3%81%AEanimation%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%82%89%E4%BA%88%E6%83%B3%E4%BB%A5%E4%B8%8A%E3%81%AB%E7%B0%A1%E5%8D%98%E3%81%A0%E3%81%A3%E3%81%9F%EF%BC%81/
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2016年4月8日金曜日

【Webサイト】Webサイトを表示を早くする方法

 Webサイト表示(表示までの待ち時間)を早くすることに記述していある次のサイトで勉強になったので、覚えておくと良いことをまとめておきました。

【参考URL】
http://www.codeproject.com/Articles/26376/Speed-Up-Your-Website-By-Example

1、ファイル
(1) CSS/JavaScript/Imageファイルを小さくする
(2)  CSS/JavaScriptを一つのファイルに結合する
　（Imageも可能であれば一つにする）
(3) ブラウザキャッシュを使うようにする
　　HTMLの<head>タグにExpiresを設定する
 Expires:meta要素で、キャッシュの有効期限を指定することができます。この要素はhead要素の中で使用します。

<meta http-equiv="expires" content="有効期限">
この要素で指定した日時、または秒数後に、ブラウザのキャッシュから文書の情報が消去されます。キャッシュを無効にするにはcontent="0"と指定します。
（<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">でキャッシュを使わない異もできます）

例：
<meta http-equiv="Expires" content="Fri, 31 Dec 2010 23:59:59 GMT">
　　　・・・ この例では、グリニッジ標準時：2010年12月31日（金）午後11時59分59秒を指定しています。
<meta http-equiv="Expires" content="86400">
　　　・・・ この例では、86400秒後（24時間後）を指定しています。

２、 HTML
(1) スペース、コメントなど文章量を削減する
(2) CSS/Scriptを外部ファイルに移行する
(3) tableタグは、divタグで作成する

３、 Image
(1) imageの使用は最小限にする
(2) widthとheightは必ず定義する
(3) gif(256色）ファイルを使用する
　ただし、たくさん色を使用したい場合はjpegファイルを使用する。

GIFとJPEGとの比較は下図をみると、どう違うかわかり易いです。

(5) アニメーションgifやflashは使用しない
(6) 同じイメージファイルは、サーバの一つのフォルダにする
　⇒同じイメージを別フォルダに保存して、どちらのファイルも参照できるような状態にしない

投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年2月26日金曜日

【Javascript】ホームページ上でグラフ作成するツール(Google Chart Tools）

ホームページ上で、グラフを作成するツールに、
 Google Chart Tools
があります。

下が、私が実際に作成したグラフです。
・円グラフ(Pie Chart)


・StepLineグラフ


・棒(Bar)グラフ


このツールは、プログラミング言語(JavaScript )にて、チャート作成用APIを使って、 SVG を使ったグラフを表示するツールです。
JavaScriptだと普通ソースコードがみれるのですが、このチャートツールは、JavaScript のソースをダウンロードして使用することができません。
 ※ 必ず Google のサイトにアクセスし行かなければなりません。

 ただし、Google Chart Tools は商用利用も OK でそうです。
実際に使ってみたので、使い方や、参考にしたサイトを紹介します。

１、HTMLでの記述
(1) HTMLに「Google Chart の JavaScirpt ファイルのロード指定」する
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

(2) グラフ作成のスクリプトの記述
Load時に、drawChart関数を実行して、グラフを作成します。
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); 
 function drawChart() {  
    // グラフ作成 // : 
  } 
</script>
 
(3) グラフを描画する div 要素
グラフを描画するところには ID 名をつけた div 要素を置きます。
<div id="chart_div" style="width: 80%; height: 400px;"></div>


２、グラフ作成の関数
グラフ作成用の関数内ではさらに 3 つのことを行います。
・データの作成
・オプションの設定
・グラフの描画

【drawChart 関数内:】
(1) データテーブルの作成 
var data = google.visualization.arrayToDataTable([ ['年度', '売上', '費用'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);

(2) グラフのオプションを設定 
 グラフのオプションはオブジェクト(連想配列)で指定します。
指定可能な要素は title のようなグラフで共通のものや 円グラフの is3D といった特定のグラフで固有のものがあります。

var options = { title: '会社業績' };

【StepLineチャートの設定例】
            var lcolor1 = _AppliedColorSettings.getValue("PersonalizedTradeLine1");  // 線１の色
            var lcolor2 = _AppliedColorSettings.getValue("PersonalizedTradeLine2"); // 線２の色
            var colors: string[] = [lcolor1, lcolor2];　// 色の配列化
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");//背景色
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");//フォント色
            var gaxis = _AppliedColorSettings.getValue("Axis");//軸色
            var dash = _AppliedColorSettings.getValue("DashLine");//破線色
            var legend = _AppliedColorSettings.getValue("LegendBackGround");//凡例色

            var options = {
                'backgroundColor': bcolor,
                'titleTextStyle': {
                    color: gaxis
                },
                'colors': lcolors, 
                'hAxis': {//横軸
                    'textStyle': {
                        fontSize: 10,
                       color: gfcolor
                   },
                    'gridlines' : {  // 補助線
                       color: dash
                   },
                    'baselineColor' : gaxis// 補助線の背景色
                },
                'vAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                },
                'pointSize': 8,
                'legend': { // 凡例
                    position: isLegend,
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                },
                'crosshair': { trigger: 'both' }  // •プロットにマウスオーバーすると十字に線を表示
            };【Barチャートの設定例】
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");
            var gaxis = _AppliedColorSettings.getValue("Axis");
            var dash = _AppliedColorSettings.getValue("DashLine");
            var legend = _AppliedColorSettings.getValue("LegendBackGround");
            var barcolor = _AppliedColorSettings.getValue("BarGraph");
            var options = {
                'colors': [barcolor],
                'backgroundColor': bcolor,
                'title': title,
                'width': 300,
                'height': 200,
                'titleTextStyle': { color: gfcolor },
                'hAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                    'gridlines': { count: 4, color: dash },
                    'minorGridlines': { count: 2, color: 'gray' },
                    'stroke': { color: gfcolor }
                },
                'vAxis': {
                    'textStyle': { fontSize: 10, color: gfcolor },
                },
                'legend': {
                    position: 'none',
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                }             };
【Pieチャートの設定例 】
            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");
            var gfcolor = _AppliedColorSettings.getValue("GraphFont");
            var legend = _AppliedColorSettings.getValue("LegendBackGround");

            var bcolor = _AppliedColorSettings.getValue("GraphBackGround");

            var options = {
                backgroundColor: bcolor,
                'title': title,
                'titleTextStyle': { color: gfcolor },
                'width': 350,
                'height': 300,
                'legend': {
                    slingment: 'end',
                    color: legend,
                    textStyle: {
                        color: gfcolor
                    },
                }
            };

(3) LineChart のオブジェクトの作成 
 グラフの描画ではまず対象グラフのオブジェクトを作成します。
この際、描画先の div 要素を ID 名から取得して渡します。

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

(4) データテーブルとオプションを渡して、グラフを描画 
chart.draw(data, options);

 【参考URL】
http://dotinstall.com/lessons/basic_chart_tools/3301 ⇒動画で紹介しているので、便利
http://yohshiy.blog.fc2.com/blog-category-24.html

※上記二つをみれば十分ですが、その他にもっと勉強するために、以下サイトも読むとよいと思います

http://www.showa-corp.jp/special/graphtools/gct.html
http://yohshiy.blog.fc2.com/blog-entry-195.html
https://developers.google.com/chart/interactive/docs/gallery/motionchart?hl=ja 
https://developers.google.com/chart/interactive/faq#offline
http://yohshiy.blog.fc2.com/blog-entry-206.html

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Configuration_Options
←アニメーションの設定方法
投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年2月22日月曜日

【Javascript】ホームページ作成につかえる、JQuery+Javascript+Cssサンプルコード

ホームページ作成時に、使えるコードを紹介します。

１、buttonやimageっを使わずに、クリックしたら、リンクしたサイトへ飛ばす
 (1) 説明
  ・<div>タグでboxを作成する
  ・<p>タグで文章を記載して、<a>タグでリンク先を指定する。
  ・<strong>で強調文字とする
 (2) コード
 <div style="margin-top:65px;margin-left:1170px;position:absolute;background-color:white; border: outset;  width:200px;height:30px;border-color:black;border-radius:5px">
     <p style="margin-top:4px;margin-left:14px;">
         <a href="http://www.yahoo.co.jp/" style="text-decoration: none;color:black">　　　           <strong>yahoo!</strong>
         </a>
      </p>
 </div>

※タグ内でstyle定義していますが、css側で定義した方が、レスポンシブwebサイトで対応しやすくなります。

 ２、起動時に初期設定する window.onload、もしくは、 $(document.body).readyにて、設定を行います
  ・window.onload
   文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了している。
  ・$(document.body).ready
　　画像の読み込みなどは待たず、 DOMツリーの構築が終わった時点で実行されます。
※window.onloadと$(document.body).readyの違いは、「$(document).ready() が先に実行されて、$(window).load() の方が後に実行される」となります。
詳しくは次のサイト一読すると理解しやすいです。
http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/


３、ブラウザ判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var  browzer;
    if (userAgent.indexOf("Chrome") != -1) {
        //Chrome
        _browzer = BrowzerType.chrome;
    } else if (userAgent.indexOf("Firefox") != -1) {
        //Firefox
        _browzer = BrowzerType.firefox;
    } else if (userAgent.indexOf("Trident") != -1) {
        //IE11
        _browzer = BrowzerType.ie11;
    } else if (userAgent.indexOf("MSIE") != -1) {
        //IE 6 - 10
        _browzer = BrowzerType.ie10;
    } else if (  userAgent.indexOf("Edge") == -1)
    {   // Edge
        _browzer = BrowzerType.edge;

    } else {
        //other
   }
      

４、デバイス判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var _device
     var userAgen2t = window.navigator.userAgent.toLowerCase();
    if (userAgen2t.indexOf('ipad') != -1) {
        _device = DeviceType.tablet;
    } else if (userAgen2t.indexOf('iphone') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('Android') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('windows') != -1) {
        _device = DeviceType.pc;
    } else {
        _device = DeviceType.onther;
    };


投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年1月26日火曜日

【HTML5】 CSS と JQuery を使って、Treeview を作成する

ツリービューは、いろいろ便利ですよね。
下の参考URLにあるツリービューを試してみました。

ポイントは、
・リスト(ul/li)を使って、ツリーを作成する
・要素クリックイベントを定義して、子要素表示非表示を制御する
　選択した子要素はクラスを定義し直して、CSSで定義した装飾を行う
・クリックイベントは、javaScriptを使って、clickイベントを定義する
　javaScript内では、jQueryを仕様する($(document)などの$の使い方は、jQueryを勉強して覚える）
・要素の装飾はCSSファイルで定義する

１、HTML
1) <head>にjqueryと、作成するJavaScriptファイルを定義する
2)  <head>に使用するcssファイルを定義する
3) <body> にツリービューのリストを記載する
　TreeContainerが親要素、tree以下が子要素（ツリー）となります。
　ツリーはリスト(ul,li)で作成します。

<head>
  <script src="jquery-1.10.2.min.js"></script>
  <script src="treeview.js"></script>
　<link href="Style.css" rel="stylesheet" />
</head>

  <body>
    <div class="TreeContainer" >
        <div class="ParentPlace">
            <span>藤沢小学校</span>
        </div>
        <br><br>
        <ul class="tree">
            <li>
                <span>1</span>
                <img src="Images/ChildNode.png" />
                <a> １年 </a>
                <ul>
                    <li>
                        <span>3</span>
                        <img src="Images/ChildNode.png" />
                        <a>A組</a>
                        <ul>
                            <li><a>鈴木先生</a></li>
                            <li>
                                <span>3</span>
                                <img src="Images/ChildNode.png" />
                                <a>Hydarbad</a>
                                <ul>
                                    <li><a>生徒：青木</a></li>
                                    <li><a>生徒：浅野</a></li>
                                    <li><a>生徒：高橋</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span>3</span>
                <img src="Images/ChildNode.png" />
                <a>２年</a>
                <ul>
                    <li><a>A組</a></li>
                    <li><a>B組</a></li>
                    <li>
                        <span>3</span>
                        <img src="Images/ChildNode.png" />
                        <a>佐藤先生</a>
                        <ul>
                            <li><a>江口</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

 </body>

下図がブラウザに表示された絵となります。

２、JavaScriptコード
 treeview.jsにJavaScriptのコードを記載する
(1) LoadChildrenで、子要素表示非表示を制御します
(2) NodeSelectionで、クラスの定義し直しします(removeClass/addClass)
(3) $(document).readyで、で「HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行」します。
  コードは、画像クリックしたら、 LoadChildrenを実行し、treeのliをクリックしたらremoveClassで、 CSSクラスを削除し、addClassで"selected"クラスを定義し直します
　※クラスを定義し直して、CSSで定義したスタイルを使って装飾しなおします。
　

    function LoadChildren(ctrl) {
        if ($(ctrl).next('a').next('ul').is(':visible')) {
            $(ctrl).next('a').next('ul').hide('slow');
            $(ctrl).attr('src', '/Images/ChildNode.png');
        }
        else {
            $(ctrl).next('a').next('ul').show('slow');
            $(ctrl).attr('src', 'Images/ChildNode.png');
        }
    }       

    function NodeSelection(ctrl) {
        $('ul.tree li').find('a').each(function () { $(this).removeClass(); })
        $(ctrl).addClass("selected");
    }

     $(document).ready(function () {
        $('ul.tree li').each(function () {
            $(this).children('img').click(function () {
                LoadChildren(this);
            });
        });

         $('ul.tree li a').click(function (e) {
            $('ul.tree li').find('a').each(function () { $(this).removeClass(); })

             $(this).addClass("selected");
        });
    });



３、CSS定義
Style.cssを作成します。
ファイル内では、クラス(TreeContainerなど)の装飾定義をします。
 要素を選択した時の”selected”要素も定義します。

.TreeContainer {
    border: solid 0px red;
    width: 350px;
    height: 400px;
    overflow-y: auto;
    padding: 10px;
}
.TreeContainer .ParentPlace {
        border: solid 0px silver;
        padding: 5px;
        font-size: 10pt;
        font-family: 'Segoe UI';
        width:auto;
 }
TreeContainer .ParentPlace span {
            float:left;
            border:dashed 2px silver;
            padding:5px;
            border-top-right-radius:20px;
            border-bottom-right-radius:20px;
 }
.TreeContainer .MyPlace {
        border: solid 0px silver;
        padding: 5px;
        font-size: 10pt;
        font-family: 'Segoe UI';
        width:auto;
}
.TreeContainer .MyPlace span {
            float:left;
            border:dashed 2px silver;
            padding:5px;
            border-top-right-radius:20px;
            border-bottom-right-radius:20px;
 }

 TreeContainer ul.tree,
ul.tree ul {
        list-style-type: none;
        background: url(Images/vline.png) repeat-y;
        margin: 0;
        padding: 0;
        cursor: pointer;
        border: solid 0px black;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-left:5px;
        margin-top:0px;
 }

 TreeContainer ul.tree ul {
            margin-left: 10px;
            cursor: pointer;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
 }

 .TreeContainer ul.tree li {
            margin: 0;
            padding: 0 12px;
            line-height: 20px;
            background: url(Images/node.png) no-repeat;
            cursor: pointer;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
}

 .TreeContainer ul.tree li span {
                background-color: green;
                padding: 2px 6px;
                border-radius: 10px;
                color: white;
 }
TreeContainer ul.tree li a {
                /*background-color: green;
                padding: 2px 6px;
                border-radius: 10px;
                color: white;*/
}
 .selected {
                background-color: green;
                padding: 2px 6px;
                border-radius: 10px;
                color: white;
 }
selected:hover {
              color:yellow;
 }
           
           
.TreeContainer ul.tree li.last {
                background: url(Images/lastnode.png) no-repeat;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
 }

 .TreeContainer ul.tree li:last-child {
                background: #fff url(Images/lastnode.png) no-repeat;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
  }

  .TreeContainer ul.tree div:hover {
            text-decoration: underline;
 }

※Images/ChildNode.pngは、参考URLにあるファイル一式ダウンロードすると入っています。

【参考URL】
http://www.codeproject.com/Tips/1073289/Treeview-in-HTML-using-CSS-and-JQuery
投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,
登録: 投稿 (Atom)