HTML&CSS

背景画像の拡大縮小〜background-size

background-sizeプロパティについて 背景画像をCSSで設定するにはbackground-imageプロパティを使用します。 CSS3のbackground-sizeプロパティは、背景画像の幅・高さを拡大・縮小することができます。ただし、拡大すると画像の劣化が起こりますので注意してくださ  >>続きを読む

JavaScriptの表示についてまとめ

JavaScriptを勉強するときのモヤモヤ 一般的にJavaScriptはブラウザで簡単に表示して使用できるイベントドリブンな言語だと説明されます。 確かにコンパイルの必要もないし、初心者に優しい言語にまちがいないようです。 さっそく初心者用の本を開いて学習を始めると変数や関数そして演算子や制御命  >>続きを読む

CSS2.1のセレクタの復習

CSS2.1 セレクタ セレクタのパターンマッチ パターン 名称 例    h1,h2,h3 グループセレクタ セレクタをカンマ(,)で区切ってグループ化 * 全称セレクタ あらゆる要素にマッチする。 p タイプセレクタ p要素にマッチする。 div p 子孫セレクタ div要素の子孫であるp要素に  >>続きを読む

ネガティブマージン

ネガティブマージンは設定する方向で違った動きをします。 margin-leftとmargin-topはマージンを設定した要素がその方向へ動きます。 margin-rightとmargin-bottomの場合はマージンを設定した要素は動かずにその後に続く要素に影響を及ぼします。 それぞれのネガティブマ  >>続きを読む

ナビゲーション作成のポイント

ul要素とli要素は初期状態ではマージンとパディングが設定されていますので、いったん0にリセットします。 li要素のマーカーを消すためlist-style-type:noneとします。 リンクであることがわかりやすいように、マーカーを付けます。マーカー画像はbackground-imageで指定しま  >>続きを読む

floatとpositionを使用したレイアウト

赤、緑、青のdivでできたボックスが通常フローしています。 これにfloatを設定して次のように横並びにしたいのですが、うまくいきません。 通常フローのHTMLは次のようになっています。 <div id="wrapper"> <div class="r  >>続きを読む

textariaのリサイズを無効

フォームを作成する時に使用する複数行のテキストボックスはtextariaタグを使用します。 この複数行のボックスはユーザーが大きくしたり小さくしたりできます。 デザイン上拡大縮小を許したくない場合はCSSで次のように指定します。 textarea { resize: none; }

imgのフロート〜CSS フロートと回り込み

p要素の中のimgをフロートして右または左に移動させて、次の段落のp要素のテキストを回り込みをさせたい場合です。 imgの親要素にフロートをかける HTMLのコードは次のようにimgを囲むp要素にclass名を付けて対象のp要素をフロートさせます。 sampleはこちら <p class=&q  >>続きを読む

body要素のマージン〜CSS marginの挙動

body要素のmarginはどのような挙動をするのでしょう。 一見ブラウザの表示領域の外に存在するように思えますが、実際はブラウザの表示領域内に存在します。 下の例ではmargin領域(黄色)が存在してその内側にボーダー(緑色)があり、さらにその内側にpadding領域(ピンク)があり、そしてコンテ  >>続きを読む

単位emの使い方〜CSS

単位のエム(em)の定義は次のようになっています。 ‘em’という相対単位は、それが使われた要素の’font-size’ の算出値を参照する。 例外は’font-size’自身にこの単位を用いた場合で、その時は親要素の̵  >>続きを読む