HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】
チェックボックスのデフォルト表示を見てみよう まず、チェックボックスのデフォルト表示を見てみましょう。コードはこのようになります。 <input type="checkbox" />ここをチェックするよ これが基本的なチェックボックスのHTMLコードとなります。 HTMLとCSSでチェックボックスの色と形を変える方法 チェックボックスの色や形を変えたい場合はデフォルトのチェックボックスを非表示にし、疑似要素であるbeforeとafterを使うのが一般的ですが、inputタグには疑似要素が使えません。なので、labelタグにfor要素を使い、 <input type="checkbox" id="check1"> <label for="check1">ここをチェックするよ</label> cssは input#check1[type="checkbox"]+label{ /*ここにcssを
Lightbox のような高級感を CSS のみで実現
サンプルコード 使い方 CSS部分(スタイルシート)は流用可能． 複数の画像を置くときは HTML部分の pop1 となっている部分を pop2 など画像毎に名前を変えていく． これでより簡単に LightBox 風に画像を設定することが出来る． <style type="text/css" media="screen"> .overlay { position: fixed; /* 背景 */ background: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; top: 0; left: 0; bottom: 0; right: 0; } .pop-up { display: none; } .pop-up:checked + .overlay { visibility: visible; opacity: 1; z-index
ios上のブラウザ(safari,chrome)での表示がおかしいです
ios 14.2のchrome version87.0.4280.77とsafari(最新)で、以下のindex.htmlを表示させたところ 本来であれば、４つの正方格子が表示されるところ、高さ方向が潰れて表示されます。 なお、pcのほとんどのブラウザでは、意図した表示になっております。 サイトにもアップしておきます。 https://atxrtc.firebaseapp.com/ おわかりになる方、おしえてください。 以上、よろしくおねがいします。 ------------------- index.html ------------------- <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> <m
iPadやAndroid Tabletでheight: 100%;が効かない
PCだとheight:100%;が意図した形で効いているのに、iPadやAndroid Tabletでは効かない現象に遭遇したのでメモ。 サンプルコード display: flex;で横並びにして、その中で高さを揃えるようにしてみます。 HTML <ul class="parent"> <li class="item"> <div class="children">テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト<br>テスト<br>テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト<br>テスト</div> </li> <li class="item"> <div class="children">テスト<br>テスト</d
CSSの擬似クラス:checkedの使い方と効かない時の解決方法 | WATSUNBLOG
みなさんこんにちは！ワトスンです。 今回は、、 CSSの擬似クラス:checkedの使い方が知りたい。効かないけどどう対処したらいいの？ といった悩みに答えます。 ■読んでほしい人 CSSの基本を理解できている方 ぜひ皆さんには、擬似クラス「:checked」の使い方をマスターしてもらい、コーディングの可能性を広げてもらえたらなと思います。 CSSの擬似クラス:checkedの使い方 「:checked」を使用シチュエーションは以下のような時です。 ・「メニューボタン」を押してメニュー一覧を表示させる ・「チェックボタン」を押しボタンのデザインを変更させる なんらかの要素を押して、動きをつけたりデザインを変更させたりする際に使用します。 とても便利な擬似クラスなのでぜひ使いこなせるようにしましょう。 それでは具体的な使い方をご紹介していきます。 :checkedの使い方 擬似クラス:che
【簡単】画像の上に、文字を重ねる方法【HTMLとCSS】 - Webis Tech LABO.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <title>画像の上に文字を重ねる方法</title> </head> <body> <div class="box"> <img src="./image/bg.jpeg" alt=""> <p>文字が入ります。</p> </div> </body> </html> /* ◎リセットCSS */ /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Aut
touch-actionでスクロールやズームを止める（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 12日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ
aタグのリンクを無効にする方法【HTML/CSS/JavaScript】 | 株式会社リラクス
記事の著者牧野健人 株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。 慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。 お問い合わせはフォームよりお願いいたします。 aタグのリンクを無効にする時は、href属性を外す リンクを無効にする方法はいくつかありますが、冒頭で述べた通りhref属性を外すのが最もおすすめの方法です。 「aタグでhrefが無いなんて見慣れないけど、OKなの？」と思われる方もいらっしゃるかもしれませんが、問題ありません。 実際、WHATWG（HTMLの標準規格を策定している世界的な組織。Apple、Mozilla、Microsoftなどから成る）によるHTMLの仕様書では
サムネイルクリックでその位置で画像拡大2 | css だけで作る スライドショー・フォトギャラリー
本サンプル表示用HTML <input id="r0" type="radio" name="expnd" /> <input id="r1" type="radio" name="expnd" /> <input id="r2" type="radio" name="expnd" /> <label for="r0"><div id="back"> <article> <div id="box1" class="img_box"> <label for="r1"><img src="img2/1.jpg" alt=""/></label> <div id="cover1" class="cover"></div> </div> <div id="txt1" class="txt_box"> 朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見
【CSS】display:noneで消した画像を読み込ませない方法とは？
レスポンシブ対応ということで、PCとスマホで画像を切り替える場面は多いです。その時、デバイスによって表示しない画像をdisplay:noneして消すのが古い習わしです。 ブロックエディタやビジュアルエディタで画面サイズで表示のON・OFFを切り替えるのもdisplay:noneを使っているのが普通です。 しかし、dipslay:noneで消した画像が実は読み込まれてしまうことはご存じでしょうか？ diplsplay:noneで消した画像が実は読み込まれていたというのは、Page Speed Insightなどで警告されて気が付いている人も多いでしょう。 ではどうしたら、表示していない画像を読み込まずに済むでしょうか？というのをこの記事でまとめています。 loading=”lazy”とdisplay:noneを組み合わせるdisplay:none（imgタグの親要素でもOK）とimgタグにl
CSS | 日本語での折返しでベストな指定は？ | 1 NOTES
overflow-wrapとword-breakの全パターン比較CSSで自動折り返し処理を行うoverflow-wrapとword-breakの全パターンを日本語、英文での比較を紹介しています。 以下に比較用ページを用意しました。 可変幅なのでブラウザのウィンドウ幅などを調節して確認できます。 overflow-wrapとword-breakの全パターン比較用ページ 日本語での折返しでベストな指定は？日本語での折返しでベストな指定は「overflow-wrap: break-word;」と「word-break: keep-all;」の組み合わせで、はみ出しもせず、ある程度満足のいく結果が得られると思います。 おおよそ行ごとに<p>タグで括るの場合が多いのはずなので困ることも少ないのですけどね。 p { overflow-wrap: break-word; word-break: keep
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
「フォント」というと文字の種類を指すものというイメージがありますが文字だけでなくアイコンの形をしたフォントというのがあるのをご存知ですか？実は、みなさんも何気なく目にしているものだったりします。例えば、こういうものです。 これ全部、フォン... 「トップへ戻る」ボタンのデザイン15パターン ボタンで表示を切り替えてご覧ください。 See the Pen PAGE TOP BUTTON01 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON02 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON03 by kenichi (@ken81) on CodePen. See the Pen PAGE TOP BUTTON04 by kenichi (@ken81
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。 慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。 そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え
CSS のセレクタ/継承/詳細度
CSS の基本的な構文は以下のようなものになります。 セレクタ { プロパティ: 値; } 宣言の中にはプロパティ(property)とその値(value)をコロン（ : ）で区切って記述します。 セレクタは、そのスタイルを適用する対象（要素タイプなど）になります。 プロパティは、そのセレクタにどのようなスタイルを適用するかを指定します。 指定する値は、そのプロパティごとに指定できる値が決まっています。 セレクタを正しく指定しないと、意図しない部分にスタイルが適用されたり、その逆にスタイルを指定した部分にスタイルが反映されないというようなことになってしまいます。 以下のようなセレクタ（の種類や指定方法）があります。
[CSS] テキスト選択時の文字色・背景色を設定する
テキストを選択(反転)した時のスタイルを指定するには、::selection擬似要素を使用します。 Firefoxは、ベンダープレフィックス付きの::-moz-selectionを指定しないと適用されないので注意してください。 IE8以下は未対応のため、指定してもデフォルトのスタイルで表示されます。 ::selectionの使い方 ::selection { background: #000; color: #fff; } //Firefox ::-moz-selection { background: #000; color: #fff; } 要素を指定しなければサイト全体に適用されます。 .example::selection { background: #000; color: #fff; } 要素やクラスを指定すると、その範囲のみ適用されます。 ::selectionで使用できるプ
![[CSS] テキスト選択時の文字色・背景色を設定する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed3a09c0f1b971cd681779d3ad1daa806289f1dc/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F03%2Fselect.jpg)
.css ファイルを非同期で読み込む - JavaScript | nju33
<head>タグが存在するマークアップだとdocument.headで<head>タグを取得でき、クエリで取得する必要もない一番てっとり早い方法だと思います。なのでここに上記で作成したlinkを埋め込みます。
JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い
（2011/3/29追記：Firefox4とChrome10の実験結果を追加。） JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。 調査に使ったJavaScript（HTML5なのでtype属性は省略してある。） window.onload = function() { // divのinnerHTMLに外部CSSの読み込みを突っ込む try { var div1 = document.createElement("div"); div1.innerHTML = '<link rel="stylesheet" href="test1.css" />'; document.body.appendChild(div1); } catch(e) { } // createElementでlink要素を生成して外部
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
「nth-child」と「nth-of-type」の違いをわかりやすくまとめてみた
どちらかを使ったことがあるという人は多いでしょう、このふたつ。 「nth-child」と「nth-of-type」。 ふたつとも「n番目の要素」を指定する擬似クラスです。 たとえば↓こんなコードがあったとしたら、 ブラウザではこう表示されます。 nth-of-typeでも同様。 じゃあそのふたつの違いってなんなのか！ 今から解明します。 端的に言うと「要素の数え方」 以下のようなソースがあるとします。 oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。 これをnth-of-typeで書くと…… なんと、キャベツとトマトの代わりにピーマンが赤くなりました！ 赤ピーマンです！（よくわからない） なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない！からなんですね。 たしかに6個あるpタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
