id="sample14">子要素以外の部分は、影響を受けず、<span>子要素のみ適用されます。</span>こちらは子要素以外。<span>こちらも子要素</span>。>タグは引用文であることを表し、長めの文章を引用する場合に使います。一般的なブラウザでは左右がインデントされます。インデントすることを目的にこのタグを使うことは推奨されません。"(イタリック・斜体)が自動でかかります。"を指定しておきます。最近、ブログなどでよく使われるスタイルを再現してみました。blockquoteタグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、<q>タグを使用します。引用元のurlなどを入れておくと、引用文であることがさらに分かりやすくなります。class="quote"><p>blockquoteタグは引用文であることを表し、長めの文章を引用する場合に使います。一行以内の短めの文章の引用には、&lt;q&gt;タグを使用します。href="#">引用元のurlなどを入れておくとさらに引用文であることが分かりやすくなります。>タグを利用すると、"href"属性が必須で、"title"属性も使えます。これらの属性の内容に応じてif文的な振り分けが可能になります。>タグの"href"属性に「test」を含んでいる場合、cssを適用します。>タグの"title"属性が「css」である場合、cssを適用します。★test★」をカラー「#29a61c」、ボールドで追加します。」をカラー「blue」、ボールドで追加します。tableで横並びナビゲーションもどき横並びナビゲーションを実装する場合、floatさせたリスト要素の<li>を使うのが、一般的ですが、その周りのレイアウトにもfloatを使用して、floatを解除するための「clearfix」の使い方によっては、IEでレイアウトが崩れて、収拾がつかなくなる場合があります。簡単な横並びナビゲーションなら、floatを使わずに実装することで、トラブルを回避できるケースが多々あります。table-cell」を使って横並びさせています。}画面のテキストを選択したときの背景色を「::selection疑似要素」を使って変更webページ上で、ユーザーがテキストを選択してコピーする場合などに、選択ハイライトとして、背景色が強調されます。この背景色をCSSの「::selection疑似要素」を使うことで変更することができます。この部分と選択ハイライトのCSSを設定した下のサンプルとで、テキストを選択すると違いが分かります。#cccccc;」位に指定。#cccccc;は分かりやすくするためつけています。三角形を表示したいボーダー部分(top、bottom、left、right)の色を#333333に指定(例1)。表示したい三角形以外のボーダー部分をbackgroundと同じ色にすることで三角形のみを表示します(例2)。使用例は、サイズ、マージンを調整しています。}この内容は、「webページ制作担当者用CSS、jQuery等のテストページ」にも収録しています。【CSS3】foo属性を使って、タグの内容を判別して振り分け【CSS3】のセレクターのfoo属性を利用することで、タグの内容を判別して、別のスタイルを適用させることができます。サンプルは、リンクのaタグの"href"の値が「http」で始まっている絶対パスであるかどうかを識別し、after疑似要素を使って「相対パス」または「絶対パス」を付加しています。この内容についての詳細は、「webページ制作担当者用CSS、jQuery等のテストページ」に載せています。Explorerは、バージョン10(標準モード)から、input欄などに自動でクリアーボタンが表示されるようになっています。これ自体は便利なものですが、IE9、IE8をはじめ他のブラウザでは表示されません。scriptなどでクリアーボタンを表示させるようにした場合(→「jQueryプラグインで、検索窓にクリアーボタン追加」)、IE10では表示が重複してしまいます(下画像)。10に用意された「::-ms-clear疑似要素」を使って、自動で表示されるクリアーボタンを消します。スタイルで、次のように記述します。IE10でこのページを表示し、このインプット欄になにか入力しても、クリアーボタンは表示されません。」にしているとき、省略符号「...」をつけることができます。hidden;」で、オーバーフローした部分は非表示。(2)は、(1)と同じですが、オーバーフローして非表示にしている部分があることを示す、省略符号の「...」が付きます。clip;幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。ellipsis;幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。詳しい解説ページへCSS「display:table」と「display:table-cell;」を使って、上下方向の中央揃えボックス内のp要素などを縦方向の中央に配置する場合、table要素のセル用の「vertical-align:middle」を指定しても、効果ありません。そこで、親要素に「display:table」、子要素に「display:table-cell;」を指定して、「vertical-align:middle」を有効にします。サンプルでは、子要素のp要素が親要素全体に広がって図解しにくいため、p要素の中にspan要素を入れてborder表示しています。ピンク色のborder部分が親要素のdiv、黄色の部分が子要素のp要素、ブルーのborder部分がspan要素です。blue;}関連ページ→CSSで縦方向の中央揃え・各種テスト【CSS】文字はそのままで、背景のみを半透明にしたいときは、rgbaを使う「opacity」を使った半透明では、文字や背景、ボーダーまでも半透明になります。上側サンプルは、背景の背景に画像を使い、文字色を黒、ボーダー色を黒、背景を白に指定し、opacityで50%の半透明にしています。文字やボーダーも半透明になっているのが分かります。rgbaにしています。透明度はa(アルファチャンネル)で上側と同じ50%に指定しています。文字色、ボーダー色は指定どおりの色になっています。rgba(255,255,255,0.5);【CSS】img要素の左右中央揃えインライン要素扱いのimgの左右中央揃えをするときは、中央揃えのCSS指定をした親要素(divタグなど)で包むことが多いですが、img単体でも中央揃えが可能です。次のように、「display:block」でブロック要素扱いにすることで、marginのautoが有効になります。その他、「display:table」や「display:list-item」などでも同様になります。width="70">listのmarkerを丸括弧付きの数字にするもっとも簡単な方法は、「list-style-type:none」で定義済みスタイルのmarkerを消し、li要素の内容に「(1)」などの丸括弧付きの数字のテキストを先頭に付けるものです。これは後で修正が面倒ですし、数値の記述間違いも起こりやすくなります。そこで、定義済みスタイルのmarkerを消した後、:before疑似要素を使って丸括弧とその中に入る数値を先頭に付けます。数値は、counter-incrementで自動連番にします。サンプル「autofocus属性」。ページを表示したときにフォーカスされます。「placeholder属性」。placeholder属性で指定した値が入力欄に初期表示されます。「required属性」。入力必須のフィールドになり、ここを記載せず「送信」ボタンを押しても、アラートが出て、送信できません。「pattern属性」。正規表現による入力制限により、このケース(pattern="^[0-9A-Za-z]+$")では半角英数のみの入力になります。)";}EdgeやiOSのSafariで、数字のテキストが自動で電話番号リンクになってしまうのを防ぐWindows10のブラウザEdgeやiOSのSafariなどで、数字のテキストが自動で電話番号リンクになってしまうのを確認しました。次のリンクをEdgeやiOSのSafariで開いてみて下さい。38.14393.0.0で開いたキャプチャEdgeでは、携帯やスマホの番号っぽいものが、電話番号リンクになってしまいます。iOSのSafariでは、すべてが電話番号リンクになってしまいます。自動で電話番号リンクになってしまうのを防ぐ方法ページのheadに次のmetaタグを追加します。content="telephone=no">次のリンクは、上のサンプルにmetaタグを追加したものです。今度は自動リンクになりません。