ただ日々を記すもの

意識高めを装うことができます

デザイン関連

【CSS】aタグの下線をなくす方法

aタグにはデフォルトで下線が設定されていますが、デザインの関係上その下線を取り除きたい場面も多々あると思います。 今回はその方法を紹介。 text-decorationの設定 デフォルトのaタグは以下のようになります。 そこで、text-decorationというプロパティ…

【CSS】擬似要素

<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…

【CSS】擬似クラス

<ul> <li>1</li> <li>2</li> <li>3</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; } /* 訪…

【CSS】属性セレクタを使用する

こちらの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="…

【CSS】セレクタの指定

「a, b」で指定 h1, h2 { color: red; } これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。 「a b」で指定 div p { color: red; } これは、divの下にあるpタグ全てにスタイルを適用します。 「a > b」で指定 div …