顔や服、髪型、色や表情など様々なパーツをランダムに組み合わせた人物イラストを生成し、Webサイトやアプリ等に使用できるOSS・「Big Heads」
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script>Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", animat
なるべく少ないコードでレスポンシブなtable
Result ※内容は最新の方法的なものではなく以前からよく使われている方法です 個人的に毎回悩むtableのRWD対応ですが、やはり少ないコードで実装できるのが理想だと思うのでいろいろ記事を参考にしながら再考してみました なるべく少ないコードでレスポンシブなtable、というタイトルではありますが、そもそもtableの内容によって最適解は異なるので答えを出すのは難しそうですね csstable { border-collapse: collapse; text-align: left; width: 100%; } table tr { border-bottom: 1px solid } table th, table td { padding: 10px 20px; } table td:before {/*モバイル用の見出し。PC向けでは非表示にする*/ background: #
CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」
debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。 オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。 コードvar selector = document.querySelectorAll("*");セレクタはデフォルトでは全部指定されています else if (typeof options.selector === "undefined") { var selector = document.querySelectorAll(`*:not(${options.not}) > *`); }オプション設定されたときは:notを付けて対象外にする function randomCol
正規表現をクロスワード方式で遊びながら学べる・「Regex Crossword」
Regex Crosswordは正規表現をクロスワード方式で遊びながら学べるWebアプリです。最近目にしないけどゲーミフィケーションってやつでしょうか。 クロスワードといって日本でよく見る、文字数制限があったり黒塗りがあるわけではなく、縦軸と横軸の正規表現で一致する文字を入力するクイズみたいな感じ 入力項目が多くなるにつれてキーワードが完成出来るようになっていきますがチュートリアル段階では文字入力のみで言葉を作る感じではないです。 だいぶ知名度は高いアプリみたいですが僕は初見でした。勉強にもなるし楽しいですね。ログインをして結果を残す事も出来るみたいです。気晴らしに如何でしょうか。 Regex Crossword
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
ランディングページを簡単に構築出来るLP作成ツール・「Flauntly」
FlauntlyはLPを簡単に作成出来るLP作成ツールです。D&Dとテキスト入力等の簡単な操作で完了、コーディングスキルは不要です。沢山のコンポーネントを組み合わせてLPを完成させる事ができます。よくあるツールですが、こちらもなかなか良い精度という印象でした。無料プランもあるのでお試しになられては如何でしょうか。 Flauntly
水の波紋っぽいエフェクト
Result 水上で起こる波紋のようなエフェクトです csshtml, body {/*bodyの背景を波紋の色に合わせる*/ margin: 0; background: #45c2c5; } .ripple, .ripple:before, .ripple:after {/*疑似要素も作り、3つの波紋を作る*/ display: block; border-radius: 2px; width: 2px; height: 2px; animation: rip 6s infinite ease-out; } .ripple { position: absolute; z-index: -1; top: 40px; left: 15px; } .ripple:before, .ripple:after { content: ""; position: absolute; } .rippl
CSSのみで手軽に実装出来るモーダルウィンドウライブラリ・「Light Modal」
Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニメーションエフェクトを追加する事ができます。楽でいいのではないでしょうか。ライセンスはMIT。 Light Modal
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アートライクな背景パターンを配布する・「Paaatterns」
デザイナーやエンジニアなどの自宅作業のデスクを見せあうギャラリー・「WFH Club」
多種多様なCSSローダー集
URLを入力すると、そのWebページの全体スクリーンショットを撮ってくれる・「Fullpagescreencapture.com」
顔のパーツを組み合わせてオリジナルの絵文字を作成できる・「Emoji Builder」 | かちびと.net
Webサイトで未使用のCSSセレクタを教えてくれるツール・「Unused CSS」
オープンソースの国旗アイコン集・「FlagKit」
シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
CSSとテキストで作るローディングアニメーション・「Animated Type Loader」
フレキシブルでパワフルなRWD対応のSCSS/CSSフレームワーク・「BLACKHOLE」
