CSS・html

CSS・html

【CSS版】フォームのラジオボタンで選んだ項目によって異なる選択肢を表示

CSSだけを使って、フォームのラジオボタンの選択によって異なる内容をアコーディオン表示する jQuery版はこちらです。↓ サンプル .sbh1,.sbh2{display:none;} input:checked#sb...
WordPress

フォームのラジオボタンで選んだ項目によって異なる選択肢をアコーディオン表示する

jQueryを使って表示、非表示の設定をします。 ラジオボタンで選択したものによって、追加で文章やフォームを表示するサンプル ラジオボタン1 ラジオボタン1を押した時に表示される内容です。 ラジオボタン2 ラジオボタン2を押し...
CSS・html

スクロールバーを表示するCSS

div.example { width: 100px; height: 100px; background-color: #ffffff; overflow-y:scroll; font-size:0.8e...
CSS・html

CSSでシンプルなチェックマークをいくつか作ってみた

飛び出るチェック、丸枠、角丸枠のシンプルなチェックマークCSS 赤字、赤枠でシンプルなチェックマークCSSを作ったのですが、枠の形やチェックの大きさを少し変えたバージョンも作りました。 今回のサンプルは、黒枠、赤字チェックです。 ...
CSS・html

HTMLのformのラジオボタン、チェックボックスで、文字をクリックした時にチェックを入れる方法

ボタンだけでなく、ラジオボタンやチェックボックスの項目をクリックした時にチェックを入れたり、外したりするには labelタグでforを使います。 概要 フォームのラジオボタンやチェックボックスでは、通常、ボタンそのものをクリックし...
WordPress

WordPressでテーマのstyle.cssを部分的に解除する方法

Wordpressで特定のページ内で、テーマのCSS(style.css)を部分的に解除する方法です ごくごくたまに、style.cssで指定されているであろうcssが邪魔になるときがあります。 そんな時は、とりあえず「!impor...
CSS・html

CSSでレスポンシブなtableのborder(枠)を角丸にする方法

border-radiusを使ってtableを角丸にできます 角丸にするCSS「border-radius」はtableタグにも適用できますが、一つだけ条件があります。 それは、 「border-collapse: separ...
CSS・html

WordPressでCSSを使って囲み枠を角丸にする方法

画像を角丸にする際に使用するCSS「border-radius」。 実は画像以外のhtmlタグにも使えます。 Wordpressでよく使う囲み枠でいろいろな角丸を作って見ました。 border-radiusを使ったいろいろ...
プラグイン

WordPressでCSSをカスタマイズする2つの方法

WordpressでCSSをカスタマイズする方法。テーマをアップデートしても影響を受けない方法です。「追加CSS」とプラグイン利用、そのメリットとデメリットの紹介。
CSS・html

画像を角丸にするCSS「border-radius」

画像を加工しなくてもCSSだけで角丸にできる「border-radius」。値の指定方法を分かりやすく色分け図解。border-radius:100px 50px 60px 30px/70px 80px 60px 40px