GoogleMapなどのiframeをレスポンシブ対応にする方法
iframeをレスポンシブにする方法。GoogleMapなどの埋込iframeをcssでレスポンシブにします。PCとスマホで縦横サイズを変える方法・サンプルコードもあります。
CSS・html
【CSS版】フォームのラジオボタンで選んだ項目によって異なる選択肢を表示
CSSだけを使って、フォームのラジオボタンの選択によって異なる内容をアコーディオン表示する jQuery版はこちらです。↓ サンプル .sbh1,.sbh2{display:none;} input:checked#sb...
フォームのラジオボタンで選んだ項目によって異なる選択肢をアコーディオン表示する
jQueryを使って表示、非表示の設定をします。 ラジオボタンで選択したものによって、追加で文章やフォームを表示するサンプル ラジオボタン１ ラジオボタン１を押した時に表示される内容です。 ラジオボタン２ ラジオボタン２を押し...
スクロールバーを表示するCSS
div.example { width: 100px; height: 100px; background-color: #ffffff; overflow-y:scroll; font-size:0.8e...
CSSでシンプルなチェックマークをいくつか作ってみた
飛び出るチェック、丸枠、角丸枠のシンプルなチェックマークCSS 赤字、赤枠でシンプルなチェックマークCSSを作ったのですが、枠の形やチェックの大きさを少し変えたバージョンも作りました。 今回のサンプルは、黒枠、赤字チェックです。 ...
HTMLのformのラジオボタン、チェックボックスで、文字をクリックした時にチェックを入れる方法
ボタンだけでなく、ラジオボタンやチェックボックスの項目をクリックした時にチェックを入れたり、外したりするには labelタグでforを使います。 概要 フォームのラジオボタンやチェックボックスでは、通常、ボタンそのものをクリックし...
WordPressでテーマのstyle.cssを部分的に解除する方法
Wordpressで特定のページ内で、テーマのCSS（style.css）を部分的に解除する方法です ごくごくたまに、style.cssで指定されているであろうcssが邪魔になるときがあります。 そんな時は、とりあえず「!impor...
CSSでレスポンシブなtableのborder（枠）を角丸にする方法
border-radiusを使ってtableを角丸にできます 角丸にするCSS「border-radius」はtableタグにも適用できますが、一つだけ条件があります。 それは、 「border-collapse: separ...
WordPressでCSSを使って囲み枠を角丸にする方法
画像を角丸にする際に使用するCSS「border-radius」。 実は画像以外のhtmlタグにも使えます。 Wordpressでよく使う囲み枠でいろいろな角丸を作って見ました。 border-radiusを使ったいろいろ...
WordPressでCSSをカスタマイズする２つの方法
WordpressでCSSをカスタマイズする方法。テーマをアップデートしても影響を受けない方法です。「追加CSS」とプラグイン利用、そのメリットとデメリットの紹介。
画像を角丸にするCSS「border-radius」
画像を加工しなくてもCSSだけで角丸にできる「border-radius」。値の指定方法を分かりやすく色分け図解。border-radius:100px 50px 60px 30px/70px 80px 60px 40px
WordPressでシンプルなチェックマークを表示するCSS
Wordpressで赤字のシンプルなチェックマークを表示する Wordpressでチェックマークを普通に記述すると、青っぽいチェックマークになります。 ☑ もっとシンプルな線だけのチェックマークのCSSです。 ...
CSSで入力フォームのinputをdisabledにする方法
厳密にいうと、フォームをクリックできなくする方法、です javascriptでdisableをtrueにしたり、falseにしたりすることはできますが、CSSでdisableをtrueにする（ような動作となる）方法です。 厳密に言う...
iframeの代わりとして使えるobjectタグ
iframeと同じようにページ内にhtmlを埋め込める iframeの代替として、インラインフレームとして外部ファイルを読み込む方法。 objectタグ 非推奨になったり、復活したりという理由で（？）避けられがちなiframeの代...
ワードプレスのページナビゲーションをCSSで消す方法
ページナビゲーション「次ページへ」「前ページへ」を消す方法 ワードプレスの記事の下にあるページナビゲーションがいらない場合に、CSSのカスタマイズを使って非表示にする方法です。 ↑この部分を消したい。 テーマファイルに含まれて...