20200807のCSSに関する記事は8件です。

【初心者でもわかる】CSSでボタン風のチェックボックス作る方法

どうも7noteです。inputをボタン風にコーディングする方法を解説。

チェックボックスの☑デザインを変えるだけでなく、まるでボタンが並んでいるかのようなデザインに変更する方法を書いていきたいと思います。

見本

mihon.png
※チェックボックスです

ソース

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.css
label {
    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デザインの幅が広がります。
サンプルをそのまま持ってきてもいいですが、自分で自由に作れた方が楽しいかなと思います!
今後もそんな作るのが楽しい人向けに参考になる記事を書いていきます。

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

インライン要素を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、テキスト4

class="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の内容になります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

LP模写 - Dental Clinic (随時更新)

1. できなかったこと

1.1 nav-list

  • hover時の背景色変化 …JS/jQueryが必要?

1.2 news

  • dl/dt/ddで構成したが、positionが効かないため、floatで対応。

1.3 使い分け

  • a/p/h/span
  • posiiton/float/flexbox
  • flex/block/inline
  • margin/padding
  • article/section
  • px/em/%
  • ~start/~end

2. AI

  • ワイヤーフレーム作成時、親要素と子要素の判別
  • classつけ方
  • デベロッパーツール使い方 …答え合わせ時、HTML/CSS一括コピー

screencapture-127-0-0-1-5500-2020-08-07-13_42_11.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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が配置されます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする

SimpleBarはスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。

SimpleBar logo

デザインは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■設定されたスクロールバー

2008001_001.png

つねにスクロールバーを表示しておきたいとき、タグに加えるオプション属性は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■スライダのカラーがグラデーションになった

2008001_002.png

SimpleBarのスクロールバーのCSSは、つぎの4つのクラスをもとに組み立てられています。具体的な定めについては、ソースコードsimplebar.cssをご参照ください。

  • simplebar-content スクロールするコンテンツを包むラッパー
  • simplebar-scroll-content スクロールする要素が収められたコンテナ
  • simplebar-scrollbar ユーザーがコンテンツを操作するスクロールバーのスタイルの定め
  • simplebar-track スクロールバーが置かれた領域のスタイル
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

javascriptでアナログ時計を作成

今回はjavascriptでアナログ時計を作ってみました。


なぜ作ったか


アナログ時計なので
時間周りの処理が必要なのでそこらへんの勉強になるのと、
あまりwebサイトではアナログ時計を見ないですが、サイトにあったら意外とお洒落かもと思って
作ってみました。


作るアナログ時計の完成イメージ


スクリーンショット 2020-08-07 10.04.29.png


基本的な丸型の時計です。


コード


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

終わり

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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() がどんな動作をしているのかとか理解が少なかったのでなれないことをやると時間かかりますね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【CSS】要素のbackgroundに背景の画像を固定したい

 background-attachmentを使いましょ

特定の要素にbackground-imageを固定したい場合は、background-attachmentを使うとよき。画面のスクロールバーに追従して背景の画像をスクロールさせるかどうか

.hoge{
  background-attachment: scroll; /*要素に固定される。背景はスクロールされない*/
  background-attachment: fixed; /*ビューポートに固定される。背景はスクロールと共に追従*/
  background-attachment: local; /*コンテンツに固定される。コンテンツと共にスクロールされる*/
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む