HTML&CSSリファレンス text-shadow 文字に影をつける コピペで使えるHTML+CSS
テキスト、文字について影をつけるtext-shadowプロパティの使い方。各パラメーターの設定とその効果を具体的に例示しながら解説します。span要素とセットで使いましょう。
HTML&CSSリファレンス HTML&CSSリファレンス リアルな蛍光マーカーを引く コピペで使えるHTML+CSS
文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現！
HTML&CSSリファレンス divを水平方向に均等配置する コピペで使えるHTML+CSS
ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。 水平方向に均等配置 justify-contentを用いる div-box-1 div-box-2 div-box-3 div-box-4 スタイルシートで記述 <div class="div-equal-box"> <div>div-bo...
HTML&CSSリファレンス 文字を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS
文字を徐々に表示するアニメーション。トップページなどで大きな文字とともに用いると効果的です。 文字を徐々に表示 (透明度の操作) これからの未来へ向けて新しいご提案 スタイルシートで記述 <span class="animation1" style="font-size: 36px;">これからの未来へ向けて新しいご提...
HTML&CSSリファレンス 画像を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS
画像、img要素を徐々に表示するアニメーション。opacityを使って透明度を操作します。 画像imgを徐々に表示 (透明度の操作) スタイルシート属性で記述 <img class=""animation1" src="sakura.jpg" /> @keyframes open-keyanime1{ /* アニメーシ...
HTML&CSSリファレンス 画像にカーソルを合わせると徐々に白いぼやをかける方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。 画像imgを徐々に白いぼやをかけ、徐々に元に戻す(透明度の操作) スタイルシート属性で記述 <span class="over-animation"><img c...
文学 国語の中間、期末テストの得点を確実に上昇させる方法
国語、、誰も勉強方法は教えてません。そこで、学校の国語の定期テストで確実に点を取る方法をお教えします。 国語 国語の点を上昇させることは、全教科の中で実は最も簡単です。 ずばり、、問題集の丸暗記です。 教科書、出題範囲に対応する問題と答えを本屋に置いてある全ての問題集に目を通し丸暗記してしまいます。 するとどうでしょう...
HTML&CSSリファレンス 画像にカーソルを合わせると少し拡大する方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用するため、高さについて注意を要します。 画像imgを少し拡大 スタイルシートで記述 <div class="over-animation"><img csrc="...
HTML&CSSリファレンス 縦と横に中央寄せ(中央配置)する方法 コピペで使えるHTML+CSS
インライン要素、ブロックレベル要素それぞれについての横方向と縦方向の中央配置の実装方法。margin:auto;やtransform、translateを利用した汎用性の高い実装方法を解説します。vertical-alignやcenter要素は使用しません。
HTML&CSSリファレンス transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
HTML&CSSリファレンス overflow ボックスのはみだし文字 コピペで使えるHTML+CSS
overflowを使ってdivボックスなどからはみ出す文字を処理します。どのようにしてスクロールバー表示とするか、はみ出し分を非表示にするかを具体例を挙げて解説します。
HTML&CSSリファレンス @keyframes規則 アニメーション コピペで使えるHTML+CSS
@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します 使用 すべて アニメーションします <div class="animation-div">アニメーションします</div> @keyframes keyanime{ 0% { height:0p...
HTML&CSSリファレンス picture source レスポンシブイメージ コピペで使えるHTML+CSS
画面解像度に応じて画像を切り替えるレスポンシブイメージをHTML5.1から実装されたpicture要素とsource要素によって実現します。その使い方と実際の挙動を、JAVAのif文に例えながら解説します。便利な新しい機能をマスターしてください。
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 を推奨したい