ブロックレベル要素の上下マージンに起こる「マージン相殺」現象について。 display: inline-block; float なお、上記などがかかってる場合では起きない。 <div class="box"><div class="box">.box { margin: 20px 上記の場合縦に並んだBOXの隙間は20px+20pxにはならず、20pxになる。 <div class="box1"><div class="box2">.box1 { margin:
emは親要素のfont-sizeを1とした倍数を指定するもの。 【HTML】<div class="parent"> <div class="child"> </div></div> 【CSS】html {font-size: 10px;} .parent {font-size: 1.2em →10px*1.2=12px} .child {font-size: 1.2em →12px*1.2=14.4px} remはルート要素（HTMLならhtml要素）のfont-s
HTML <p><a href="XXX.html">トップへ戻る</a></p> 上記の場合は、p要素ではなく、a要素にプロパティをかける必要がある。 ※a要素は象形で文字色の変更がされない為 CSS p a{ color:#333333; } 擬似クラス ：から始まる４つの特殊クラスがあり、主にa要素で使用する。（半角スペース入れると無効になるよ）a:hover なお以下の順番に指定しないと、他の擬似クラスに上書きされるので注意。 :link 未訪問リ
ずっとできなかった、２つの要素をひとまとめにすることができました…！私はずっとメニューバーの左にlogo、右にメニューを置きたかった！ まずHTML ↓ <nav> <div class="inner flex"> <div class="logo"> <a>FRUITS!</a> </div> <div class="menu"> <ul class="flex"> <li><a href
「クラス名」 装飾を施す範囲を指定できる。 【HTML】 <p>TEST</p> <span>TEST2</span> 【CSS】 p { color: #333333 } 上記の場合は、spanタグには適用されない。 「*」 CSS中の「*」は全ての要素に装飾が指定される。 「#」 CSS中の「#」はID名をセレクタにするときに使います。 #test{ color:red; } <p id="test">ここが適用</p> <p>ここはそのまま</p> 「
CSSを書く場所は3つあります。 ①styleタグに書く ②インラインに書く ③外部ファイルに書く ①styleタグに書く →headのなかに書く方法。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8”> <title>CSS</title> <style> h1 {color: red; } </style> </head> <body> <h1>CSS入門</h1> <p>は
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sanitize.css"> <link rel="stylesheet" href="style.css"> <title>portfolio</title> </head> <body> </body> <footer> </footer> </html>
今日から初めてのWebサイト作成ってことで備忘録を残したいと思います。
