スポンサーリンク
配送日数

AliExpress Standard Shippingは届かないか?到着日数と追跡記録

Aliexpressにおける配送手段の1つであるAliExpress Standard Shippingについて。平均の到着日数を実際の配送記録から算出します。直近2年以内の配送・配達記録も日本語翻訳付きで公開します。
配送日数

Chunghwa Postは届かないか?到着日数と追跡記録 AmazonやAliexpress輸入

Aliexpressにおける配送手段の1つである台湾郵政(Chunghwa Post)について。到着日数の平均を実際の配送記録から算出します。直近2年以内の配送・配達記録も日本語翻訳付きで公開します。
HTML&CSSリファレンス

続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応

[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
スポンサーリンク
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ボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの2つをフラグとして利用します。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-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="...