JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

CSS

画面の横サイズに対応してCSSスタイルを切り替える方法

CSS

画面の横サイズに対応してCSSスタイルを切り替える 画面の横サイズ(ピクセル)に応じてCSSを切り替える方法です。ウェブページをレスポンシブ化する場合に役に立ちます。 ※この記事では画面の横サイズに応じてCSSを切り替える方法を有料(100円)でご紹介し…

【jQuery】jQuery と CSS でスマホの「ハンバーガーメニュー」を作る方法

jQuery と CSS でハンバーガーメニューを作る 今回は jQury と CSS でスマートフォンサイトに欠かせないハンバーガーメニューを作ります。 ~ 主な仕様 ~ ・テキストで作ったメニューアイコンを配置する。・メニューアイコンをタップすると、画面の左に隠れ…

【CSSの基本】CSSで文字に影をつけたい

CSS

CSSで文字に影をつけたい CSSで文字に影を付けるには「text-shadow」プロパティを設定します。 text-shadow : a b c d e; a・・・右方向にずらす量b・・・下方向にずらす量c・・・ぼかし量d・・・色 /* 右方向と下方向に5pxずらしたグレーで3pxぼけた影を付…

【CSSの基本】オブジェクトに不透明度を設定したい

CSS

オブジェクトに不透明度を設定したい オブジェクトに不透明度を設定するには「opacity」プロパティを設定します。※不透明度・・・オブジェクトの裏側が見えなくなる割合です。 #sample { opacity: 0.5 } /* オブジェクトの不透明度を0.5(50%)にする */ サ…

【CSSの基本】オブジェクトを任意の角度で回転させたい

CSS

オブジェクトを任意の角度で回転させたい オブジェクトを任意の角度で回転させるには「transform」+「rotate」を設定します。 #sample { transform: rotate(25deg) } /* オブジェクトを25度回転する */ サンプルコード(CSS) #kakudo { border: solid red; …

【CSSの基本】要素のプロパティを初期値(規定値)にしたい

CSS

要素のプロパティを初期値(規定値)にしたい 要素のプロパティを初期値または規定値にするには「initial」を設定します。 #sample { color: initial } /* color プロパティを初期値にする */ サンプルコード(CSS) #ao { color : blue;} #shoki { color : …

【CSSの基本】マージン(margin)とパディング(padding)の違いは?

CSS

「マージン」と「パディング」の違いは? ホームページを作っていて良く間違ってしまうのがマージン(margin)とパディング(padding)です。 マージンとパディングの違いは、スペースをオブジェクトの外側に作るのか、または、内側に作るのかの違いだけなの…

【CSSの基本】文字列にの最初にインデントをつける

CSS

文字列の最初にインデントをつける CSSで文字列の一行目にインデントをつけるには「text-indent」を指定します。 例)text-indent: 1em; ※単位は em px ex % など CSSコード 以下では「indent」という ID を付けた div 要素内の p 要素の一行目に1文字分のイ…

【CSSの技】CSSだけで徐々にスタイルを変化させる

CSS

CSSだけで徐々にスタイルを変化させる JavaScript を使わず CSSだけでスタイルを徐々に変化させるには「transition-property」と「transition-duration」を使用します。 transition-property・・・変化させるプロパティtransition-duration・・・変化にかけ…

【CSSの基本】CSSで画像を中央に配置する方法

CSS

CSSで画像を中央に配置する CSSで画像を中央に配置するには任意の要素に以下のプロパティを設定します。 CSSコード img { display: block; margin: 0 auto;} <表示結果> 画像が中央に配置されました。 備考・その他 text-align に center を指定しても画像…

【CSSの基本】CSSとは?

CSS

CSSとは? Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。 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度回転させる場合:transform:rotate(45deg); 動作サンプル ページが読み込まれると、ピンク色のボックスとその中の文字「要素…

【CSS】要素の枠の角を丸める方法

CSS

CSSで要素の枠の角を丸める デフォルトでは要素の枠の角はとがっていますが、CSS を利用すれば枠の角を自由に丸めることができます。 CSS の border-radius で角を丸める 要素の枠の角を丸めるにはCSSで「border-radius」を設定します。角の弧の大きさを半径…

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

CSS

CSSでタイル風メニューを作る 今回はテーブルを使わずにタイル風のメニューを作る方法を説明します。 <手順説明> まず最初にメニューの数だけ <div></div> タグを用意し、その中にメニューに使う文字列を入力します。 Htmlソースコード <div>Google</div><div>MSN</div><div>Yahoo</div><div>Apple</div><div>Microsoft</div><div>J</div>…

【CSSの基本】要素を absolute と relative で配置するときの基本を考える

CSS

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

【jQueryの基本】jQuery と CSS で要素を移動させてみよう

jQuery と CSS で要素を移動させる 今回は jQuery を利用して <span> 要素を移動させる方法を説明します。 今回のサンプル ピンク色のボックスの下にあるグレーのボタン領域をクリックすると、ピンク色のボックスが5秒かけてゆっくりと右方向に80ピクセル動きます</span>…

【CSS】CSSと<span>タグでカラーボックスを作る方法

CSS

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