125naroom
© 2026 125naroom
記事：48件
2ページ目
1
/
8
2020
【CSS】Flexboxの使い方と実装サンプル集
ふれっくすぼっくすってなんですかー 楽しく言うとちょっとしたコーディングダンスですー Flexboxの基本 親要素（コンテナ）があって子要素（アイテム）がある。入れ子とも呼ばれてたりします。親要素（コンテナ）がないとフレ
CSSflexbox
デザインのメモ
【CSS】スマホでリンクをタップした時に色を変える方法
スマホでタップ！ 色変わる！ 実装サンプル a要素に『ontouchstart』を追記して『a:active』に色を指定します。 See the Pen 【CSS】スマホでリンクをタップした時に色を変える方法 by 12
CSS
12
19
2019
【CSS】背景画像を固定したおしゃれなLP（ランディングページ）を作ってみよう
ランディングページを作るのですか？ ちょっと作ってみましょうー 実装サンプル See the Pen 【CSS】Fixed background full (Responsive) by 125naroom (@125n
10
31
【CSS】レスポンシブ対応の三角形を作る
CSSで三角形を作ることは意外と簡単だったりします。では、レスポンシブな三角形ってどうでしょう？ あ、なるほど。と思ったので記事にしてみました。 うーん、『％』を使う！ ちがいまーす、『vw、vh』を使いまーす レスポン
9
26
【CSS】input、textareaのCSSを初期化する（iOS対策）
ちょっとメモですー よく忘れてしまうのでメモですー なぜ初期化？ iOS Safariではのフォーム要素（input,textarea）がデザイン通りにならないとこがあります。iOS Safariのデフォルトスタイルが優
7
6
2026
SPONSORED LINK
広告
google
LINE風の吹き出しの会話をCSSで作ってみる
CSSだけで、LINE風の吹き出しの会話を作ってみました。何かとよく使います。やはりレスポンシブにコーディングするのは難しいですね。シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。角
【CSS】olのリストで①、②、③（丸数字）を表示させる
lのリストで①、②、③（丸数字）ってできますかー できますよー サンプル①、簡単バージョン See the Pen 【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@
18
【CSS】背景（background）を2色にする
背景を2色ってできますか？ 『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー 半分、上と下 See the Pen CSSだけで、背景を2色にする、縦の半分こ
13
【CSS】吹き出しをつくる、三角の部分をちょっと曲げて素敵にする
今回は、吹き出しの三角の部分をちょっと曲げて素敵にしてみました。シンプルに三角だけなら簡単なのですが、「LINE風にしたい」というご要望がありまして。シンプルに疑似要素の「:before」「:after」を使って重ねるこ
5
30
【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）
ホバーってなんですか？ マウスオーバーともいいますねー opacity、一択だと思っていた 画像をホバー（マウスオーバー）すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった
【CSS】ローディングアニメーション実装サンプル集
ローディングアニメーション、待ち時間のあれですね。使えそうなものを随時追加してこうと思います。 ぐるぐるぐるぐるー ぐるぐるぐるぐるー サンプル See the Pen CSS3 / loading animation
4
【CSS】css-doodle を使って雨を降らせてみる
雨だー css-doodleで雨を降らしてみますねー サンプル See the Pen <css-doodle> Rain by 125naroom (@125naroom) on CodePen. css-
15
【CSS】かわいいタグをつくる
タグのデザインどんなのがいいですかー いろいろ作ってみますねー サンプル See the Pen CSS / tag by 125naroom (@125naroom) on CodePen. さいごに おー また追加し
【CSS】ホバーエフェクト実装サンプル集（画像編）
画像のホバーってできますか？ できますよー サンプル 使えそうなホバー（:hover）さん。画像編です。LP作成時に役立ちます。 See the Pen 【CSS】ホバーエフェクト実装サンプル集（画像編）- image
2
20
【CSS】IE11だけ表示崩れしたときのCSSハック
IE11だけ IE10以降 「*::-ms-backdrop, 」を外すとIE10以降に適用される。
24
【CSS】吹き出しをつくる
ふきだしー ふきだしー 吹き出し（下） See the Pen CSSだけで、ふきだしをつくる by 125naroom (@125naroom) on CodePen. HTML CSS 吹き出し（上） See the
17
【CSS】プラスとマイナスをつくる
プラスってCSSで作れますかー？ 作れますよー プラス See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen. HTML CSS マイナス See
2018
【CSS】ラインの下に三角をつくる
ラインの下に三角を作りたいのですよー おー、擬似要素で作ると簡単ですよー つくる See the Pen ラインの下に三角をつくる by 125naroom (@125naroom) on CodePen. さいごに で
25
【CSS】しましま（縞模様）をつくる
画像を使わずに、シマシマ模様を作ってみる。グラデーションを使うと簡単。いろいろな場面で使える。 サンプル 縦しましま（縦縞） See the Pen CSSだけで、しましま（縞模様）をつくる、縦しましま（縦縞） by 1
【CSS】ベンダープレフィックス 必要なもの不要なもの
ベンダープレフィックス。そろそろ必要ないかと。 ベンダープレフィックスの種類 ベンダープレフィックス不要 ※ アルファベット順※ 随時追加 ベンダープレフィックス必要 ※ アルファベット順※ 随時追加 必要か不要かを確認
【CSS】タブレット、スマホ表示の時は:hoverを不要にする
あ、:hoverが残ってる。そんなときの記述。問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。 CSS サンプル iPad Pro横向きサイズの「1367px」以上を指定。PCの画面を縮め
