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", anima
Result ※内容は最新の方法的なものではなく以前からよく使われている方法です 個人的に毎回悩むtableのRWD対応ですが、やはり少ないコードで実装できるのが理想だと思うのでいろいろ記事を参考にしながら再考してみました なるべく少ないコードでレスポンシブなtable、というタイトルではありますが、そもそもtableの内容によって最適解は異なるので答えを出すのは難しそうですね css table { 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:
debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを引くだけです。色はランダムです。 オプションで指定した要素を対象外にする事が出来ます。まぁこれだけなんですが。 コード var selector = document.querySelectorAll("*"); セレクタはデフォルトでは全部指定されています else if (typeof options.selector === "undefined") { var selector = document.querySelectorAll(`*:not(${options.not}) > *`); } オプション設定されたときは:notを付けて対象外にする function random
Regex Crosswordは正規表現をクロスワード方式で遊びながら学べるWebアプリです。最近目にしないけどゲーミフィケーションってやつでしょうか。 クロスワードといって日本でよく見る、文字数制限があったり黒塗りがあるわけではなく、縦軸と横軸の正規表現で一致する文字を入力するクイズみたいな感じ 入力項目が多くなるにつれてキーワードが完成出来るようになっていきますがチュートリアル段階では文字入力のみで言葉を作る感じではないです。 だいぶ知名度は高いアプリみたいですが僕は初見でした。勉強にもなるし楽しいですね。ログインをして結果を残す事も出来るみたいです。気晴らしに如何でしょうか。 Regex Crossword
使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には楽に作れます。 プロパティがよくわからなくても大丈夫、選択肢を選べば即反映されますので実装したいとイメージしているレイアウトになる選択肢を選ぶだけです。勉強にもなるし、分かっている方でも楽じゃないかなぁと思います。 本アプリはOSSとしてソースコードが公開されています。ライセンスはMITとの事です。ただ、贅沢言えばもう少しググラビリティに配慮した名前にして欲しいです・・ FlexOn Github
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
Light ModalはCSSのみで実装できるモーダルウィンドウライブラリです。エフェクトを追加する場合もJavaScriptを使用せず、Animate.cssを読み込み、任意のclassを付与する事でアニメーションエフェクトを追加する事ができます。楽でいいのではないでしょうか。ライセンスはMIT。 Light Modal
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く