HTML・CSS
CSS【 background 】1 ～ 背景プロパティの種類とbackground-color
backgroundプロパティは、背景に関するスタイルをまとめて指定できるプロパティです。 背景に関するプロパティを使用すると、要素の背景に色や画像を表示させるだけでなく、ある画像をリピートして配置したり、色をグラデーシ […]
HTML・CSS一覧
HTML・CSS
CSS【 outline 】 ～ アウトライン
outlineプロパティは、アウトラインのスタイル、太さ、色をまとめて指定できるプロパティです。 borderプロパティと同じように要素の外枠を表示しますが、outlineプロパティは、上下左右にそれぞれ線を引くのではな […]
HTML・CSS
CSS【 border-image 】 ～ 画像ボーダー
CSS3で追加されたborder-imageプロパティを使うと、ボックスのボーダーに画像を表示することができます。 ボーダーに画像を取り入れると、自由でユニークな枠線を作ることができます。 今回は、border-imag […]
HTML・CSS
CSS【 border 】 ～ ボーダーとショートハンド
ボーダー（border）は、内容領域（content）を囲む枠線です。マージンやパディングと違って、サイズ（線の太さ）だけでなく、線のスタイルや線の色も指定できます。 ですのでショートハンドプロパティもたくさんあります。 […]
HTML・CSS
CSS【 padding】 ～ パディングとショートハンド
パディングは、枠線（border）と要素の内容領域（content）との間にあるスペースです。 要素に背景色や枠線を設定した場合に、テキストなどの内容領域の周りに適度なパディングを指定して見やすくします。 そして、マージ […]
HTML・CSS
CSS【 margin 】5 ～ マージンの相殺 (margin collapsing)（2）
marginプロパティには、margin collapsing（マージンの相殺）というルールがあります。 マージンの相殺について、CSS【 margin 】４ ～ マージンの相殺 (margin collapsing)（ […]
HTML・CSS
CSS【 margin 】4 ～ マージンの相殺 (margin collapsing)（1）
marginプロパティには、margin collapsing（マージンの相殺）というルールがあります。 今回は、このマージンの相殺について、相殺が起きる場合をまとめたいと思います。 marginプロパティについては、以 […]
HTML・CSS
CSS【 margin 】3 ～ ネガティブマージン
marginプロパティには、マイナスの数値を指定することができます。 これを、ネガティブマージンと言います。 ネガティブマージンを指定すると、マージンがボックスからはみ出るようなイメージで、画面いっぱいにヘッダやフッタを […]
HTML・CSS
CSS【 margin 】2 ～ autoとwidthと上下と左右
marginプロパティの値には、数値の他にautoという値があります。 autoという名前の通り、ブラウサが自動的に値を決めますが、auto特有のルールがあります。 今回は、marginプロパティの値の１つであるauto […]
HTML・CSS
CSS【 margin 】1 ～ マージンとショートハンド
marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。 今回は、このmarginプロパティの概要と、ショートハンドについてまとめたいと思います。 marginプロパティ […]
HTML・CSS
CSS【 ボックス 】 ～ content、margin、 padding、border
HTMLの要素は、メタデータ・コンテンツ以外のどの要素にも、CSSのボックスとよばれる四角い領域ができます。 CSSでは、width、height、paddingなどのdisplayプロパティがありますが、これらは、HT […]
HTML・CSS
CSS【 インラインとブロック 】 ～ inline、inline-block、block
HTML5から「カテゴリによる分類とコンテンツ・モデル」という新たなルールが導入され、それ以前はHTML要素で行われていた「インライン要素かブロック要素か」という区別が、CSSの初期設定で行う「インライン扱いかブロック扱 […]
