CSS

[CSS]セレクタの優先順位まとめ

himecas

2012/12/28

CSS

No Comments

CSSセレクタの優先順位について、まとめてみました。セレクタの優先順位にはいくつかルールがあります。それぞれのルールについて説明していきます。後から記述した内容が優先されるクラスよりIDの方が優先されるより詳細に…

[CSS]疑似要素と疑似クラスを使ってさらに細かくスタイルを指定する

himecas

2012/12/12

CSS

No Comments

疑似要素と疑似クラスを使うと通常よりもさらに柔軟にスタイルを変更することができます。疑似要素と疑似クラスってなんだ？となるかもしれませんが、私の乏しい表現力ではうまく説明できる気がしないので、実際にCSSを見てもらう方が…

[CSS]ちょっとだけ複雑なセレクタの指定方法

himecas

2012/12/09

CSS

No Comments

ちょっとだけ複雑なセレクタの指定方法には、下記の4パターンがあります。 a,b（複数のセレクタをカンマで区切る） a b（複数のセレクタを半角スペースで区切る） a>b（複数のセレクタの間に>をつける） ab…

[CSS]マウスカーソルをスタイリングするcursorプロパティ

himecas

2012/12/05

CSS

No Comments

色んなWEBサイトを見ていると、マウスカーソルをリンクや画像等の上に合わせた時に、マウスカーソルの形が変形することがありますね。切り替わるマウスカーソルの形は、環境によって決められますが、これをCSSでしっかり指定して…

[CSS]displayを使ってブロック要素とインライン要素を変更する

himecas

2012/11/27

CSS

No Comments

HTMLの要素には色々なものがありますが、それぞれブロック要素とインライン要素の特性を持っています。例えば、pタグはブロック要素、aタグはインライン要素になります。ブロック要素は前後に改行が入りますが、インライン要素には…

[CSS]リストのスタイルを変更する

himecas

2012/11/26

CSS

No Comments

olやul等のスタイルを変更する方法についてご紹介いたします。マーカーの指定まずは、リストの左側に出るマーカーの指定から見てみましょう。マーカーの指定は、「list-style-type」で指定します。list-st…

CSSでレイアウトを作成する

himecas

2012/11/23

CSS

No Comments

CSSを使ってレイアウトを作成する方法をご紹介いたします。例えば、以下のようなレイアウトにしたいとします。全体の幅が950pxで、サイドバーが150px、メインコンテンツが800pxです。 HTMLの記述 HTMLの…

CSSで要素を回り込みさせる「floatとclear」

himecas

2012/11/19

CSS

4 Comments

WEBページに画像を配置して、「文字をその横に持っていきたいのに下に表示されてしまう」そんな経験ないでしょうか？画像はブロック要素なので、初期の状態では次の要素は横ではなく下に配置されます。下に配置される要素を画像に…

[CSS]paddingとmarginの違い

himecas

2012/11/16

CSS

No Comments

余白のスタイルを指定する際に使うプロパティには、「padding」と「margin」があります。それぞれの違いは、、、 padding：内側の余白 margin：外側の余白ということになります。 paddingとma…

[CSS]要素に枠線をつけるプロパティ

himecas

2012/11/14

CSS

No Comments

枠線をつけるプロパティには、以下3つがあります。 border-color border-width border-style border-color border-colorは、枠線の色を決めるプロパティです。値には…