CSS [CSS]文字サイズに合わせた三角形を擬似要素でサクッと作る
文字サイズに合わせた三角形を擬似要素でサクッと簡単に作る方法です。
CSS &HTML
.arrow::after {
content: "";
margin-left: 0.5em;
display: ...
CSS 
HTML GoogleFontsを使うならWeb Font Loaderで読み込もう
Web Font Loaderを使うと以下の様な利点があります。
非同期での読み込みによるサイト速度の向上。
読み込み完了時に付与されるクラスによって、フォントのチラつき防止や読み込んでからJSで操作などが可能。
...
WordPress [WordPress]プラグインを自作する時のヘッダーコメント
Wordpressプラグインを作成するファイルヘッダーの書き方です。「Plugin Name」さえ記載すればプラグインとして認識されます。
<?php
/**
* Plugin Name: プラグインの名前【必須】
* P...
WordPress [WordPress]CSSとJSをfunctions.phpで管理する
WordPressでCSSとJavaScriptをfunctions.php内で一元管理する方法です。最初に2つの関数を説明し、実際に記載する方法を紹介します。
CSSを読み込む
関数「wp_enqueue_style...
WordPress [Contact Form 7]未入力の必須項目がある場合、送信ボタンを押せない様にする
フォーム内の必須項目に未入力があった場合、そもそも送信ボタンを押せなくしてしまおうというアイデア。
サンプル
.wpcf7-submit:disabled {
opacity: .5;
}
const ...
JavaScript [JavaScript]setTimeout待機中に同じ処理が行われた場合、前の処理を中断する
例えば「押されたら1秒後にアラートを表示するボタン」をアラートが表示される前に3回押すと、全ての処理が継続されアラートが3回表示されます。これを待機中に押された場合はそれまでの処理を中断し、最後に押されてから1秒後にアラートを表示する方法...
CSS [CSS]サイズが違う画像を並べ、縦横比を変えずに高さを合わせる[レスポンシブ]
サイズが違う画像を並べた時に、レスポンシブ対応で縦横比をそのままに、高さを合わせる方法に地味に躓いてしまった。いろいろ試してみた結果、不完全ながらシンプルにできる方法がありました。
サンプル
.flex {
widt...
CSS [コピペでOK!]CSSのみで作るアコーディオンメニュー[サンプル3種]
CSSのみで作るアコーディオンメニューの様々なサンプル集です。気が向いた時に追加していきます。
コード自体の詳細や解説は以下の元記事をご覧ください。
シンプル
...
CSS [CSSのみ]簡単に作れるアコーディオンメニュー
CSSのみでアコーディオンメニューを作成します。要素の高さを固定せず、レスポンシブ対応です。
サンプル集も作りました。
サンプル
この...
CSS [雑記]CSS:borderの太さをhoverで変更する時のアレコレ
borderの太さをhoverでアニメーションさせる場合に癖が強かったので、色々と試した雑記。
border要素のみ
まずはシンプルにborder要素のみ。
シンプル
...