CSS

Sassの変数を活用してフォントサイズをピクセルから自動的にパーセント表記に変換する方法

//例
.hogehoge {
    font-size: fs(14);
}
//下記で出力される↓↓↓
.hogehoge {
    font-size: 117%;
}
//Sass
//基本サイズを12pxとした場合のパーセントの値を配列で並べていく
$sizeList:84%, 92%, 100%, 109%, 117%, 125%, 134%, 142%, 150%, 159%, 167%, 175%, 184%, 192%, 200%, 209%, 217%, 225%, 233%, 241%, 250%, 284%, 292%, 300%, 309%, 317%, 325%, 334%, 342%, 350%, 359%, 367%, 375%, 384%, 392%, 400%, 409%, 417%, 425%, 434%, 442%;
//サイズが10pxよりちいさければ、10pxとし、50pxより大きければ50pxとし、配列とピクセルの値を連携させる。
//※今回は10pxから50pxの間で設定できるように指定。
@function fs($size) {
    @if $size < 10 {
        $size: 10;
    }
    @if $size > 50 {
        $size: 50;
    }
    @return nth($sizeList, $size - 9);
}

CSSを活用してinputのチェックボックスやラジオボタンを画像にする方法

<div class="sample">
    <input name="s1" id="radio1" value="1" type="radio">
    <label for="select1">りんご</label>
</div>
.sample input{ display: none;}
.sample label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.sample label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック前の画像');
}
.sample input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック後の画像');
}

あとはサイズや画像を指定すれば自由に作ることが出来ます。

CSSでスマホでリンクをタップした時に色が変わらないようにする方法

スマホでちょっと気になるのが、リンク箇所をタップした時に色が変わったりする点です。
そこで今回はCSSでタップ時の色を消す方法をご紹介します。

下記をaタグに指定してください。

rgba(0,0,0,0)」の値を変えることでタップ時の色を指定することも可能です。

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

ページの高さが足りない時にフッタを画面の下部に固定する方法

下記のようなHTMLの構造であったとして説明していきます。

<html>
<body>
   <!-- ▼ページ全体を覆うdiv -->
   <div id="wrapper">

      <div id="header">
         ↑↓ヘッダ箇所
      </div>

      <div id="main">
         ↑↓本文箇所
      </div>

      <div id="footer">
         ↑↓フッタ箇所
      </div>

   </div>
   <!-- ▲ページ全体を覆うdiv -->
</body>
</html>

あとは下記のCSSを追加するだけになります。

#wrapper {
   position: relative;
   min-height: 100%;
}

#main {
   padding-bottom: 100px; /* フッタの高さ分余白を追加 */
}

#footer {
   position: absolute;
   bottom: 0px;
}

※ヘッダやフッタ箇所にmarginのある要素を入れる場合は、marginを0にしておかないと表示がおかしくなる可能性もありますのでご注意ください。

CSSのletter-spacingで文字間隔を調整

文字間隔をスペース(空白文字)等で調節すると音声ブラウザ等で読み上げ内容がおかしくなってしまったりします。そこで文字間を調整したい場合はCSSのletter-spacingを利用して文字間隔を調整しましょう。

使用例としては三種類あります。

デフォルト

p{
	letter-spacing : normal;
}

ピクセル数で指定(文字間隔が5ピクセル)

p{
	letter-spacing : 5px;
}

文字数で指定(文字間隔が1.5文字分)

p{
	letter-spacing : 1.5em;
}

Chrome、Firefox、SafariのCSSハック

IEの古いバージョンのみのハックの利用は多いですが、稀にChromeのみ、Firefoxのみ、Safariのみ等でCSSを適用させないといけないパターンもあります。

そういった場合のハックをご紹介します。

Firefoxのみの場合

@-moz-document url-prefix() {
	.Selector {
		margin: 0;
	}
}

Chromeのみの場合

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.Selector {
		margin-top: 0;
	}
}

Safariのみの場合

@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .Selector {
   		margin-top: 0;
  }
}

IEのCSSハック

IEのバージョンによって個別のCSSの処理がが必要になることがあります。

そこで各バージョンごとのCSSのハックをまとめました。

また、同時に各IEハックを利用する場合は記述する順番に注意しないと正しく機能しません。

IEハックは以下になります(記述順に書いております)。

IE8CSSハック

html>/**/body {
margin/***/: 0¥9;
}

IE7CSSハック

*+html body {
margin: 0;
}

IE6CSSハック

body {
_margin: 0;
}

IE9CSSハック

body:not(:target) {
margin: 0¥9;
}

IE10CSSハック

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
body {
margin: 0 !important; /*同時に利用する場合はimportantを追加する*/
}
}

Youtube動画を埋め込んでレスポンシブに対応

レスポンシブサイトにYoutube動画を埋め込んだ際の実装方法をご紹介します。

まずHTMLですが、前回記述したようにこのような埋め込みをします。

<div class="youtube">
  <iframe width="幅" height="高さ" src="https://www.youtube.com/embed/動画のID"></iframe>
</div>

そしてCSSは以下のように記述します。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

これで解決です。

スマホでリンクタップしたときの色の変更

スマホだと、マウスを乗せるという動作がありません。ですがタップしたときに色が変わるという特性があります。

通常黒系の半透明に変化しますが、もし背景が黒かった場合は変化に気づきにくいです。

その場合は以下のCSSをリンク部分に追加しましょう。

-webkit-tap-highlight-color: rgba(255,255,255,.2);

この時に半透明のRGBaカラーで指定しないと元の内容が見えなくなってしまうのでご注意を。