JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

CSS

CSSの技 ~ 要素の枠(アウトライン)を表示する ~

CSS

~ 要素の枠(アウトライン)を表示する ~ 要素の枠(アウトライン)を表示するには「outline-style」、枠の幅を指定するには「outline-width」、枠の色を指定するには「outline-color」プロパティを設定しますが、「outline」でスタイルと幅と色を一度に指…

CSSの基本 ~ テキストに影を付ける ~

CSS

~ テキストに影を付ける ~ CSSでテキストに影を付けるには「text-shadow」プロパティを使用します。パラメーターは左から「色指定」「X方向の移動量」「Y方向の移動量」「ぼかし量」になります。 text-shadow : 色指定 X方向の移動量 Y方向の移動量 ぼかし…

CSSの基本 ~ テキストに線を付ける ~

CSS

~ テキストに線を付ける ~ テキストに線を付けるにはテキスト装飾の「text-decoration」を使います。付けられる線の種類は「上線」「下線」「取消し線」の3種類があり、CSSでの指定方法はそれぞれ「overline」「underline」「line-through」になります。 …

CSSの基本 ~ ボックスの角を丸めたい ~

CSS

~ ボックスの角を丸めたい ~ ボーダーの角を一律同じ径で丸くするには「border-radius」を指定します。四隅をそれぞれ別々の径で指定したい場合は「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-rig…

CSSの基本 ~ 文字色を指定する ~(色見本、カラーコード、カラーネーム)

CSS

~ 文字色の指定方法 ~ 文字の色を指定するには「color」を使用します。色の指定方法は、色コード3桁(#xxx)、色コード6桁(#xxxxxx)、カラーネーム(red,blue,green…など)、RGB指定(rgb(xxx,xxx,xxx))です。 サンプル .sample { color: #F00; ※色コ…

CSSの基本 ~ よく使うCSSセレクタの種類 ~

CSS

CSSセレクタとは? CSSセレクタとはスタイルを適用する対象を指定している部分で、下記の赤色文字の部分がCSSセレクタになります。 .sample { text-align: center; font-weight: bold; color: #FFF;} よく使うCSSセレクタの種類 セレクタにはいろいろな種類…

jQuery と CSS でHTML要素を回転させる方法

// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させてみます。 要素を右回転で45度回転させるCSS:transform:rotate(45deg); 動作サンプル ページが読み込まれると同時にピンク色のボックスとその中の文字「…

CSSで角を丸める方法

CSS

角を丸める 要素の角を丸めるにはCSSで「border-radius」を設定します。 例) border-radius : 20px; SAMPLE CSSで「border-radius : 20px;」と設定すると四隅の角が丸くなりました。 箱 HTML <div class="box">箱</div> CSS 角を丸めたい要素のCSSに「border-radius : 20px;」を追…

テーブルを使わずにCSSでタイル式メニューを作る方法

CSS

まず最初に、<div> タグの中にリンクに使う文字を必要な数だけ続けて入力します。 Htmlソースコード <div>Google</div><div>MSN</div><div>Yahoo</div><div>Apple</div><div>Microsoft</div><div>Japan</div><div>Lenovo</div> 結果表示 Google MSN Yahoo Apple Microsoft Japan Lenovo このままではあまりにも味気ないので、今度は背景に色を付</div>…

要素を absolute と relative で配置するときの基本

CSS

CSS で要素の位置(Position)を指定する時に設定する「absolute」と「relative」 の使い方の違いを考えてみましょう。 <今回のサンプル>div で作成した枠の中に、同じく div で作成した緑色のボックス(div要素)を配置していた状態。枠の div が親要素で…

<span>タグとCSSでボックスを動かすボタンを作る

<span>タグを使ってピンクのボックスを動かすボタンを作ってみよう! 今回のサンプル ピンク色のボックスの下にあるグレーのボックスをクリックするとピンク色のボックスが5秒かけて右に80ピクセル動く。ピンク色のボックスを動かしているのは「jQuery」の「animat</span>…

<SPAN>タグとCSSで色付きのボックスを作る方法

CSS

<SPAN>タグとCSSで色付きのボックスを作る方法を説明します。 CSS CSSで作るボックスの高さと幅、文字とボックスの色の指定。<span></span>をボックス化するために「display」を「block」に指定します。<span>の場合は「display」を「block」にしないとボックスにならない。<div></div>の場合は元</span></span>…