- 投稿日:2020-08-07T22:45:05+09:00
【初心者でもわかる】CSSでボタン風のチェックボックス作る方法
どうも7noteです。inputをボタン風にコーディングする方法を解説。
チェックボックスの☑デザインを変えるだけでなく、まるでボタンが並んでいるかのようなデザインに変更する方法を書いていきたいと思います。
見本
ソース
index.html<p>どの動物をお供に連れていく?</p> <label><input type="checkbox" value="いぬ" name="animal"><span>いぬ</span></label><!-- --><label><input type="checkbox" value="さる" name="animal"><span>さる</span></label><!-- --><label><input type="checkbox" value="きじ" name="animal"><span>きじ</span></label>style.csslabel { margin-right: 5px; /* ボタン同士の間隔 */ } label input { display: none; /* デフォルトのinputは非表示にする */ } label span { color: #333; /* 文字色を黒に */ font-size: 14px; /* 文字サイズを14pxに */ border: 1px solid #333; /* 淵の線を指定 */ border-radius: 20px; /* 角丸を入れて、左右が丸いボタンにする */ padding: 5px 20px; /* 上下左右に余白をトル */ } label input:checked + span { color: #FFF; /* 文字色を白に */ background: #FBB; /* 背景色を薄い赤に */ border: 1px solid #FBB; /* 淵の線を薄い赤に */ }書き方の解説
ボタン風にする上で、デフォルトのチェックボックスについているデザインやcssは使えないので、
最初にinputをdisplay: none;
にして非表示にします。その後spanに対して、ボタン風(押されてない時)のデザインのCSSを書いていきます。
そして、
input:checked + span
と書くことによって、「チェックされたインプットの次のspan要素」に対してCSSを書くことができます。
これによりボタン風(押された時)のデザインのCSSを書き分けることができます。意外と簡単で綺麗にCSSの装飾を付けることができるので、オススメの方法です。
そしてinputとspanをlabelで囲むことによって、spanをマウスで押した時にもinputが反応してチェックがつく仕組みになるので、
labelは必ず入れましょう。「+」や「~」などの隣接セレクタや間接セレクタの書き方は過去に書いたこちらの記事で詳しく解説しています。
→【初心者でもわかる】CSSのセレクタ3種類の書き方(隣接セレクタ・間接セレクタ・直下セレクタ)まとめ
チェックボックスのデザインはデフォルトのままでもいいですが、少し味気なさがでるので、こだわったWEBサイト作りをするのであればひと手間加えてオシャレなチェックボックスやサイトの雰囲気に合わせたボタン風にするなどができるとWEBデザインの幅が広がります。
サンプルをそのまま持ってきてもいいですが、自分で自由に作れた方が楽しいかなと思います!
今後もそんな作るのが楽しい人向けに参考になる記事を書いていきます。おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
- 投稿日:2020-08-07T15:57:42+09:00
インライン要素をCSSだけで区切って表示する方法
例えば次のようなHTML要素があったとします。
<div class="contents"> <span>テキスト1</span> <span>テキスト2</span> <span>テキスト3</span> <span>テキスト4</span> </div>必ずテキストが存在する要素のみで構成されたHTMLであれば次のCSSで問題ありません。
.contents > span:not(:nth-child(1))::before { content: "、" }結果
テキスト1、テキスト2、テキスト3、テキスト4class="contents"の配下のspanタグの先頭要素を除く、全ての要素の直前に読点を表示させるというCSSになります。
しかし、次のように要素数は決まっているが、値が入っているかどうかはランダムである場合はどうでしょう?
パターン①
<div class="contents"> <span>テキスト1</span> <span></span> <span>テキスト3</span> <span></span> </div>結果
テキスト1、、テキスト3、本当はこうなってほしい
テキスト1、テキスト3パターン②
<div class="contents"> <span></span> <span>テキスト2</span> <span></span> <span>テキスト4</span> </div>結果
、テキスト2、、テキスト4本当はこうなってほしい
テキスト2、テキスト4そのような場合はこのCSSを試してください
.contents > span:not(:empty) ~ span:not(:empty)::before { content: "、" }E ~ Fは、E要素の後ろにある同じ階層のF要素にスタイルを適用する際に使用します。
http://www.htmq.com/selector/precede.shtml
テキストが存在するspanタグの後ろにある同じ階層の全てのspanタグでテキストが存在ものに対して、
その要素の直前(疑似要素:before)に読点を表示するというのがこのCSSの内容になります。
- 投稿日:2020-08-07T15:18:59+09:00
LP模写 - Dental Clinic (随時更新)
- 投稿日:2020-08-07T15:05:49+09:00
absolute × transform で上下中央寄せ(コピペ用)
absolute × transform
コピペして使う用の記事です。
flexやmargin:auto;などで中央寄せも出来ますが、この手法は擬似要素などを中央寄せする際にとても便利です。.wrapper { width: 100%; position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); /* transformがセンタリングしたい要素の縦、横幅分を引いてくれるので中央になる */ }wrapperの上下中央にinnerが配置されます。
- 投稿日:2020-08-07T11:11:41+09:00
JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする
SimpleBarはスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。
デザインはCSSで定める
SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるのです。
軽量なライブラリ
6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。
モダンブラウザをサポート
ChromeとFirefox、Safariなどのモダンブラウザに加え、Internet Explorer 11をサポートします。
ライブラリの概要はドキュメントとデモページでお確かめください。本稿でつくるのは、つぎのサンプルです。「JavaScript + CSS: ヘッダを上部に固定してカラムの中身はスクロールさせる」のコードにSimpleBarのスタイルを割り当てました。
See the Pen JavaScript + SimpleBar: Customizing scrollbar style by Fumio Nonaka (@FumioNonaka) on CodePen.
インストール
インストールには、npmやyarnが使えます。
npm install simplebar --save
yarn add simplebar
また、unpkgとjsDeliverからCDNで読み込むこともできます。JavaScriptとCSSのライブラリがそれぞれ必要です。
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script> <!-- または --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" /> <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>バージョンを固定したいときは、
@latest
をバージョン番号に置き替えてください。たとえば、本稿執筆時の最新リリース版であれば、@5.2.1
です。unpkgでバージョンのリストが確かめられます。なお、Webpackなどのモジュールローダーを使う場合には、JavaScriptとCSSのライブラリを
import
してください。import SimpleBar from 'simplebar'; import 'simplebar/dist/simplebar.css';data-*グローバル属性で設定する
SimpleBarのもっとも簡単な使い方は、スクロールバーを加えたい要素に
data-*
グローバル属性としてdata-simplebar
を与えることです。なお、スクロールさせる要素には、CSSでoverflow: auto
を定めてください。<div data-simplebar> <!-- コンテンツ --> </div>これだけで、要素にはSimpleBarのスタイルでスクロールバーが表示されます(図001)。デフォルトでは、要素にマウスポインタを重ねたときバーが表れる自動表示の設定です。
図001■設定されたスクロールバー
つねにスクロールバーを表示しておきたいとき、タグに加えるオプション属性は
data-simplebar-auto-hide
です。JavaScriptコードの場合には、autoHide
オプションを用います。<div data-simplebar data-simplebar-auto-hide="false"></div>JavaScriptコードでSimpleBarを要素に設定する
JavaScriptコードで要素にSimpleBarを設定する場合は、
SimpleBar()
コンストラクタに要素の参照を渡すだけです。new SimpleBar(document.getElementById('myElement'));オプションは、コンストラクタの第2引数のオブジェクトにプロパティとして渡します。たとえばつぎのコードはスクロールバーの自動表示(
autoHide
)をオフにする場合です(デフォルト値はtrue
)。new SimpleBar(document.getElementById('myElement'), { autoHide: false });CSSでスクロールバーのスタイルを変える
SimpleBarのスクロールバーのスタイルは、CSSにより定められています。つまり、見栄えがCSSで変えられるということです。ここでは、スクロールさせるスライダのカラーをグラデーションにしてみましょう(図002)。こうしてでき上がったのが、冒頭のCodePenのサンプルです。
.simplebar-scrollbar::before { background: linear-gradient(darkblue, skyblue); }図002■スライダのカラーがグラデーションになった
SimpleBarのスクロールバーのCSSは、つぎの4つのクラスをもとに組み立てられています。具体的な定めについては、ソースコード
simplebar.css
をご参照ください。
simplebar-content
スクロールするコンテンツを包むラッパーsimplebar-scroll-content
スクロールする要素が収められたコンテナsimplebar-scrollbar
ユーザーがコンテンツを操作するスクロールバーのスタイルの定めsimplebar-track
スクロールバーが置かれた領域のスタイル
- 投稿日:2020-08-07T10:57:34+09:00
javascriptでアナログ時計を作成
今回はjavascriptでアナログ時計を作ってみました。
なぜ作ったか
アナログ時計なので
時間周りの処理が必要なのでそこらへんの勉強になるのと、
あまりwebサイトではアナログ時計を見ないですが、サイトにあったら意外とお洒落かもと思って
作ってみました。
作るアナログ時計の完成イメージ
基本的な丸型の時計です。
コード
html
まずはアナログ時計の元になるhtmlを書いていきます。
必要なhtmlはごく少量です。
大きく分けて、必要なのは
- 外枠
- 時針
- 分針
- 秒針
- 時間の文字
これだけです。
<div class="c-clock"> // 外枠 <span class="c-clock__hour"></span> <!-- 時計 --> <span class="c-clock__min"></span> <!-- 分針 --> <span class="c-clock__sec"></span> <!-- 秒針 --> <span class="c-clock__12">12</span> <!-- 時計文字 --> <span class="c-clock__3">3</span> <!-- 時計文字 --> <span class="c-clock__6">6</span> <!-- 時計文字 --> <span class="c-clock__9">9</span> <!-- 時計文字 --> </div>
ちなみにbem記法で書いてるので気になる方はこちらも
https://qiita.com/w-tdon/items/2ede0122286f88db472f
css
.c-clock { position: relative; width: 400px; height: 400px; border: 1px solid #333; border-radius: 50%; } .c-clock__hour { position: absolute; top: calc(50% - 150px); left: calc(50% - 5px); width: 10px; height: 150px; background: #333; transform-origin: bottom; } .c-clock__min { position: absolute; top: calc(50% - 180px); left: calc(50% - 2px); width: 4px; height: 180px; background: #333; transform-origin: bottom; } .c-clock__sec { position: absolute; top: calc(50% - 200px); left: calc(50% - 1px); width: 2px; height: 200px; background: #ff0000; transform-origin: bottom; } .c-clock__12 { position: absolute; top: 10px; left: calc(50%); transform: translateX(-50%); font-size: 18px; } .c-clock__3 { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 18px; } .c-clock__6 { position: absolute; bottom: 10px; left: calc(50%); transform: translateX(-50%); font-size: 18px; } .c-clock__9 { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); font-size: 18px; }
- 外枠
- width,height値を決め、border-radius: 50%で丸枠を作っています。
- 時針
- 外枠にposition: relativeを仕込んでいるのでabsoluteを使い上下左右中央に配置しています。
- top: 50%だと時針の高さ分ずれてしまうのでcalcを使い時針の高さ分引いてます。
- 分針
- 分針も時針と同じです。
- 時間文字 ここはwidth、heightを使ってないのでcalc(50% - ○px)とかして上下左右中央に配置できません。 なのでtop: 50%;を設定し、transform: translateY(-50%)で要素の表示位置を要素の半分の大きさ分、上にずらします。
js
setInterval(() => { // 現在時間の取得 const now = new Date(); const h = now.getHours(); const m = now.getMinutes(); const s = now.getSeconds(); // 時、分、秒を元に角度を計算 const degH = h * (360 / 12) + m * (360 / 12 / 60); const degM = m * (360 / 60); const degS = s * (360 / 60); // 各要素を取得 const elementH = document.querySelector(".c-clock__hour"); const elementM = document.querySelector(".c-clock__min"); const elementS = document.querySelector(".c-clock__sec"); // styleを追加 elementH.style.transform = `rotate(${degH}deg)`; elementM.style.transform = `rotate(${degM}deg)`; elementS.style.transform = `rotate(${degS}deg)`; }, 10);
まず、タイマー処理でよく使われるsetIntervalを使用します。
setInterval関数は一定時間ごとに繰り返し処理を行う関数です。
似たものでsetTimeoutがありますが、こちらは一定時間後に処理を行うだけで繰り返しはしません。
setInterval(関数,時間の指定)という感じで使用します。
上のコードでは10ミリ秒(0.01秒)ごとに処理を繰り返していることになります。
次は中の処理ですが、
現在時間の取得
ここでは現在時間をnew Date();で取得しています。
console.log(new Date())などとすると現在の日付、時刻などが取得できているのがわかると思います。
それぞれ現在の時間、分、秒をget◯◯で取得しています。
時、分、秒を元に角度を計算
上で取得した現在の時間、分、秒を元に針の角度を割り出しています。
- 時間: 一周は360度なので現在の時間(360/時間)としています。ですがそれだけだとダメなので現在の分(360/時間(12)/分(60))を足しています。
- 分、秒数: ここそれぞれの現在の分数、秒数*(360 / 60)としています。
要素の取得
document.querySelectorで各クラスを指定し要素を取得しています。
style追加
最後に取得した要素にstyleを追加し、現在時間を元に出した角度を設定します。
transform: rotate${}deg;
これを実行してみるとしっかり時計が動いていると思います。
こんな感じでcssとかjsを使えば割となんでも作れるなと思いました。
↓
ふざけた内容ですがこんな記事も書きました。https://qiita.com/w-tdon/items/1023e159dafbc0fd960d
終わり
- 投稿日:2020-08-07T10:23:09+09:00
Vue.jsでcssのカスタムプロパティーを使って背景画像を動的に変更する
概要
vue.jsでコンポーネントを作成した際に、cssで指定する背景画像を指定したいことってあると思うんですが、その方法についてハマったので共有します。
作ったもの
※ compostionAPIを使っていますが、必要に合わせてお使いのものにしてください。
<template> <section :style="styles"> <h2>タイトル的な何か</h2> // ここで使う背景画像を動的に変更したいとする </section> </template> <script lang="ts"> import { defineComponent, PropType, computed } from '@vue/composition-api' type ContentType = 'hoge' | 'fuga' const iconUrl: { [key in ContentType]: NodeRequire } = { hoge: require('@/assets/images/hoge.png'), fuga: require('@/assets/images/fuga.png') } type Props = { contentType: ContentType } export default defineComponent({ name: 'custom-component', props: { contentType: { type: String as PropType<ContentType>, required: true } }, setup(props: Props) { const styles = computed(() => { return { '--url': `url(${iconUrl[props.contentType]})` } }) return { styles } } }) </script> <style lang="scss" scoped> section { h2 { background: var(--url) } } </style>説明
- Vue.jsでCSSのカスタムプロパティを動的に追加するにはコンポーネントに
<:style="style">
でデータを渡して上げることで使えます。
- こうすることで
root.element
の中にカスタムプロパティが登録されます。- 画像データのパスはそのまま渡しても、assetsのデータはバイナリで展開されるので、
require('画像パス')
で読み込んだ状態のものをurl()
に貼り付けた状態のものを渡して上げることでCSS内で動的に画像が変更されます。
- ここが結構トラップなので注意
使う時
<custom-component contentType="hoge"/> or <custom-component contentType="fuga"/>使うときは、
contentType
に指定したtypeを指定してあげるだけです。
※ ここのtypeはunionで指定していますが、コンパイルエラーにはならないけど...さいごに
画像が展開されたものになっていることを忘れていて、結構時間がかかってしまいました。
普段CSSをメインに触っていないので、url()
がどんな動作をしているのかとか理解が少なかったのでなれないことをやると時間かかりますね。
- 投稿日:2020-08-07T09:08:55+09:00
【CSS】要素のbackgroundに背景の画像を固定したい
background-attachmentを使いましょ
特定の要素にbackground-imageを固定したい場合は、
background-attachment
を使うとよき。画面のスクロールバーに追従して背景の画像をスクロールさせるかどうか.hoge{ background-attachment: scroll; /*要素に固定される。背景はスクロールされない*/ background-attachment: fixed; /*ビューポートに固定される。背景はスクロールと共に追従*/ background-attachment: local; /*コンテンツに固定される。コンテンツと共にスクロールされる*/ }