Bootstrapの代わりを探してました。 便利だけど大きすぎるし機能過剰だからです。 もっと軽量なものが欲しい 機能的にもシンプルな方がいい そう思ってた時に良さげな奴を発見 その名も Beauter というフレームワ...

CSSだけでツールチップ表示してみたい JavaScriptコードの追加が不要 jQuery/Bootstrapもいらない 少しHTML構成に手を加えるだけ ツールチップ表示のために色々したくないし、 jQuery/Bo...

CSSだけで次のことを実現したい 特定要素の選択を禁止にしたい 全テキスト要素を選択禁止にしたい そういった選択禁止は簡単にできます。 僕自身も使う場面が多いと思うので、 CSSだけでテキスト選択禁止にする方法を紹介！ ...

数値入力の input[type="number"] を作ったとします。 ▼ 例えばこんな感じで定義できる [crayon-651ccdac2a73b983689298/] ▼ デフォルト状態のスピンボタン このスピンボ...

ここで実現したいのは次のこと 画像を正方形でトリミング表示したい 横長／縦長の画像でも正方形にしたい ただしJSとかコードは使いたくない 画像サイズに関係なく正方形で表示したいです。 それには少しCSS的なトリックが必要...

こういうトグルボタンを作ってみました ▼ 作成に当たって重要な点 電気のスイッチボタンみたいな形 ONの状態のときに点灯するイメージ チェックボックスを改造して作りたい CSSだけで余計なライブラリも不要 ▼ 仕上がりは...

「幅いっぱい」は普通は親要素に対してです。 でも画面幅いっぱいに表示させたい場面が... その方法がようやく分かったので、 CSSで要素幅を画面幅いっぱいにする方法を紹介! まずは画面幅いっぱいに表示させる要素の例から ...

ランキング番号とか振りたい場合などです。 ▼ 次画像みたいに 1、2、3 といった感じで 手書きでカウントを振ることができるものの・・・ なんか非効率だし、面倒ですよね。 もっといい方法は CSSの counter を使...

改行にbrタグを使うのは周知 でもこういう感じで制御をしたかったです。 PCの場合 : 普通に改行表示する スマホの場合 : 改行を非表示に もちろんこの逆もそうです。 この切り替え、意外と簡単にできます。 ということで...

市松模様　＝　チェック柄 それを背景に配置したい場面がありました。 別に画像を用意してもできるんですが、 なるべくならCSSだけで表現したかったです。 そのやり方がようやく分かったので、 CSSのみで 背景に市松模様を設...