CSS・html

CSS・html

GoogleMapなどのiframeをレスポンシブ対応にする方法

iframeをレスポンシブにする方法。GoogleMapなどの埋込iframeをcssでレスポンシブにします。PCとスマホで縦横サイズを変える方法・サンプルコードもあります。
CSS・html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressでシンプルなチェックマークを表示するCSS

Wordpressで赤字のシンプルなチェックマークを表示する Wordpressでチェックマークを普通に記述すると、青っぽいチェックマークになります。 ☑ もっとシンプルな線だけのチェックマークのCSSです。 ...
2018.10.12
CSS・html

CSSで入力フォームのinputをdisabledにする方法

厳密にいうと、フォームをクリックできなくする方法、です javascriptでdisableをtrueにしたり、falseにしたりすることはできますが、CSSでdisableをtrueにする(ような動作となる)方法です。 厳密に言う...
2019.09.25
CSS・html

iframeの代わりとして使えるobjectタグ

iframeと同じようにページ内にhtmlを埋め込める iframeの代替として、インラインフレームとして外部ファイルを読み込む方法。 objectタグ 非推奨になったり、復活したりという理由で(?)避けられがちなiframeの代...
2018.08.20
WordPress

ワードプレスのページナビゲーションをCSSで消す方法

ページナビゲーション「次ページへ」「前ページへ」を消す方法 ワードプレスの記事の下にあるページナビゲーションがいらない場合に、CSSのカスタマイズを使って非表示にする方法です。 ↑この部分を消したい。 テーマファイルに含まれて...
タイトルとURLをコピーしました