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:0px; backgr...
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がなければ、divのco...
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 (min-widt...
HTML&CSS @charset規則 文字コードの指定 コピペで使えるHTML+CSS
@charset規則外部スタイルシートの文字コード指定CSS@charset目的外部のスタイルシートを読み込む際に、文字コードを指定します。スタイルシートの先頭に記述します。@charset "utf-8";指定utf-8、utf-16、utf-32、JIS、Shift_JIS、euc-jpなどを指定できる