HTML&CSSリファレンス CSS トラブルQ&A コピペで使えるHTML+CSS
CSS トラブル Q&A いくつかのトラブルについてのテクニックなどをメモしておく。 overflow:hiddenについて CSSが効かない、挙動がおかしい → overflow:clipに変更するとうまくゆくことがある。
CSS規則
HTML&CSSリファレンス HTML&CSSリファレンス @mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS
CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
HTML&CSSリファレンス @keyframes規則 アニメーション コピペで使えるHTML+CSS
@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します 使用 すべて アニメーションします <div class="animation-div">アニメーションします</div> @keyframes keyanime{ 0% { height:0p...
HTML&CSSリファレンス @import規則 外部スタイルシート読み込み コピペで使えるHTML+CSS
@import規則 外部スタイルシートの読み込み CSS @import 目的 外部スタイルシート(.css)を読み込む。先頭に記述するが@charsetの後。 @import url( 組合せ @mediaタイプと組合せ @import url(date.css) print, tv; /* 印刷、テレビ出力時につい...
HTML&CSSリファレンス @important規則 最優先適用 コピペで使えるHTML+CSS
@important規則 最優先に適用するCSS @important 目的 指定したスタイルシートについて最優先で適用する。末尾に!importantを付けて使用する。 使用 すべて body{ color:#ff0000 !important; } div{ color:#000000; } !importantが...
HTML&CSSリファレンス @page規則 印刷ページ コピペで使えるHTML+CSS
@page規則 印刷時のページ設定CSS @page 目的 印刷時に適用するスタイルです 使用 すべて @page { margin : 20px;} /* 印刷した際、20pxのmarginがつく */ @media print を推奨したい
HTML&CSSリファレンス @media規則 環境による切り替え コピペで使えるHTML+CSS
@media規則 メディアによる切り替えCSS @media 目的 ディスプレイ、印刷での切り替え、解像度での切り替えなどを実現します。 使用 すべて background-colorが切り替わります <div class="box-top">background-colorが切り替わります</div> @media ...
HTML&CSSリファレンス @charset規則 文字コードの指定 コピペで使えるHTML+CSS
@charset規則 外部スタイルシートの文字コード指定CSS @charset 目的 外部のスタイルシートを読み込む際に、文字コードを指定します。スタイルシートの先頭に記述します。 @charset "utf-8"; 指定 utf-8、utf-16、utf-32、JIS、Shift_JIS、euc-jpなどを指定でき...