親要素の中に子要素が存在している場合に、この子要素にmargin-topを指定してもmarginが効かないことがあります。 このような場合、marginの相殺が原因になることが多いです。 このmarginの相殺について分 …続きを読む→

CSSで行内やセル内の縦方向の位置を指定するにはvertical-alignを使うが、ボックス要素内で指定しても効かない。このようなときは、ボックス要素をdisplay:table-cellでセルに変えて、vertica …続きを読む→

HTML5にはcontentEditableという属性があります。この値がtrueだと、その要素はブラウザ内で編集可能となります。この値がfalseだと編集不可能になります。 javaScript HTML サンプル 編 …続きを読む→

YouTube再生後に表示される関連動画を表示させないようにするには、次のように埋め込むurlの後に?rel=0を付ければよい。 <iframe width="420" height=&quot …続きを読む→

ボックスを並べて表示するにはCSSのフレキシブルボックスレイアウトを使うが、これ以外にもdisplayプロパティを使ってボックスを組み合わせて表のようにすることができる。 [HTML] <div id=" …続きを読む→

CANVASデータをファイルに保存／ファイルから読み込む

cssのline-heightプロパティは、行の高さを指定する際に使用します。 このときの、行の高さとフォントサイズの関係は次のようになります。 例えばline-heightが24pxでfont-sizeが16pxの場合 …続きを読む→

画像を描画領域の横幅一杯に表示する際、以下の2種類の表示方法があります。レスポンシブにする際には活用できます。 <No1> 「描画領域の横方向全部に画像を表示する」（描画領域の横幅に合わせて画像を自動で拡大・ …続きを読む→

要素を回り込み表示させたい時にcssのfloatを使いますが、回り込みさせた要素の親要素に背景色や枠線をつけようとしたら思い通りのスタイルにならなかったことがありました。 そこで調べてみると、floatを使うと子要素が浮 …続きを読む→

お絵描きの作り方のサンプルがありましたので、試しに実装してみました。