-
CSSだけでテキスト選択禁止にする方法とコード例+注意点CSSだけで次のことを実現したい 特定要素の選択を禁止にしたい 全テキスト要素を選択禁止にしたい そういった選択禁止は簡単にできます。 僕自身も使う場面が多いと思うので、 CSSだけでテキスト選択禁止にする方法を紹介! ...
-
CSSで input type=”number” のスピンボタンをカスタマイズ!コード例数値入力の input[type="number"] を作ったとします。 ▼ 例えばこんな感じで定義できる [crayon-6421937351001503745503/] ▼ デフォルト状態のスピンボタン このスピンボ...
-
CSSでどんな画像でも正方形にトリミングして表示するにはここで実現したいのは次のこと 画像を正方形でトリミング表示したい 横長/縦長の画像でも正方形にしたい ただしJSとかコードは使いたくない 画像サイズに関係なく正方形で表示したいです。 それには少しCSS的なトリックが必要...
-
CSSだけでチェックボックスをトグルボタン化。作り方とコード例こういうトグルボタンを作ってみました ▼ 作成に当たって重要な点 電気のスイッチボタンみたいな形 ONの状態のときに点灯するイメージ チェックボックスを改造して作りたい CSSだけで余計なライブラリも不要 ▼ 仕上がりは...
-
CSSで要素幅を画面いっぱいに はみ出させて表示させる「幅いっぱい」は普通は親要素に対してです。 でも画面幅いっぱいに表示させたい場面が... その方法がようやく分かったので、 CSSで要素幅を画面幅いっぱいにする方法を紹介! まずは画面幅いっぱいに表示させる要素の例から ...
-
CSSだけで要素に番号(カウント)を振る方法【counter】ランキング番号とか振りたい場合などです。 ▼ 次画像みたいに 1、2、3 といった感じで 手書きでカウントを振ることができるものの・・・ なんか非効率だし、面倒ですよね。 もっといい方法は CSSの counter を使...
-
CSSで改行をスマホのみ表示あるいは消すには改行にbrタグを使うのは周知 でもこういう感じで制御をしたかったです。 PCの場合 : 普通に改行表示する スマホの場合 : 改行を非表示に もちろんこの逆もそうです。 この切り替え、意外と簡単にできます。 ということで...
-
CSSだけで背景に市松模様(チェック柄)を配置したい市松模様 = チェック柄 それを背景に配置したい場面がありました。 別に画像を用意してもできるんですが、 なるべくならCSSだけで表現したかったです。 そのやり方がようやく分かったので、 CSSのみで 背景に市松模様を設...
-
CSSで小さい画像・ドット絵をボケずに拡大させる例えばこういう場合・・・ ドット絵をきれいに表示できない 小さい画像を拡大表示するとぼける これはCSSから簡単に解決できます。 自分自身もその方法を知らなかったので、 CSSにて小さい画像をぼかさず拡大表示する方法を紹...
-
Bootstrapで *-primary の色を一括変更するにはタイトルの通り。 Bootstrapでの *-primary 色の変え方について。 自力で書き変えする方法もありますが、 一括でprimary色を変更するツールもあります。 超便利だったので、その方法をまとめました。 デ...