デザイン
iconを重ねる <div class-"fa-stack"> <i></i> <i></i> </div> アイコンを重ねるためには、fa-stackを親要素に追加して、子要素に重ねるアイコンを配置します。 子要素は次のようにクラスを追加します。 外側に見せたいアイコン => fa-stack-2x(少し大きめのサイズ) 内側に見せたいアイコン => fa-stack…
float属性を指定すると、要素は それを囲む要素の高さに関係無く表示され、スタイル崩れが起きる場合があります。 したがって、float属性を指定する際には、その一つ上の要素(例えば li要素ならば ul要素 など)にoverflow属性を指定し、その値にhidden をつ…
&セレクタを.contentsセレクタの後ろに付与した場合は、.contentsに続いて&セレクタの内容が展開されます。 &セレクタには、親のセレクタの参照を返すため、結果は次のようになります。 // &の親セレクタはこれ .preview .header .title // であるため、cont…
@at-rootをつけたセレクタは、そのままグローバルなところに展開されます。 .container { .row { @at-root .red { color: red; } } } 展開されるCSS .container .row {} .red { color: red; }
中身をfloatにすることで起こる、レイアウト崩れを解消する方法。 overflowを使う！ html <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML+CSS</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class="contents"> <h1>Layout</h1> <div class="box"> <h2>Box 1</h2> <p> hello world he…</p></div></div></body></html>
aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。 今回はその方法を紹介。 text-decorationの設定 デフォルトのaタグは以下のようになります。 そこで、text-decorationというプロパティ…
<p class="first-line">aaaaaaaaa</br> bbbbbbbbb</br> ccccccccc</br> ddddddddd</br> </p> <p class="first-letter">aaaaaaaaa</br> bbbbbbbbb</br> ccccccccc</br> ddddddddd</br> </p> :first-line, :first-letterを使用 最初の行のみ、最初の文字のみスタイル変更することができる。 p.first-line:first-line { color: red; } p.first-letter:first-let…
<ul> <li>１</li> <li>２</li> <li>３</li> </ul> <a href="http://google.com">google!</a> <input type="text"> :first-childを使用 ul li:first-child { color: red; } 結果 :link, :visited, :hover, :activeを使用 リンクに対して以下の擬似クラスが使用可能。 a:link { color: green; } /* 未訪問のリンク */ a:visited { color: blue; } /* 訪…
こちらのhtmlを元に属性セレクタを使用していきます。 <body> <p> <a href="http://google.com">Googleへ</a> </p> <p> <a href="http://yahoo.co.jp" title="yahoo" class="search link">Yahoo!へ</a> </p> </body> タイトルを指定 a[title] { color: red; } これでtitle属性をもつaタグにスタイルが適用されます。 今回は、「Yahoo!へ」のみが赤色になります。 属性の値を指定する a[title="…
「a, b」で指定 h1, h2 { color: red; } これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。 「a b」で指定 div p { color: red; } これは、divの下にあるpタグ全てにスタイルを適用します。 「a > b」で指定 div …
WEBサイトを作る際に、トップ画の縦横比がうまく変更できず悩んでいました。 background-size: cover; にすると画像により、左右上下に余白ができてしまい、スライドショーにすると違和感を感じます。 background-size: cover; を設定すると、PCで見たときは…
