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