CSS 覚え書き

[ dl dt を横並びにする ] dl dt return Top

□　float：left ;　を使う

□　negative margin ;　を使う

□　position: absolute;　を使う

□　display:flex;　を使う

[ CSS 計算式 ] calc()return Top

□ Example

  div {
    pading: calc( 20px - ( 1em * 1.4 - 1em ) / 2);
  }
  .item {
     width: calc( 100vw / 3 -4px );
     hight: calc( 100vh / 2 ; 10px );
   }

[ CSS 変数 ( cssカスタムプロパティ ) ]return Top

疑似クラスを使って変数を宣言する

◇ 定義

変数　:　名値

--main-gutter: 120pxd

◇ 呼び出し

var ( 変数名 )

margin: ver( --main-gutter );

  :root { --main-bg-color: #00f;}
  
  .one { background-color: var( --main-color );}

  .tow { background-color: var( --main-color );}

※　呼び出す時に単位を書き足しても無効
　　CSS変数では大文字と小文字を区別される

✕ div { 
      --gutter: 30;
      margin: var(--gutter)px;
   }
○ div { 
      --gutter: 30px;
      margin: var(--gutter);
   }
○ div { 
      --gutter: 30;
      margin: calc(var(--gutter)*1px);
   }
   
   --bg: pink;
   --Bg: orange;

CSS変数の代替値

第二引数でCSS変数が無効であった場合に代わりに使用される代替値を定義する

.two { color: var(--my-var, red); }
   /* --my-var が定義されていなければ red */

.three { background-color: var(--my-var, var(--my-background, pink)); }
   /* my-var 及び --my-background が定義されていなければ pink */

.three { background-color: var(--my-var, --my-background, pink); }
   /* 指定の仕方が無効 */

CSS変数の継承

  CSS
  
  .two { --test: 10px; }
  .three { --test: 2em; }
  
  HTML

  <div class="one">                <!-- 変数(--test)の値を持たない -->
    <div class="two">              <!-- 変数(--test)の値は 10px -->
        <div class="three"></div>  <!-- 変数(--test)の値は 2em -->
        <div class="four"></div>   <!-- 変数(--test)の値は 10px -->
    </div>
  </div>
  

※ two の変数の値が three と four に継承され　10pxの値を持つ
　　但し three は自身の値で　2emを持つ

[ <a>を<li>一杯に広げる ]return Top

    <ul>
      <li><a href="#">HOME</a></li>
    </ul>

• HOME

• HOME

□ Example 1

    li a {
      display: block;
      width: 100%;
      height: 100%;
    }


□ Example 2

    ul li {
      position: relatibve;
    }
    
    li a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
□ Example 3

    <li><a hlef="#"><p>HOME</p></a></li> 

HTML

 <hr class="printCR">
 
CSS

    hr.printCR {/*　 印刷改行　*/
      page-break-after: always;
      visibility: hidden;
      margin: 0px;
      padding: 0px;
    }

HTML

<div class="flexbox-container-vertical-center">
    <span>中央</span>
</div>

CSS

vertical-center.css
.flexbox-container-vertical-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    width: 100px; /* 見た目用 */
    height: 50px; /* 見た目用 */
    border: 1px solid; /* 見た目用 */
}
span {
    border: 1px solid; /* 見た目用 */
}

[AndroidだけにCSSを適用させたい場合]return Top

スマーフォトフォンをコーディングしているとiPhoneとAndroidのブラウザで若干見た目が違っている場合があります。 特にAndroidブラウザだけ意図した見え方になっていない場合が多々あります。 その場合は、Androidブラウザの場合だけHTMLタグにclass名「android」を付与してあげると簡単に対応が可能です。

  
    example.js(JQuery)
    
    $(function () {
    if(navigator.userAgent.indexOf('Android') > 0){
    $("html").addClass("android");
    }
    });
    
    example.css
    
    html.android .hogehoge{
    margin-top: 10px;
    }
    

iPhoneやAndroidでは、WEBサイトのテキストを自動で大きさを調整する機能が入っています。
この現象を回避するには次のCSSを記述する。

body {
-webkit-text-size-adjust: 100%;
}

[CSSでメディアクエリ(Media Queries)の基本的な書き方]return Top

横幅 600px 以下のデバイス
  @media screen and (max-width: 600px) {
    div{ width: 100%;}
  }
  ----------------------------------------------------------------
  主なメディア特性
  width	        ビューポートの幅
  height	      ビューポートの高さ
  aspect-ratio	アスペクト比（ビューポートの幅と高さから算出）
  orientation	  ビューポートの向き。 
                とれる値は portrait (縦長) または landscape (横長)
 ------------------------------------------------------------------
●resolution	出力デバイスの画素密度
  -webkit-device-pixel-ratio	デバイスピクセル比

●Retinaディスプレイ（デバイスピクセル比が２以上のデバイス）
  @media screen and (-webkit-min-device-pixel-ratio: 2) {}
  以下と同じ
  @media screen and (min-resolution: 2dppx) {}
  ------------------------------------------------------------------
Level4からの記法
Media Queries Lebel4 からは、以下のように記述することができるようになりました。

  例：横幅 600px 未満のデバイス
    @media screen and (width < 600px) {}
  
  例：横幅 320px 以上 600px 未満のデバイス
    @media screen and (320px <= width < 600px) {}

●メディアタイプがscreen かつ 横幅が600px以下 かつ デバイスピクセル比が2
  @media screen and (max-width: 600px) and (resolution: 2dppx) {}

  例：横幅が320px 以上かつ600px 以下 ( <= や >=を使うともっと楽ですが)
    @media (min-width: 320px) and (max-width: 600px) {}

●メディアタイプがscreen かつ 横幅が600px以下」または、「デバイスピクセル比が2」
  @media screen and (max-width: 600px), (resolution: 2dppx){}

  例：横幅が480px以下、または1200px以上
   @media (max-width: 480px), (min-width: 1200px){}

●例えば、レスポンシブデザインに対応するため、私はスマホに適用させるスタイルを
 以下のように記述してきました。
    @media screen and (max-width: 767px) {}
  これ、以下でいいんですね。
    @media (max-width: 767px) {}
  もしくは、
    @media (width < 768px) {}