HTML&CSS 続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応
[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
プログラミング
HTML&CSS HTML&CSS 徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS AMP対応
新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
HTML&CSS 切り替えタブdivボックスをCSSのみで実現！ コピペで使えるHTML+CSS
divボックスの上部に複数のタブをつけ、タブをクリックすることで、直下のボックスが切り替わります。いわゆる、タブボックスをJavascriptを用いずに実装します。HTMLとCSSのみを調整することでタブの数を簡単に増減させることができます。
HTML&CSS @mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS
CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
HTML&CSS プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS
CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
HTML&CSS CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
HTML&CSS text-shadow 文字に影をつける コピペで使えるHTML+CSS
テキスト、文字について影をつけるtext-shadowプロパティの使い方。各パラメーターの設定とその効果を具体的に例示しながら解説します。span要素とセットで使いましょう。
HTML&CSS リアルな蛍光マーカーを引く コピペで使えるHTML+CSS
文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現！
HTML&CSS divを水平方向に均等配置する コピペで使えるHTML+CSS
ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。水平方向に均等配置justify-contentを用いるdiv-box-1div-box-2div-box-3div-box-4スタイルシートで記述<div class="div-equal-box"> <div>div-box-1</div...
HTML&CSS 文字を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS
文字を徐々に表示するアニメーション。トップページなどで大きな文字とともに用いると効果的です。文字を徐々に表示 (透明度の操作)これからの未来へ向けて新しいご提案スタイルシートで記述<span class="animation1" style="font-size: 36px;">これからの未来へ向けて新しいご提案</s...
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 csrc...
HTML&CSS 画像にカーソルを合わせると少し拡大する方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用するため、高さについて注意を要します。画像imgを少し拡大スタイルシートで記述<div class="over-animation"><img csrc="sak...
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ボックスなどからはみ出す文字を処理します。どのようにしてスクロールバー表示とするか、はみ出し分を非表示にするかを具体例を挙げて解説します。