CSS
画面の横サイズに対応してCSSスタイルを切り替える 画面の横サイズ(ピクセル)に応じてCSSを切り替える方法です。ウェブページをレスポンシブ化する場合に役に立ちます。 ※この記事では画面の横サイズに応じてCSSを切り替える方法を有料(100円)でご紹介し…
jQuery と CSS でハンバーガーメニューを作る 今回は jQury と CSS でスマートフォンサイトに欠かせないハンバーガーメニューを作ります。 ~ 主な仕様 ~ ・テキストで作ったメニューアイコンを配置する。・メニューアイコンをタップすると、画面の左に隠れ…
CSSで文字に影をつけたい CSSで文字に影を付けるには「text-shadow」プロパティを設定します。 text-shadow : a b c d e; a・・・右方向にずらす量b・・・下方向にずらす量c・・・ぼかし量d・・・色 /* 右方向と下方向に5pxずらしたグレーで3pxぼけた影を付…
オブジェクトに不透明度を設定したい オブジェクトに不透明度を設定するには「opacity」プロパティを設定します。※不透明度・・・オブジェクトの裏側が見えなくなる割合です。 #sample { opacity: 0.5 } /* オブジェクトの不透明度を0.5(50%)にする */ サ…
オブジェクトを任意の角度で回転させたい オブジェクトを任意の角度で回転させるには「transform」+「rotate」を設定します。 #sample { transform: rotate(25deg) } /* オブジェクトを25度回転する */ サンプルコード(CSS) #kakudo { border: solid red; …
要素のプロパティを初期値(規定値)にしたい 要素のプロパティを初期値または規定値にするには「initial」を設定します。 #sample { color: initial } /* color プロパティを初期値にする */ サンプルコード(CSS) #ao { color : blue;} #shoki { color : …
「マージン」と「パディング」の違いは? ホームページを作っていて良く間違ってしまうのがマージン(margin)とパディング(padding)です。 マージンとパディングの違いは、スペースをオブジェクトの外側に作るのか、または、内側に作るのかの違いだけなの…
文字列の最初にインデントをつける CSSで文字列の一行目にインデントをつけるには「text-indent」を指定します。 例)text-indent: 1em; ※単位は em px ex % など CSSコード 以下では「indent」という ID を付けた div 要素内の p 要素の一行目に1文字分のイ…
CSSだけで徐々にスタイルを変化させる JavaScript を使わず CSSだけでスタイルを徐々に変化させるには「transition-property」と「transition-duration」を使用します。 transition-property・・・変化させるプロパティtransition-duration・・・変化にかけ…
CSSで画像を中央に配置する CSSで画像を中央に配置するには任意の要素に以下のプロパティを設定します。 CSSコード img { display: block; margin: 0 auto;} <表示結果> 画像が中央に配置されました。 備考・その他 text-align に center を指定しても画像…
CSSとは? Cascading Style Sheets — CSS — はHTML を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と意味論を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフ…
~ 要素の枠(アウトライン)を表示する ~ 要素の枠(アウトライン)を表示するには「outline-style」、枠の幅を指定するには「outline-width」、枠の色を指定するには「outline-color」プロパティを設定しますが、「outline」でスタイルと幅と色を一度に指…
~ テキストに影を付ける ~ CSSでテキストに影を付けるには「text-shadow」プロパティを使用します。パラメーターは左から「色指定」「X方向の移動量」「Y方向の移動量」「ぼかし量」になります。 text-shadow : 色指定 X方向の移動量 Y方向の移動量 ぼかし…
~ テキストに線を付ける ~ テキストに線を付けるにはテキスト装飾の「text-decoration」を使います。付けられる線の種類は「上線」「下線」「取消し線」の3種類があり、CSSでの指定方法はそれぞれ「overline」「underline」「line-through」になります。 …
~ ボックスの角を丸めたい ~ ボーダーの角を一律同じ径で丸くするには「border-radius」を指定します。四隅をそれぞれ別々の径で指定したい場合は「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-rig…
~ 文字色の指定方法 ~ 文字の色を指定するには「color」を使用します。色の指定方法は、色コード3桁(#xxx)、色コード6桁(#xxxxxx)、カラーネーム(red,blue,green…など)、RGB指定(rgb(xxx,xxx,xxx))です。 サンプル .sample { color: #F00; ※色コ…
_ CSSセレクタとは? CSSセレクタとはスタイルを適用する対象を指定している部分で、下記の赤色文字の部分がCSSセレクタになります。 .sample { text-align: center; font-weight: bold; color: #FFF;} よく使うCSSセレクタの種類 セレクタにはいろいろな…
// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させます。 要素を時計回りで45度回転させる場合:transform:rotate(45deg); 動作サンプル ページが読み込まれると、ピンク色のボックスとその中の文字「要素…
CSSで要素の枠の角を丸める デフォルトでは要素の枠の角はとがっていますが、CSS を利用すれば枠の角を自由に丸めることができます。 CSS の border-radius で角を丸める 要素の枠の角を丸めるにはCSSで「border-radius」を設定します。角の弧の大きさを半径…
CSSでタイル風メニューを作る 今回はテーブルを使わずにタイル風のメニューを作る方法を説明します。 <手順説明> まず最初にメニューの数だけ <div></div> タグを用意し、その中にメニューに使う文字列を入力します。 Htmlソースコード <div>Google</div><div>MSN</div><div>Yahoo</div><div>Apple</div><div>Microsoft</div><div>J</div>…
absolute と relative の違いを考える CSS で要素の位置(Position)を指定する時に設定する「absolute」と「relative」 の使い方の違いを考えてみます。 <今回のサンプル> div で作成した枠の中に、同じく div で作成した緑色のボックス(div要素)を配置…
jQuery と CSS で要素を移動させる 今回は jQuery を利用して <span> 要素を移動させる方法を説明します。 今回のサンプル ピンク色のボックスの下にあるグレーのボタン領域をクリックすると、ピンク色のボックスが5秒かけてゆっくりと右方向に80ピクセル動きます</span>…
CSSと<span>タグでカラーボックスを作る 今回はCSSと<span>タグで色付きのボックスを作る方法を説明します。 <CSS> CSSで作るボックスの高さと幅、文字とボックスの色の指定。<span></span>をボックス化するために「display」を「block」に指定します。<span>の場合は「display」を「block</span></span></span>…