Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be
Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = l
Editor.jsはブロックスタイルのリッチテキストエディタです。個人的に身近なもので言うとWordPressのGutenbergなんですが、WP使わない方だとピンとこない説明かもですね。ごめんなさい。画像やテキスト、見出しなどのブロック毎に編集、上下の位置を変えられるという特徴があり、テキストの編集はMediumのエディタのようにテキストを選択する事でツールバーが表示されるようになっています。Editor.jsの基本機能はシンプルなものですが、もともと拡張前提の設計となっており、プラグインによる機能追加をする事でエディタとして完成させていく流れとなっています。なので、不要な機能は加わらず、ユーザーにとっては軽量で分かりやすいエディタを提供できる事に繋がります。 ちょっと話はそれるのですが、Editor.jsはシンプルで分かりやすいですが、個人的にはGutenbergによってブロックスタイ
物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニメーションさせるサンプルです。物理エンジンに沿った動きをするのでランダム性があります。なんとなく目にも優しい印象ですね。Matter.jsの存在を知らなかったので備忘録として。 Floaty Bubbles
Result 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます css.text-checkbox { display: block; } .text-checkbox input { display: none; } .text-checkbox span { font-family: monospace; } .text-checkbox .checked { display: none; } .text-checkbox :checked ~ .checked { display: inline-block; } .text-checkbox :checked ~ .unchecked { display: none; }html<label class="text-checkbox"> <input type="checkbox" name="one"> <
Result 過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。 column-countも併用すればカラム数の指定も出来ますね。 cssarticle {/*CSSカラムのセッティング*/ column-width: 7em; column-gap: 1em; } section {/*各ボックスのスタイル*/ display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; }html<article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lor
Kissui.scrollanimはスクロールに応じて要素をアニメーションしながら表示させるためのライブラリです。オシャレ感ただようWebページに大抵あるあのエフェクトを手軽に付与しよう、というもの。個人的にはどこもかしこも導入していてそろそろ食傷気味ですが、いまだクライアントさんから指示頂いたりと需要があるようですのでメモ。エフェクトは概ねCSS3のkeyframesで行われていて、ライブラリはその導入サポートをするためのものになります。要素が表示されたらカスタムデータ属性で指定されたエフェクト名に必要なclassを付与、動作終了したら削除する、という感じみたいです。エフェクトの追加やinfinite化も可能みたいですが、基本的にはCSSメインなのでJavaScript自体は軽量で済むようです。ライセンスはMIT。 Kissui.scrollanim
howler.jsは非依存型のバニラなJavaScriptオーディオライブラリです。クロスプラットフォームで動作、多様なコーデックのサポート、オーディオのスプライトとコントロール、オートキャッシュによるパフォーマンスの向上などが主な特徴との事。軽量で扱いやすそうです。ライセンスはMIT。ドキュメントはGithubでご確認下さい。 howler.jsOn Github
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く