<td> を丸ごと <a> でリンクにする

テーブルのセルを丸ごとリンクにする場合は少しコツが要ります。

そのまま囲むと動かない

<table style="width: 200px; height:200px;">
    <tr>
        <a href="http://yokano-jp.blogspot.jp/">
            <td>まるごとリンク</td>
        </a>
    </tr>
</table>

--
追記：2018/01/04
そもそも tr の下には、th または td しか置けないため、
上記のコードは HTML として誤りです。
参考：https://www.w3.org/TR/2017/REC-html52-20171214/tabular-data.html#the-tr-element
--

セル内を覆う <a> を <td> の直下に入れると動く

<table style="width: 200px; height:200px;">
    <tr>
        <td>
            <a style="width:100%; height:100%; display:block;" href="http://yokano-jp.blogspot.jp/">
                まるごとリンク
            </a>
        </td>
    </tr>
</table>

<a> に幅・高さを設定するため display:block; でブロック要素にしています。

ただし、セル内のコンテンツにリンクの色や下線が付くので、
text-decoration や color などで別途スタイルの修正が必要になります。


参考
テーブルのtd全体にリンクをかける | ホームページ作成の備忘録
http://ppaso.net/archives/430

CSS: 複数行に余白付きの下線を引く

CSS の text-decoration: underline で下線を引くことができますが、文字との余白が狭いため見た目上使いづらい場合があります。

こちらのサイトのやり方が上手く使えました。
--
ノートのように罫線（下線）を引くデザイン
http://allabout.co.jp/gm/gc/24003/
--

方法としては
line-height と同じ高さの画像（下部に点線入）を準備して、
背景画像として縦横に 繰り返し表示することで実現しています。

line-height と画像の高さを合わせることで、
縦方向に繰り返した際に１行ずつ丁度点線が同じ位置に入るようになります。

IE でテキストエリアのスクロールバーを消す

IE ではテキストエリアの右側にデフォルトでスクロールバーが表示されます。
こちらは CSS の overflow で非表示にできます。

.no-scroll-bar {
    overflow: auto;
}

<textarea class="no-scroll-bar"></textarea>
<textarea></textarea>

IE で background-size の transition が動かない

IE の transition を使って background-size を滑らかにアニメーションさせようと思ったのですが、どうやら IE では background-size の transition が動作しないようです。
（仕様など調べていないのでできるのかもしれませんが）

大きさを変えるのみであれば、
transform: scale(X) で代用できることがわかったためそちらで実装しました。
http://stackoverflow.com/questions/16892500/css-transition-of-background-size-in-ie-10

コード等はまた後程アップいたします。

CSS の zoom を使ってコンテンツの高さを合わせる

スクロールなしで画面内にきっちりフィットさせたいコンテンツを、

PC、スマホなど様々なサイズに対応させる場合、

１つの方法として CSS の zoom が使用できます。

とくに画面のサイズが固定の時に使用できます。

例えばコンテンツの高さが 1000 px 固定の場合は、
以下のようにしてウィンドウの高さにきっちり合わせることができます。

$(function() {
    var height = $(window).height(),
        zoom = height / 1000;
    $('body').css('zoom', zoom);
});

TinyMCE とBootstrap の CSS が競合する

Bootstrap で作ったページ内に TinyMCE を配置したところ、
表やリンクなどのプラグインで出現するモーダルのサイズが、
通常よりも小さく表示されてしまい文字が読めない状態になった。

BootStrap の CSS を外してみたところ、元の状態で表示された。

<iframe> の中に TinyMCE を入れて CSS を適用されないようにすることも考えたけど面倒そう。
とりあえず慣れている NicEdit は競合しなかったのでこちらを使用することにした。

Bootstrap + TinyMCE の CSS の競合は時間があったら解決できないか調べてみる。

CSS：上だけ角丸にする

CSS 3 で上だけ角丸にする場合には以下のように指定する。
（プリフィックスは省略）

.upper_radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

border-top-radius とかは効かないので注意。

CSS：テーブルを角丸にするときは border-collapse: separate; にする

<table> を CSS で角丸にする場合は CSS の broder-collapse を separate にする必要があります。デフォルトでは collapse になっているため border-radius が効きませんでした。
Twitter Bootstrap などの CSS フレームワークや、その他のライブラリなどを使用しているとデフォルトで border-collapse: collapse; を指定している場合があるため注意が必要です。
こちらでだいぶはまりました。

IE6~8 で background-size を使う

jQuery プラグインの backgroundSize.js を使用すると、
 IE 6 ~ 8 で background-size と同じ動作をさせることができるようになる。

jquery backgroundSize.js
http://louisremi.github.io/jquery.backgroundSize.js/demo/

jQuery をロードした後に backgroundSize.js をロードして、
対象の要素へ以下のように background-size を指定すれば良い。

$('#target_element').css({backgroundSize: contain}); // background-size: contain と同じ動き
$('#target_element').css({backgroundSize: cover});  // background-size: cover と同じ動き

後から古いブラウザへ対応させなければならない場合に重宝します。

CSS でフォントファイルを参照する

@font-face 構文でサーバ上のフォントファイルを参照できる。
クライアント側のフォントファイルに影響されないため、
フォントも指定したい場合に使える。

/* CSS */
@font-face {
    font-family: ZnikomitNo25;
    src: url("ZnikomitNo25.otf");
}

h1 {
    font-family: ZnikomitNo25;
}

@font-face 内で font-family 名とフォントファイルのパスを指定し、
フォントを変えたい要素に、設定した font-family 名を指定すればよい。

使用したフォント

ZnikomitNo25
http://www.1001freefonts.com/znikomit_no_25.font


参考

@font-face - MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

CSS で文字の輪郭線を付ける

WebKit 系のブラウザでは文字の輪郭線を付けることができる。
デモ：http://yokano.jp/demo/stroke/

h1 {
    font-family: sans-serif;
    -webkit-text-stroke: 1px blue;
    color: white;
}

参考
Adding Stroke to Web Text - CSS-TRICKS
http://css-tricks.com/adding-stroke-to-web-text/

ラジオボタンのデザインを変える

HTML のラジオボタンのデザインを画像に変える方法として、
<label> を使う方法があります。

デモ
http://yokano.jp/demo/radio/


まず、ラジオボタンを作ります。

<label><input name="default" type="radio" checked>: A</label>
<br>
<label><input name="default" type="radio">: B</label>

<label> 要素に適当なクラスを設定します。
CSS で設定したクラスの下に入っている <input> 要素を非表示にします。

<label class="radio"><input type="radio" checked>: A</label>
<br>
<label class="radio"><input type="radio">: B</label>

ラジオボタンの画像を作成します。

<label> 要素の背景画像として設定します。
チェックされている <input> 要素を持っている<label>に "on"
チェックされていない <input> 要素を持っている<label>に"off"
というクラスを設定しています。
CSS でそれぞれのクラスの background-image を設定することで
ON / OFF を表現します。
jQuery で設定します。

// JavaScript
$('.radio').each(function() {
    if($(this).find('input').is(':checked')) {
        $(this).removeClass('off').addClass('on');
    } else {
        $(this).removeClass('on').addClass('off');
    }
});

/* CSS */
.radio {
    width: 17px;
    height: 17px;
    padding-left: 20px; /* 画像を表示するために左側を開ける */
    background-repeat: no-repeat;
}

.radio.on {
    background-image: url("img/on.png");
}

.radio.off {
    background-image: url("img/off.png");
}

最後にクリックされた時にラジオボタンを切り替える処理を JS で追加します。

$('.radio input').on('change', function() {
    $('.radio').removeClass('on').addClass('off');

    if($(this).is(':checked') {
        $(this).parent().addClass('on').removeClass('off');
    }
});

以上で完了です。


参考
jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold
http://zxcvbnmnbvcxz.com/form-improvement-2-7/

線形グラデーションのマルチブラウザ対応

CSS を以下のようにすると IE7 ~ 11、Firefox、Safari、Chrome で同じように動作する線形グラデーションが作れます。

Firefox では background-position-x(y) が動かない

スプライトアニメーションなどでよく使用する background-position-x, background-position-y ですが Firefox では動きません。
Firefox では background-position: Xpx Ypx; という表記にする必要があるため注意が必要です。

指定した data 属性を持つ HTML 要素を css の属性セレクタで指定する

HTML5 では独自データ属性として data-*** という属性を HTML 要素内に定義してデータを持たせることができます。

CSS から特定の data-*** 属性を持つ要素を選択するには、
属性セレクタを使って普通に

element[data-***="DATA"]

という形で書けばOKです。

CSS で背景色をグラデーションにする

CSS の草稿としてグラデーションが定義されています。
Gradients - W3C

ページの背景やボタンなど様々な場所で使用できます。
グラデーションには４種類あります。

• linear-gradient
• radial-gradient
• repeating-linear-gradient
• repeating-radial-gradient

線形グラデーションのサンプルを作成しました。
http://okanoworld.appspot.com/sample/css/lineargradient/index.html

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線形グラデーション</title>
        <link rel="stylesheet" href="lineargradient.css"></link>
    </head>
    <body>
        <h1>線形グラデーションサンプル</h1>
        <div id="gradient1" class="box">linear-gradient(bottom, pink, white);</div>
        <div id="gradient2" class="box">linear-gradient(45deg, lightgreen, yellow);</div>
    </body>
</html>

lineargradient.css

.box {
    width: 500px;
    height: 100px;
    margin: 10px;

    border-style: solid;
    border-color: gray;
    line-height: 100px;
    text-align: center;
    font-family: sans-serif;
}

#gradient1 {
    background: linear-gradient(bottom, pink, white);
    background: -webkit-linear-gradient(bottom, pink, white);
    background: -moz-linear-gradient(bottom, pink, white);
}

#gradient2 {
    background: linear-gradient(45deg, lightgreen, yellow);
    background: -webkit-linear-gradient(45deg, lightgreen, yellow);
    background: -moz-linear-gradient(45deg, lightgreen, yellow);
}

CSS で画像をカーソルにするときの注意

CSS の cursor で画像を設定した場合、他の値も設定しなければなりません。

cursor: url("cursor_img.png"), "pointer";

画像が存在しなかった場合、後ろに繋げた値が適用されます。

CSS cursor プロパティについてはこちらを参照
CSS/Properties/cursor - W3C

jQueryで画面を暗くして操作できなくする

黒い半透明な <div> でコンテンツを覆ってクリックイベントを通さないようにできます。

ゲームのイベント中やメッセージ送りを待っている時など、

画面を暗くして操作できないようにしたい場合があります。

１つの手段として半透明な黒い <div> でコンテンツを覆い隠す方法があります。

一時的にコンテンツのクリックを不可能にするサンプルを作成しました。

サンプルアプリ

http://okanoworld.appspot.com/sample/html5/busy/index.html

ソースコード

https://github.com/yokano/sample/tree/master/html5/busy

黒くて半透明な <div> をコンテンツの上に表示しています。
z-index でコンテンツよりも上に <div> を表示し、
jQuery から CSS の visibility の visible/hidden を切り替えています。

HTML の親ページのスタイルは子フレームへは適用されない

実は知らなかったのでメモ。よく考えたら当然ですね。
フレームで参照している先のページのスタイルが変わってしまったら困りますから。

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>html test</title>
  <style>
   frame h1 {
    color: red;
   }
  </style>
 </head>
 <frameset>
  <frame src="frame.html"></frame>
 </frameset>
</html>

frame.html

<h1>This is frame</h1>
<p>frame</p>

godoc のテンプレートを作成している時に発見しました。

3ds で animation-timing-function:steps() が動かない

3ds のウェブブラウザは CSS の keyframe-animation に対応しています。
animation-timing-function に linear や cubic-bezier() を指定すると動作するのですが、
steps() を指定しても動作しませんでした。

steps(1) を指定すると PC ではフレームの切り替えを 1 ステップでやってくれるため、
パラパラ漫画になるのですが、
3ds では ease を指定した時と同じように切り替えがなめらかになってしまい、
パラパラ漫画になりません。余計な切り替えアニメーションが表示されてしまいます。

そのため、キーフレームアニメーションを使ってパラパラアニメが作れません。
cubic-bezier() を使ってフレームの遷移速度を速くすることはできるものの、
フレームが切り替わる余計な部分も表示されてしまいます。

@-webkit-keyframe 内で background-image を変更してみても
PC だけしか反応してくれませんでした。

3ds で -webkit-animation-timing-function: steps(1) が指定出来れば楽なんですが・・・。
パラパラアニメは JavaScript のタイマーを使って css をいじるしかないのでしょうか。
うーむ・・・。

#animation {
 position: absolute;
 left: 100px;
 top: 100px;
 width: 25px;
 height: 25px;
 
 background-image: url('img/piece.png');
 background-position: 0px;
 -webkit-animation-name: play;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: steps(1);  /* 3dsで無効 */
 -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes play {
 0% { background-position: 0px; }
 17% { background-position: 25px; }
 34% { background-position: 50px; }
 51% { background-position: 75px; }
 68% { background-position: 100px; }
 85% { background-position: 125px; }
 100% { background-position: 150px; }
}