Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

CSS

HTML5、CSS3、JavaScript API、SVGの各ブラウザのサポート状況がわかるサイト「Can I Use」

HTML5、CSS3、JavaScript API、SVGの各ブラウザのサポート状況がわかるサイト「Can I Use」を紹介します。 Can I use... Support tables for HTML5, CSS3, etcCompatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browser…

CSSエントリーのまとめ

CSSに関するエントリーのまとめページです。エントリーするたびに随時更新します。 セレクタ CSS 要素セレクタ - プログラマーな日々要素セレクタには、HTML要素を指定します。 ...CSS セレクタのグループ化 - プログラマーな日々複数の種類の要素にスタイル…

CSS 要素セレクタ

CSS

要素セレクタには、HTML要素を指定します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> h2 { color: red; } </style> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>子見出し</h3> </body> </html> レンダリング(Chrome) 関連エントリー CSSエントリーのまとめ - プログラマーな日々CSSに関するエントリーのまとめページです。 ...

CSS 疑似クラスセレクタ(:first-child)

CSS

他の要素の最初の子である要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> p:first-child { /* 他の要素の最初の子であるp要素 */ background: pink; } </style> </head> <body> <p>body要素の最初の子の段落です。</p> <p>2番目の子の段落です。</p> </body> </html> レンダリング(Chrome) 関連エン…

CSS 疑似クラスセレクタ(:active)

CSS

入力によってアクティブになった要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:active { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label></p></form></body></html>

CSS 疑似クラスセレクタ(:hover)

CSS

現在、マウスオーバーされている要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:hover { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label><input id="sei" type="text">…</p></form></body></html>

CSS 疑似クラスセレクタ(:focus)

CSS

現在、入力フォーカスを持っている要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> input:focus { background: pink; } </style> </head> <body> <form id="order" action="./order.html" method="post"> <p><label for"sei">姓:</label></p></form></body></html>

CSS リンク疑似クラスセレクタ(:visited)

CSS

リンク先に既にアクセスしたアンカーに、スタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> a:visited { color: red; } </style> </head> <body> <p><a href="./first.html">まだアクセスしていないページ</a></p> <p><a href="./next.html">アクセス済みのページ</a></p> </body> </html> レンダリング(Ch…

CSS リンク疑似クラスセレクタ(:link)

CSS

リンク先にまだアクセスしていないアンカーに、スタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> a:link { color: red; } </style> </head> <body> <p><a href="./first.html">まだアクセスしていないページ</a></p> <p><a href="./next.html">アクセス済みのページ</a></p> </body> </html> レンダリング(Ch…

CSS 隣接セレクタ(その2)

CSS

隣接セレクタを他のセレクタと組み合わせることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* h1要素の直下のstrong要素の直後のstrong要素 */ h1 > strong + strong { color: red; } </style> </head> <body> <h1>大見出しの1つ目の<strong>強調語句</strong>と、2つ目の<strong>強調語句</strong>です。</h1> <p>段…</p></body></html>

CSS 隣接セレクタ

CSS

ある要素の直後の要素にスタイルを適用したい時は、隣接セレクタを使用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* h1要素の直後のp要素 */ h1 + p { color: red; } </style> </head> <body> <h1>大見出し</h1> <p>段落1です。</p> <p>段落2です。</p> </body> </html> レンダリング(Chrome) 関連エントリー CSSエントリー…

CSS 子セレクタ

CSS

子孫ではなく、ある要素の子(直下の要素)のみにスタイルを適用したい時は、子セレクタを使用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* p要素の子のstrong要素 */ p > strong { color: red; } </style> </head> <body> <p>段落1の<strong>強調語句</strong>です。</p> <p><em>段落2の<strong>強調語句</strong>です。</em></p></body></html>

CSS 子孫セレクタ(その2)

CSS

子孫セレクタを他のセレクタと組み合わせることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* notificationクラスを指定されたp要素の子孫のstrong要素 */ p.notification strong { color: red; } </style> </head> <body> <p>段落1の<strong>強調語句</strong>です。</p> <p class="notification">通知文の<…</p></body></html>

CSS 子孫セレクタ

CSS

ある要素の子孫の要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> p strong { /* p要素の子孫のstrong要素 */ color: red; } </style> </head> <body> <h1><strong>大見出し</strong>です。</h1> <p>段落の<strong>強調語句</strong>です。</p> <p>段落です。</p> </body> </html> レンダリング(…

CSS 特殊な属性セレクタ

CSS

[attribute|="value"]という構文で、attribute属性の値がvalueで始まる要素にスタイルを適用させることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class|="en"] { /* enで始まるclassが指定された要素 */ color: red; } </style> </head> <body> <p class="en">This is an English sentence.</p> …</body></html>

CSS 部分的な属性値セレクタ

CSS

部分的な属性値セレクタを使うと、スペース区切りで値を複数指定できる属性で、そのいずれかの値指定の有無に基づいて要素にスタイルを適用させることができます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class~="notification"] { /* class:notificationが指定された要素</style></meta></head></html>…

CSS 属性値セレクタの複数指定

CSS

属性値セレクタを複数指定すると、指定された属性と値の組み合わせを全てもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [id="first"][class="notification"] { /* id:first、class:notificationが指定された要素 */ color: red; } </style> </head> <body> </body></html>

CSS 属性値セレクタ

CSS

属性値セレクタを指定すると、指定された値に一致する属性をもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class="notification"] { /* クラスnotificationが指定された要素 */ color: red; } </style> </head> <body> <p class="notification">第1段落です。</p> <p class="infomation">第2…</p></body></html>

CSS 単純な属性セレクタの複数指定

CSS

単純な属性セレクタをまとめて指定すると、指定された属性を全てもつ要素にスタイルが適用されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [id][class] { /* id属性とclass属性をもつ要素 */ color: red; } </style> </head> <body> <p id="first" class="notification">第1段落です。</p> <p class="infomation">第2段落です…</p></body></html>

CSS 単純な属性セレクタ

CSS

単純な属性セレクタは、指定された属性をもつ要素にスタイルを適用します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> [class] { /* class属性をもつ要素 */ color: red; } </style> </head> <body> <p class="notification">第1段落です。</p> <p class="infomation">第2段落です。</p> <p>第3段落です。</p> </body> </html>

CSS IDセレクタ

CSS

IDセレクタは、指定されたIDの要素にスタイルを適用することを表します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> #second { color: red; } </style> </head> <body> <p id="first">第1段落です。</p> <p id="second">第2段落です。</p> <p id="third">第3段落です。</p> </body> </html> レンダリング(Chrome) 関連エン…

CSS 複数のクラスセレクタ

CSS

クラスセレクタを1つにつなぐと、class属性に全てのクラス名が指定された要素が指定されます。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> /* infomationクラスとnotificationクラスの両方が割り当てられた全ての要素 */ .infomation.notification { color: red; } </style> </head> <body> </body></html>

CSS クラスセレクタ

CSS

クラスセレクタは、class属性のクラス名で要素を指定します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> .notification { /* notificationクラスが割り当てられた全ての要素 */ color: red; } span.notification { /* notificationクラスが割り当てられたspan要素 */ font-wei</style></meta></head></html>…

CSS ユニバーサルセレクタ

CSS

ユニバーサルセレクタは、アスタリスクで表されます。ドキュメントの全ての要素にスタイルをを適用することを意味します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> * { color: red; } </style> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>子見出し</h3> </body> </html> レンダリング(Chrome) 関連エントリー CSSエントリー…

CSS セレクタのグループ化

CSS

複数の種類の要素にスタイルを適用するには、要素セレクタをカンマ区切りで指定します。 使用例 <html lang="ja"> <head> <title>Hello! CSS</title> <meta charset="UTF-8"> <style> h1, h2 { color: red; } </style> </head> <body> <h1>大見出し</h1> <h2>中見出し</h2> <h3>子見出し</h3> </body> </html> レンダリング(Chrome) 関連エントリー CSSエントリーのまとめ - プログラマーな日…