-
CSS
CSSで作るボックスデザイン
素敵なデザインのボックスに出会ったので記事にしてみました 下のイメージのようなボックスをコーディングしました。 See the Pen Untitled by shimpei (@shimpei) on CodePen. […] -
CSS
ミックスブレンドモード早見表【XDデザイン → CSS】
ミックスブレンドモードの指定をXDデザインから、CSSに変換するのに毎回調べてるな。使いやすい一覧表ほしいな。 しんぺー XD to CSSの一覧を作成しました。一応CSS反映時のサンプルも用意しているので、ブレンドの結 […] -
CSS
ホバー時のみ表示させたい要素が、意図せず再表示になる問題。pointer-event: none;で解消されます。
ヘッダーナビをホバーした時に、子メニューが表示されるようにしたけど動き変。マウスアウトして非表示にした後、要素があった箇所にマウスを移動させるとまた表示される！なんで？？opacity: 0;、visibility: h […] -
CSS
CSSだけで円グラフ・ドーナツグラフを作成する
円グラフってCSSで作れないよね？Chart.js使うのも大層だし画像で書き出すか。 しんぺー conic-gradientで簡単につくれますよ〜 完成形のイメージ こんな感じです。CSSで割と簡単に作れますよ。 See […] -
CSS
SNSリストのテンプレート
SNSのアイコンのリストって毎回作ってるけど、そろそろテンプレほしいな。使いまわしやすくて、ホバーアクションもいい感じにしたい。 しんぺー よくあるSNSアイコンリストのテンプレを共有しますね。ホバーアクションはFont […] -
CSS
番号付きリストが「010」になるのを「10」にするCSSは「decimal-leading-zero」です。
完成形のイメージ See the Pen 番号付きリスト01~10 by shimpei (@shimpei) on CodePen. HTML 適当にリストを作ります。クラス名はnum-listにしました。 SCSS […] -
CSS
【コピペOK】blockquote要素の作り方HTML&CSS｜引用文
はぁーまたqlockquoteか〜ちょっと面倒なんだよなぁどうやってつくるんだっけ？ よくある感じのHTMLとCSSのテンプレ置いときますね〜 完成形のイメージ See the Pen Untitled by shimp […] -
CSS
スクロールバー非表示は、-webkit-scrollbarをdisplay: none;にします。
スクロールバーを非表示にした人 スクロールする前から、ずっとスクロールバーが表示さていて嫌だな。消したいけど、どうやったらいいんだ？ WebKitエンジンを使用しているブラウザであれば、-webkit-scrollbar […] -
CSS
【コピペOK】自動でPDFのアイコンがつくボタン（Excelファイルや、Wordファイルも）
自動でPDFファイルのアイコンがつくボタン PDFファイルのアイコンがつくボタンは毎回クラス付けたり面倒だな。自動でついてくれないかな。 hrefの中の拡張子を認識して、自動でアイコンがつくようなCSSを共有しますね。以 […] -
CSS
3,7,11,15を指定するCSSは？ nth-child(4n+3)です。
3番目、7番目、11番目の要素にスタイルを当てたい人 3、7、11番目の要素にスタイルを当てたいから〜えーっとnth-childで〜 どうやるんだっけ？ しんぺー ぼくも「え？どうやるんだ？」と悩んだので、メモに残してお […]
