2015年2月18日水曜日

頭痛

昨日は、頭痛でちょっと辛かった。
バファリン飲んで、多少は痛いのが収まりました。
年取ってから、頭痛になりやすくなってきました。
今後の事を考えて、頭痛の原因、対策について調べてみました。

まとめると、血液の循環が悪くなって、発生しており、原因は、普段の生活（姿勢、食生活など）
で発生していることがわかりました。
きちんとした食事（菓子とかは食べない）、適度の運動、アルコール等の体によくないものは食べないなど、注意していきたいと思います。
頭痛になったら療養して、薬に頼らないのが一番のようです。

１、頭痛の種類
頭痛は、一次性頭痛と二次性頭痛に大別されています。

一次性頭痛とは、他の病気を伴わない頭痛で、頭痛の9割はこの一次性頭痛で、以下３つに分類されています。

1)偏頭痛
こめかみから目を中心にズキンズキンと脈打つような激しい痛みを伴う頭痛。姿勢を変えたり、頭を動かしたりするだけでも痛みが強くなります。
【原因】：痛み脳の血管が急に拡張することで痛みが起きる。疲労やストレスで発生。
【現象】：ズキズキと脈を打つような強い痛み。吐き気がある場合もある
【対応】：静かな場所で痛む箇所を冷やしながら休む（運動、入浴、飲酒などで痛みが助長される場合もある）

2)緊張型頭痛（または緊張性頭痛）
鈍い痛みが数十分～数日続くことが特徴的です。頭全体を締め付けるようにズーンと重い痛みがあります。
【原因】：PCの長時間使用による眼精疲労やストレス
（デスクワークやパソコン操作、車の運転、高さが合っていない枕で寝るなど、同じ姿勢や無理な姿勢を長時間続けたことによって首や肩の筋肉が収縮、血行が悪くなるため）
【現象】：主に首や肩周りから後頭部にかけて、また側頭部の筋肉が緊張した結果、血流が悪くなり痛みが起きる。
【対応】：（偏頭痛とは反対に）体を温める

3)群発頭痛
【原因】：原因が定かではなく痛みが強い場合は、専門医を受診
【現象】： 一定期間に毎日起きる頭痛。目の後ろを通過する頭の血管の拡張が痛む
【対応】：痛みがある時は、飲酒・喫煙を控える

二次性頭痛とは、脳や身体にある、何らかの病気が原因で起こる頭痛です。
代表的な病気としては、「くも膜下出血」、「脳出血」、「脳腫瘍」、「髄膜炎」などがあります。


「嘔吐」「けいれん発作」「意識を失う」「言語障害」「手足のしびれ」「物が二重に見える」など、普段の生活にて、異常が感じられたら二次性の可能性があるので医者に診断した方が良いと思われます。
「脳腫瘍」の場合は、起床時に痛みが強いのが特徴となっています。

昨日は、仕事中に痛くなったので、緊張型頭痛かもしれません。普段からよく発生するので、この場合は、偏頭痛なのかもしれません。二次性頭痛であったら、怖いのですけど。
頭痛の原因は、結局は血液の循環が悪くなって起こるのですね。それで、休息を取ると血液の流れが良くなって、治ったりするのですね。
結局は、ストレスが原因なのかもしれません。。。。


２、治療法
1)偏頭痛
患部を温めたり、マッサージなどでさらなる刺激を与えるのは逆効果です。静かな場所で痛む箇所を冷やしながら休みます。
急な偏頭痛に襲われた場合は、まずこめかみなどズキズキと脈を打っている部位を冷やして、血流の拡がりを抑えます。冷たいタオルでこめかみを押しながら、安静にします。
光や音などにも敏感になるため、できれば暗くて静かな場所で休みます。横になれない場合は、座ったままできるだけ動かないようにしす
また、カフェインは脳の血管を収縮する作用があるため、カフェインを含んだコーヒーや緑茶、紅茶、ウーロン茶などを飲んでから休むのも一策です。 
可能であればひと眠りすることをオススメします。しっかり休むと拡張した血管も元に戻り、それまでの痛みがウソのようになくなることがあります。

アルコールや食品によっても誘発することがありますので、食生活も改善しましょう。
ポリフェノールを豊富に含んだ赤ワインをはじめ、チョコレート、チーズ、柑橘類、食品の防腐剤の亜硝酸ナトリウム、化学調味料などに含まれているグルタミン酸ナトリウムなどに注意しましょう。

尚、市販の鎮痛剤には偏頭痛を治療する作用はありません。軽い痛みであれば鎮痛剤によって緩和させることもできますが、拡張した血管を収縮することはできないため、根本的な治療とは言えません。

短いサイクルで痛みが起きる場合や、薬が効かない場合、毎日のように鎮痛剤を服用している場合は、医師に相談しましょう。
医者は、頭痛を専門に診る「頭痛外来」か、脳や血管、神経の状態から診断・治療をする「神経内科」、「脳神経外科」がよいでしょう。


2)緊張型頭痛（または緊張性頭痛）
医者での処方では、市販の頭痛薬や風邪薬にも入っているアスピリン、イブプロフェン、アセトアミノフェンといった非ステロイド性抗炎症薬（NSAIDs）を処方されま す。
緊張型頭痛のなかでも反復性のものには有用であるものの、慢性の場合にはさほど効果は期待できません。むしろ長期的な服用による薬物乱用頭痛や胃腸へ 負担がかかるといったデメリットを考えると、市販の鎮痛薬を含め、安易な服用は控えたほうがよいでしょう。
痛みに対する直接的な治療とは別に、頭痛の原因となる精神的なストレスを軽減する方法をとることもあります。首や肩の筋肉の緊張をほぐす効果のある筋弛緩薬や、不安を取り除くための三環系抗うつ剤、抗不安薬などが処方されます。
また、漢方薬による体質改善や、温熱療法、電気治療、牽引といった首や肩の筋肉の緊張へ働きかける物理療法、鍼灸、バイオフィードバック（認知行動療法）といったさまざまな治療法があります。

普段から、デスクワークの途中で背筋を伸ばしたり、マッサージやストレッチをしたりして、同じ姿勢を長時間取りつづけない工夫も有効です。
温めたタオルを首回りに巻いたり、入浴によって筋肉をリラックスさせるのもよいでしょう。
緊張型頭痛は精神的なストレスが引き起こされることも少なくありません。心配や不安を減らし、ゆったりのんびりした気持ちで過ごせるように、普段からストレスをこまめに解消することも大切です。

3)群発頭痛
群発性頭痛の原因はまだ解明されていない部分もあるのですが、頭の血管の拡張が関係していると言われています。
目の後ろを通っている血管が拡張して炎症を起こすため、目の奥が痛むと考えられています。血管が拡張することで自律神経を刺激し、涙や充血などの症状も併発させてしまいます。
群発性頭痛は、日常の生活習慣も影響していると言われているため、痛みを発症している群発期にアルコールを飲むと100％の確率で痛みが起こるそうです。 アルコールの他にも、タバコや、疲労、また山登りや飛行機などによる気圧の影響、薬の副作用、明るい光などのほか、季節の変わり目にも影響を受けやすいと 言われています。

又、下記の項目に当てはまるような頭痛があるときは、早めに医療機関を受診しましょう。
・今まで経験したことがない強い頭痛や突然の激しい頭痛
・鎮痛剤が効かない痛み
・次第に頻度と痛みが重くなる頭痛
・頭痛以外の症状が伴う（例：発熱、手足のしびれ、けいれん、嘔吐、言語障害）
・意識がもうろうとする
・50歳以降に始まった頭痛

【参考URL】
http://medical.yahoo.co.jp/diet/bihada/7528/
http://www.skincare-univ.com/article/008882/
http://www.skincare-univ.com/article/008888/
http://www.skincare-univ.com/article/008889/
http://www.skincare-univ.com/article/008884/
http://www.skincare-univ.com/article/008885/
http://www.skincare-univ.com/article/008893/
http://www.skincare-univ.com/article/008894/
http://www.skincare-univ.com/article/008891/
http://www.skincare-univ.com/article/008892/
投稿者 時刻: 0 件のコメント:
ラベル:

2015年2月16日月曜日

HTML5で、JavaScriptなしでモーダルダイアログを表示しよう

HTML5でのモーダルダイアログのコード説明します。

モーダルダイアログとは、「一度開いたダイアログボックスを閉じるまで、他の操作をできなくするタイプのダイアログボックス」の事を言います。

 【CSS】
headタグ内にCSS定義を行います。
footer等の定義は省略します。
赤文字がモーダルダイアログになります。

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <style type="text/css">       

        /*** モーダルダイアログ用領域定義***/
        .divModalDialog  {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            /*! important !*/
            display:none;
            /* last attribute set darkness on scale: 0...1.0 */
            background-color:rgba(0,0,0,0.8);
            text-align:center;
            z-index:101;
        }
       
        /*** ! target attribute does the job ! ***/
        .divModalDialog:target  { display:block; }
       
        /*** モーダルダイアログの内部定義 ***/
        .divModalDialog div  {
           /* either absolute or fixed */
            position:fixed;
            top:5%;
            width:100%;
            height:80%;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:102;
        }
       
        /*** モーダル内のh1定義 ***/
        .divModalDialog div h1  {
            width:100%;
            font-size:2em;
            color:#dadada;
            z-index:103;
            /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(0,0,0,0.9); 
            -webkit-text-shadow: 3px 4px 6px rgba(0,0,0,0.9); 
            text-shadow: 10px 4px 6px rgba(0,0,0,0.9);
        }       

        /*** モーダル内イメージ定義 ***/
        .divModalDialog img {
            padding:20px;
            z-index:105;
            border: solid 1px gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: -moz-linear-gradient(top, #dadada,
                                                    #505050 5%,
                                                    #bababa 50%,
                                                    #303030 50%,
                                                    #101010);
            background: -webkit-gradient(linear, center top, center bottom,
                                                    from(#dadada),
                                                    color-stop(0.05, #505050),
                                                    color-stop(0.5, #bababa),
                                                    color-stop(0.5, #303030),
                                                    to(#101010));
        }

        /*** モーダル内リストのリンク(aタグ)定義 ***/
        .divModalDialog ul a  {
            padding:5px;
            font-size:3em;
            font-weight:bold;
            color:Yellow;
            text-decoration:none;
            border: solid 1px Gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:110;
        }

        /*** メインのDIV用領域  ***/
        #divThumbnails {
            position:relative;
            margin: 75px 0 0 0;
            height:250px;
            padding-top:30px;
            background-color:#cacaca;
           
             /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
            -webkit-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
            box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
           
            /* gradient effect with color-stop */
            background: -moz-linear-gradient(top, #f0f0f0,
                                                #bababa 10%,
                                                #cacaca 49%,
                                                #909090 50%,
                                                #cacaca 50%,
                                                #cacaca 90%,
                                                #ababab);
            background: -webkit-gradient(linear, center top, center bottom,
                                                from(#f0f0f0),
                                                color-stop(0.1, #bababa ),
                                                color-stop(0.49, #cacaca),
                                                color-stop(0.50, #909090),
                                                color-stop(0.50, #cacaca),
                                                color-stop(0.90, #cacaca),
                                                to(#ababab));
        }

        /*** メインのDIV用領域のイメージスタイル ***/
        #divThumbnails img {
            padding:10px;
            height:200px;
            max-width:300px;
            border: solid 1px gray;
            /* rounded corners */
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);       
            z-index:1;
        }

        /***　イメージ及びリスト内aタグのマウスオーバー定義 ***/
        #divThumbnails img:hover, .divModalDialog ul a:hover
        {
            background:#505050;
            background: -moz-linear-gradient(top, #eaeaea,
                                                #505050 50%,
                                                #303030 50%,
                                                #404040);
            background: -webkit-gradient(linear, left top, left bottom,
                                                        from(#eaeaea),
                                                        color-stop(0.5, #505050),
                                                        color-stop(0.5, #303030),
                                                        to(#404040));
        }

        /*** fancy text effect: 180 degree ***/
        #divUpsideDown  {
            position: relative;
            margin-top:5%;
            width:100%;
            ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /*           
            -moz-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            font-size:3em;
            font-weight:bold;
            color:Maroon;
           /* add shadows to text */
            -moz-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
            -webkit-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
            text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
        }


          </style>
</head>

 【HTML】
bodyタグ内にクリックしたら、ダイアログを表示するようにコード記載します。
一個目のリスト画像をクリックしたらID=divModealDialog1に飛び、ダイアログが表示されます。
二個目のリスト画像をクリックしたらID=divModealDialog2に飛び、ダイアログが表示されます。

<body>

     <div id="header">
        <h2>モーダルポップアップダイアログをJavaScriptなしで、HTML5+CSS3で作成</h2>
    </div>
   
    <!-- NAV THUMBNAILS -->
    <div id="divThumbnails">
        <ul>
            <li><a href="#divModalDialog1"><img>
                src="http://webinfocentral.com/html5/Travolta.JPG"
                alt="みつお治療院" /></img></a></li>
            <li><a href="#divModalDialog2"><img>
                src="http://webinfocentral.com/html5/TitanicEffortsNY.JPG"
                alt="My ブログ" /></img></a></li>
        </ul>
    </div>


    <div id="divUpsideDown">画像クリックで、モーダルダイアログが表示します</div>

    <!--1st LINK -->
    <div id="divModalDialog1" class="divModalDialog">
        <div>
            <h1>Yahoo! Japan</h1>
            <ul>
                <li><a href="#">閉じる</a></li>                      <!--閉じる-->
                <li><a href="http://www.yahoo.co.jp/">サイト移動</a></li>  <!--外部リンク-->
            </ul>
            <img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" alt="Yahoo! Japan" />
        </div>
    </div>

    <div id="divModalDialog2" class="divModalDialog"><div>
            <h1>TAの欝な日々</h1>
            <ul>
                <li><a href="#">閉じる</a></li>                 <!--閉じる-->
                <li><a href="http://tasano2525.blogspot.jp/">サイト移動</a></li> <!--外部リンク-->
            </ul>
            <img src="http://www.google.com/images/icons/ui/gprofile_button-16.png" alt="g++ Blog" />
    </div></div>

    <div id="footer">
        Copyrightc 2014 TAの欝な日々 | Author: T.Asano |
        <a href="http://tasano2525.blogspot.jp/" target="_blank">HOME</a> |
    </div>

</body>

 【実装】

Yahoo!Japanボタンをクリックすると 、下図のモーダルダイアログが表示します。
閉じるボタンをクリックすると、元の画面に戻ります、サイト移動をクリックすると、ボタンで設定したリンク先のサイトに移動します。
 【参考URL】
 http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2015年2月12日木曜日

HTMLとCSSの勉強(4)

CSSで使えそうなサンプルをまとめてみました。

1、IMGに枠をつくる
padding で画像の枠を付けて、ボックスシャドウで影を付けて、写真のようにする例

【HTML】
リストで画像ファイル(image01.jpg)を設定
<ul class="gallery">
    <li><a href="#"><img class="pic-1" src="image01.jpg" alt="" /></a></li>
</ul> 

【CSS】
クラス(gallery)のimgのスタイルを設定
.gallery img {
    padding: 10px;
    background: #fff;
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .4);
    position: relative /* z-index を指定するので */
} 

次に、画像に傾きを持たせてみます。
rotate ファンクションで回転、z-indexで重なりを指定して、画像を回転させます。
ul.gallery .pic-1 {
    z-index: 1;
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
} 

２、丸角、グラデーション、シャドウの組み合わせでボタン
(説明) border-radius と text-shadow、box-shadow、gradient（グラデーション）を組み合わせる
【HTML】
/* リンク */
<a class="button blue" href="example.com">CSS Button</a>
/* 送信ボタン */
< input class="button blue" type="submit" name="signin" value="Signin" />

<div>
    <a href="#" class="button orange">Orange</a>
    <a href="#" class="button orange bigrounded">Rounded</a>
    <a href="#" class="button orange medium">Medium</a>
    <a href="#" class="button orange small">Small</a>
    <br /><br />
    <input class="button orange" type="button" value="Input Element" />
    <button class="button orange">Button Tag</button>
    <span class="button orange">Span</span>
    <div class="button orange">Div</div>
    <p class="button orange">P Tag</p>
    <h3 class="button orange">H3</h3>
</div>

【CSS】
webkit系 は、left top から、left bottom といった感じで、グラデーションの向きを指定します。
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
mozilla系は、グラデーションの向き、グラデーションの開始色、グラデーションの終了色の順に指定します。
background: -moz-linear-gradient(top,  #00adee,  #0078a5);

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}


３、CSS3 のマルチカラム
HTML5では、カラムを指定しなければなりませんが、HTML5では簡単にできます。
【HTML】
<div class="wrapper">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>

【CSS】
(説明) column-count でカラム数、column-gap でカラムの間隔を指定
.wrapper{
    /* Safari Chrome */
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /* CSS */
    column-count: 3;
    column-gap: 10px;
}

４、フォームの、フォーカス時にシャドウの色を変える
【CSS】
(説明) input/textareaに、フォーカス時に、枠に色をつけて強調させます。
input:hover,
textarea:hover,
input:focus,
textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    -moz-box-shadow: 0px 0px 6px rgba(255,15,135,.7);
    box-shadow: 0px 0px 6px rgba(255,15,135,.7);
} 

５、displayプロパティ
 display:blcok ブロックレベル要素(要素の前後に改行が入り、カチッとしたブロックを積んでいくような表示)
 display:inline インライン要素(テキストの一部として扱われるので、要素の前後には改行は入らず、テキスト状に横に横にずーっと流れていくような表示)

 display:inline-block インラインブロック要素（インライン要素のように横に並んでブロック要素のように幅や高さ、margin や padding　を指定できます）

【参考URL】
http://webdesignrecipes.com/css-visual-formating-model/
http://webdesignrecipes.com/spice-up-web-design-with-css3/
http://www.css-lecture.com/log/css3/css3-gradient.html
http://webdesignerwall.com/tutorials/css3-gradient-buttons
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://code.tutsplus.com/tutorials/design-a-prettier-web-form-with-css-3--net-9542
http://nutz22.web.fc2.com/h5c3.html#
http://blog.3streamer.net/html5-css3/css3-styling-231/
http://midashi-maker.v-colors.com/
http://photo.v-colors.com/
http://codezine.jp/article/detail/7681
http://taneppa.net/display-inline-block/
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2015年2月10日火曜日

PC用とスマホ用の表示切り替えをCSSだけで行う方法(レスポンシブWebデザイン）

PCとスマートフォンでスタイルを変更する手段をいくつか照会します。

HTMLに直接書いているwidthの設定を外すことを忘れずに！。

１、ヘッダー部分で切り替え情報を記載する
HTMLヘッター部分にviewportを設定する。
次に、media、screenの480px以下をスマートフォンと判断し、spcssを読み込み
481px以上であればPCと判断しpc.cssを読み込む。
UserAgentがIEの時だけはmedia、screenが効かないので、そのままpc.cssを読み込む。
(iphoneはIEでないので、問題ない）
IEはmedia属性のdevice-width系プロパティを理解してくれないので、if IE付でもう１度PC用のCSSを読ませます（これがないとIEで真っ白になる）。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link media="only screen and (max-device-width:480px)"  href="sp.css" 
                        type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css"
                        type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet" />
<![endif]-->

※しかし、この方法では、一部Android端末で不具合が生じるようです。
初回アクセスの時だけ、なぜかPC用のCSSが読み込まれてしまう、というものです。
リロードしたり、他のページに遷移すると直るといわれています。
（http://html-five.jp/558/）

<!--[if IE]>
   (中身)
<![endif]-->

は条件付きコメントといいます。
「条件式」の部分に合致するブラウザのみが、「中身」の部分に記述されたHTMLを読みます。
それ以外のブラウザは、「中身」の部分をコメントだと判断するため、無視します。

２、CSS内で切り分ける
1) メディアクエリ（＠media)を使用
ブラウザの横幅(SP:320px以下, タブレット800px以下,PC1024px以上）
を判別し、それぞれCSSを切り替えます。

CSSを振り分けるにはCSS3のメディアクエリを使用します。
 @media only screen and (max-width: 979px) {
   
    Html{
        Width:100%;
    }
 
  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }
} /*デバイスの横幅が979px以下の場合*/

@media only screen and (min-width: 321px) and (max-width: 768px) {
   
    Html{
        Width:100%;
    }
  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }
} /*デバイスの横幅が321以上768以下の場合*/

@media only screen and (max-width: 320px) {
   
    header{
        Width:90%;
    }
 
  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
  }
  #container{
    width:100%;
  }
} /* デバイスの横幅が320px以下の場合 */

そのままだと画像は元のままのサイズで表示されてしまい画面からはみ出てしまいます。
WidthとHeightをAutoにして、画像を伸縮するように指定をします。

2) @importを使用
ブラウザサイズごとのCSSを作成し、@importでそれぞれのサイズごとに読み込む方法もあります。
@import url(style.css) screen and (min-width: 769px); /* 769以上 */
@import url(tablet.css) screen and (max-width: 768px); /* 768以下 */
@import url(smart.css) screen and (max-width: 320px); /* 320以下 */

３、UserAgentによる振り分け
JavaScriptでUserAgentをみて、適用CSSを区分けする
（一番無難な方法のようです）
 <script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
   document.write('<link href="./common/sp/common.css" type="text/css" rel="stylesheet"/>');
}else{
   document.write('<link href="./common/pc/common.css" type="text/css" rel="stylesheet"/>');
}
})();
</script>

iPad を除外したいのであれば、if 文を以下のようにします。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) || navigator.userAgent.indexOf('Android') > 0)


【参考URL】
http://www.yuta-system.com/homepage/pccss1.html
http://allabout.co.jp/gm/gc/23921/2/
http://www.hp-stylelink.com/news/2013/07/20130716.php
http://html-five.jp/558/
http://allabout.co.jp/gm/gc/396404/
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2015年2月9日月曜日

スマートフォン対応縦横判別

ホームページでスマートフォン対応するのに、縦横どちらで表示しているか判別して、画面を変更する処理が必要になります。

そこで、判別に必要な処理を調べてみました。

 ①window.orientationを使う
【JavaScriptコード】
ユーザエージェント(userAgent)でiPhoneかiPad,Androidかを調べてorientation の方向(0とか90とかの数字が取得)で、クラスを
追加して画面変更を行います。

var isLandscape = function(){
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
          || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
var orientation = window.orientation;
if(orientation == 90){
 　　　　　　　　　　　SetViewHorizontal();
}else{
SetViewVertical();
}
}
}
$(window).resize(function(){
isLandscape();
});
isLandscape();

 function SetViewVertical()
{
// 縦処理
}
 function SetViewHorizontal()
{
// 横処理
}


②縦横サイズから判断
 【JavaScriptコード】
（①だとPCでは判別できないので、縦横で判別した方がいいかもしれません）
windowのサイズを取得して、縦幅が横幅よりも大きかったらportrait（縦向き）
横幅が縦幅よりも大きかったらlandscape（横向き）
という判別

var isLandscape = function(){
if (window.innerHeight > window.innerWidth) {
　　　　　　　SetViewVertical();
}else{
　　　　　　　SetViewHorizontal();
}
}
$(window).resize(function(){
isLandscape();
});
isLandscape();
 function SetViewVertical()
{
// 縦処理
}
 function SetViewHorizontal()
{
// 横処理
}

③JQueryを使用
jQueryのイベントで、orientationchangeというイベントを使用する
$(document).ready(function(){
            window.onorientationchange = function(){
            alert("向きが変わりました");
        };
    });

【参考URL】
 http://blog.livedoor.jp/tacshock-code14/archives/6498961.html
http://blog.alan-trigger.info/?p=235
http://www.webcreatorbox.com/tech/smartphone-snippets/
http://weboook.blog22.fc2.com/blog-entry-299.html
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2015年2月6日金曜日

FIrebugを使いこなそう

ホームページ作成で、JavaScriptの動作検証するのに使用する開発ツールについて学習します。
今回は、Firefoxでの開発ツールである、Firebugについて調べて、試してみました。

■Firebugのインストール
FirebugはFirefoxのアドオンとして提供されています。
使うには、Firefoxのメニューの［ツール］→［アドオン］でアドオンマネージャを起動し、「アドオンを入手」アイコンを選択します。
アドオンの検索画面にFirebugを入力すれば、Firebugアドオンが表示されるので選択してインストールします

■Firebugの起動
　Firefoxを再起動してインストールが完了したら、デバッグしたいWebページ/Webサイトを表示して、［ツール］→［Web開発］→［Firebug］→［Firebugを開く］を選択します。

■コンソール
　［コンソール］を利用すると、HTMLやJavaScriptのエラーを確認できます。
　［コンソール］タブの右の三角をクリックして、［有効］と［コマンドエディタを表示］と、表示したいエラーメッセージにチェックを入れます

　すると、［コンソール］が表示されます。［コンソール］には、エラーメッセージやコマンドエディタ上で実行したJavaScriptの実行結果などが表示されます。

 （例）コマンドエディタでconsole.logコマンド入力して、コンソールに結果が表示


　また、［プロファイル］ボタンをクリックすると、JavaScriptのプロファイリングができ、実行に時間がかかっているメソッドを簡単に特定できます。

■HTMLのデバッグ
　左のHTMLタブを選択して、ツリーからタグを選択、もしくは、Webブラウザ上の調査したい文字を選択し、右クリックから［要素を調査］を選択すると、選択したタグのスタイルシートが右のペインに表示されます。 
　また、HTMLタグの内容やスタイルシートを編集すると、上のWebブラウザ画面に変更内容が反映されるので、表示結果を確認しながらデバッグができます。 
右ペインの［レイアウト］タブを押下すると、マージンやパディングなどの情報が表示されます。レイアウト上の各数字をクリックすると、値を変更することもできます。

1)　DOM選択
Firebugを表示した後、「カーソルアイコン」をオンにすると、画面上からマウスで要素を指定することが可能となります。指定中の要素は「HTML」パネル内でカーソルがあたった状態になります。

例えばa要素などでマウスオーバー時の状態を調べたい時は、上記で対象となるa要素などをロック状態にしておき、右のパネルの部分の「スタイル」から「:hover」を選択します。
すると、対象要素からマウスを離してもマウスオーバー時の状態（スタイル）が適用されたままになります。

「HTML」パネル内にて要素を選択した後、右クリックで表示するメニューから「属性変更時にブレーク」にチェックを入れると、その属性が変更された時に「スクリプト」パネルが開き、この処理を実行している箇所に自動的にブレークポイントが設定されます。
例えば他人が書いたソースなど、どこで処理を行っているかが把握しにくい場合に、手っ取り早く調査するのに非常に便利です。

■CSSのデバッグ
［CSS］タブのデバッグでは、HTMLファイルよりインクルードされたスタイルファイルの編集や、スタイルの無効化ができます。編集したいCSSファイルを選択すると編集することができ、スタイルの左側をクリックすれば、無効化も可能です。

 ■JavaScriptのデバッグ
 　［スクリプト］タブを選択すると、JavaScriptのデバッグができます。デバッグしたいJavaScriptファイルを選択してブレークポイントを設定すると、変数の内容やスタックトレースの確認ができます。

■アクセス時間の統計情報

　［接続］タブをクリックすると、各ファイルのWebサーバへ対するアクセス時間を計測できます。レスポンス待ち時間、データ転送時間、Webブラウザへのロード時間などを計測できます。

※Firebugを有効に利用するためのアドオン
【1】Cookieの内容を表示する「FireCookie」
【2】HTMLのインラインを可視化する「Inline Code Finder」
【3】JavaScriptをハイライティング「FireRainbow」
【4】HTMLタグのヘルプ機能を追加する「CodeBurner」
【5】jQueryのデバッギング機能を追加「FireQuery」
【6】XPathにマッチするタグを表示「FireFinder」
【7】Webサイトの表示速度を計測「YSlow」    
 
【参考URL】
http://www.atmarkit.co.jp/ait/articles/0912/03/news093.html
http://blog.bluearrowslab.com/firefox/804/
http://web8bungi.sakura.ne.jp/first/htmlcss/firebug.html
投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2015年2月5日木曜日

JavaScriptのデバッグ方法

JavaScriptでの開発で、デバッグ方法について、調べたので、まとめてみました。

１、alert
alertは、printfデバッグのJavaScript版。　どのWebブラウザでも利用可能となっている。
alert(hoge);　でhoge変数の中身を確認する

 ２、console.log
chrome、Safari、IE(8以上)、FireFox(Firebug使用)　のコンソール出力する。
もともとのFirefoxのアドオンであるFirebugで実装されていた機能で、Safari、Chromeなどで標準搭載するようになっった。

同じようなものに、console.log()、console.debug()、console.error()、console.warn()、console.info()等がある

※JavaScriptのデバッグ使える関数で以下のものがあります
1) console.dir()　　オブジェクトの内容を確認する
2) console.trace()　関数がどこから呼ばれたか調べる
3) console.time()　レスポンス（パフォーマンス）速度を計測する
4) console.assert()　アサーションを使う

３、デバッグツールを使用
1) IE
以下のツールがあります。
JavaScriptのエラーが発生した際にVisual StudioのデバッガでJavaScriptのデバッグを行うことが可能です。
・IETester
・開発者ツール（F１２を押すと画面がでてくる）
・Internet Explorer Collection

（Internet Explorer Collection）
ダウンロードサイト：
http://finalbuilds.com/iecollection.htm

詳細は、
「Internet Explorer 8 の開発者ツールの概要」や「開発者ツール : スクリプト デバッグの概要」，「開発者ツールを使用したスクリプトのプロファイリング」
を参照してください。

2) Firefox
FirebugはHTML／CSSの解析・リアルタイム編集，コンソールでのJavaScriptの実行やステップ実行，変数やオブジェクトの中身の解 析，ネットワークのログ取得にヘッダの解析，JavaScriptの実行をプロファイリング，といったことが可能な非常に高機能なデバッグ専用拡張です。
 http://gihyo.jp/dev/feature/01/firebug

3) Chrome(Safari)
「Web Inspector」という開発ツールがあります。

http://gihyo.jp/dev/serial/01/chrome-extensions/0006

 4) Opera
「Dragonfly」という開発ツールがあります。

４、その他
consoleイベントの実装は以下の通りとなっているので、ツールごとに、デバッグ情報の出し方を考える必要があります。
// 共通
console.log
console.warn
console.error
console.info
// Dragonfly以外
console.assert
// Web InspectorとDragonfly以外
console.clear
// FirebugとWeb Inspector
console.count
console.debug
console.dir
console.dirxml
console.group
console.groupEnd
console.markTimeline
console.profile
console.profileEnd
console.time
console.timeEnd
console.trace
// Firebugのみ
console.exception
console.groupCollapsed

動的に追加するスクリプトなどではブレークポイントの設置が難しいケースがあります。
そんなときは，debugger;という行を追加しておくとその場所でブレークすることができます。

なお，debuggerはECMAScript第3版（JavaScriptのベースとなる仕様）では予約語であり，ECMAScript第5版ではキー ワードとなっているので，非対応ブラウザでもシンタックスエラーになることはなく，実行時に例外を投げることになります。

デバッガ（IEのスクリプトエ ディタやVisual Studioなど）によっては，debuggerステートメントには対応していないが，例外が起こることによってブレークさせることもできます。

■プロファイリング
OperaのDragonfly以外のブラウザはJavaScriptのプロファイリング機能を搭載しています。
プロファイリングでは細かい単位でパフォーマンスをチェックすることができるので，是非試行錯誤してエンジンの傾向を探ってみてください。
一見些細なことに思えるような部分でも調整してみると驚くほどにパフォーマンスが上がることもあります。

開発ツールは一つ覚えればいいと思うので、Firebugを使いこなせるようにしようと思っています。



【参考URL】
http://kazefuku.net/archives/1244
http://gihyo.jp/dev/feature/01/devtools/0001
http://www.atmarkit.co.jp/ait/articles/1407/11/news031_2.html
http://www.atmarkit.co.jp/ait/articles/1304/01/news016.html
https://app.codegrid.net/entry/breakpoint-1
https://msdn.microsoft.com/ja-jp/library/gg699336(v=vs.85).aspx 
https://developer.mozilla.org/ja/docs/Tools/Debugger
http://shim0mura.hatenadiary.jp/entry/20111231/1325357395
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://so-zou.jp/web-app/tech/browser/firefox/developer-tools/javascript-debugger/
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0002
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2015年2月2日月曜日

HTML5(日付の表示方法）

HTML5アプリ開発で、日付の表示方法について説明します。

今日の日付は、JavaScriptでnew Date()で取得します。
toLocaleDateString、toISOString関数を使って文字列表現します。

実際にサンプルを使って、試してみます。
最初に"MM.DD.YY"の固定形式で日付表示して、次の行に日付変換してISO形式で表示します。

1) id="today"要素dateEｌのテキスト部分に今日(today)をtoLocaleDateStringをつかって、[2015年2月2日]の形式で日付を設定します。

2) toISOStringを使って、ISO日付形式(YYYY-MM-DDTHH:mm:ss.sssZ)で文字列変換しますします
3) setAttributeを使ってdatetime属性に日付を設定して、
4) HTML側でtimeタグ内でdatetime属性を使用して、日付表示します

【サンプル】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8" />
 <title>Using the HTML5 Time Element</title>
 <script>
function assignDate() {
  var dateEl = document.getElementById("today");
  var today = new Date();
  dateEl.textContent = today.toLocaleDateString();
  dateEl.setAttribute("datetime", today.toISOString());
}
window.addEventListener("load", assignDate);
 </script>
</head>
<body>
 <h1>HTML5 Time Element</h1>
 <p>HTML 2.0 was published on
    <time datetime="2015-02-05">02.02.2015</time>.</p>
 <p>Today is <time id="today" datetime=""></time>.</p>
</body>
</html>

【結果】
尚、ブラウザごとに表示結果が異なるので、日付の扱いは注意が必要です。

(IE11)
ISO日付形式ができていない
（Firefox)


(Chrome)



 【その他】
ロケート変換はいろいろできますので、覚えておきましょう
var date = new Date();
var options = {
    weekday: "long", year: "numeric", month: "short",
    day: "numeric", hour: "2-digit", minute: "2-digit"
};
date.toLocaleDateString("en-US")　　　-> 2/2/2015
date.toLocaleTimeString("en-us", options) -> MondayFeb,2,2015, 09:40 AM
date.toLocaleDateString("ja-JP") ->2015年2月2日
date.toLocaleTimeString("ja-JP", options)　->　2015年2月2日金曜日 09：40

【参考URL】
http://www.codeproject.com/Articles/870950/Expressing-Date-Time-Information-with-the-time-Ele
投稿者 時刻: 1 件のコメント:
ラベル: ,
登録: 投稿 (Atom)