WordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSS・「WebCrumbs」
WebCrumbs WebCrumbsはWordPressを使う感覚でReact製のWebサイトやアプリを運用できるOSSです。プロジェクトを「ReactのためのWordPress」と位置付けており、Reactアプリの為の業界標準ソリューションを目指しているそうです。 WPライク、というようにReactベースのWebサイトを直感的な管理画面で簡単に作成、管理、拡張する事が可能との事。コーディング不要の管理画面でWebサイトの様々な面を管理・制御、プラグインで機能拡張、特定のニーズに合わせたフルカスタマイズも可能となっており、完全オープンソースで提供されています。 もちろん他言語対応で既に30か国以上の方のコミュニティへの参加があるようですが、日本はまだ未参加のようなので、ご興味ある方はぜひご覧になってみては如何でしょうか。ライセンスはMITです。 WebCrumbs
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
ボックスの高さを一番高いものに合わせる
Result jQueryvar maxHeight = 0; //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる $("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); //divの高さを取得する $("div").height(maxHeight);cssdiv{ height:auto; width: 70px ; background:#eee; margin:3px; float:left; }html<div>1<br />2<br />3<br />4<br />5</div> <div>div</div> <div>div</div> <div>div</div> <div></div> <div>1<br
CSSだけで、長いテキストを一部隠してボタンクリックで全文表示
Result たまに見かけるコンテンツの表示/非表示のトグルです css.expand {/*全体*/ width: 300px; padding:15px 10px; max-height: 80px; overflow: hidden; position: relative; border-bottom: 1px solid #aaa; transition: .5s; } .expand::before {/*グラデーション部分*/ content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; transition: 1s; }
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で緑、上に戻す時は青と変化するように設定しました。ライセンスですが、一通り動作確認したあと確認しようとしたらユニコーン出てて見れませんでしたので後で確認します。 scrollClass
tableで任意の行にマウスホバーしたら他の行をblurさせる
Result マウスホバーしてるところ以外をぼかしてホバー中のコンテナをハイライトする、みたいなの。 この手の手法とコードはほぼ同じです。 csstable {/*table全体*/ background: #f5f5f5; border-collapse: separate; font-size: 12px; line-height: 24px; margin: 30px auto; text-align: left; } th { background: #444; color: #fff; font-weight: bold; padding: 10px 15px; position: relative; } td { border-bottom: 1px solid #e8e8e8; padding: 10px 15px; position: relative; transitio
複数inputに入力された数字の合計を表示する
Result jQuery$("#myTable").on('input', '.txtCal', function () { var calculated_total_sum = 0; $("#myTable .txtCal").each(function () { var get_textbox_value = $(this).val(); if ($.isNumeric(get_textbox_value)) { calculated_total_sum += parseFloat(get_textbox_value); } }); $("#total_sum_value").html(calculated_total_sum); });複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html<table id="myTabl
インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」
Lite Editorはインライン要素に特化したオープンソース国産WYSIWYGエディタです。国産CMSとして名高いa-blog cmsを提供するappleple社さんの開発されたエディタで、a-blog cmsのようなブロックタイプのCMS向けに作られたそう。従来のWYSIWYGエディタでは意図しないスタイルになってしまう事も多く、異なる記事編集者間でテイストも異なってしまう問題もありますが、インライン要素のタグ挿入に特化させる事でそういった編集者間の差異を無くすのが目的のようです。これは良いですね。使い方も日本語で詳しく書かれています。ライセンスはMITとの事です。 Lite Editor on Githubインライン用のWYSIWYGエディターLite Editorをリリースしました。
ウェブアクセシビリティを重視した使いやすいモーダルウィンドウ・「Modaal」
Modaalはウェブアクセシビリティを重視した使いやすいモーダルウィンドウです。WCAG 2.0の達成基準レベルAAをクリアしているそうで、全ての人にとってアクセスブルであると謳っています。jQuery依存っぽいのでこの時点ではい解散って方もいるかもしれませんが。 設定は基本的にカスタムデータ属性を利用して実装します。HTML(iframe)や動画、画像、複数画像によりイメージギャラリー、Confirmationなどの確認ダイアログ、Instagramなどもサポートされています。使った感じクセもなく個人的には良さげな印象でした。ライセンスはMIT。 Modaal いつもご覧頂きありがとうございます。 どうぞよいクリスマスをお過ごしください。
レスポンシブWebデザイン対応のメガメニュー
Result ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィンドウサイズ943px以上でデスクトップ向けに切り替わるように設定されています。非常にシンプルなコードですが代わりにCSSがやや複雑かもしれません jQuery$(document).ready(function () { "use strict"; //子のulを持ったliをチェックしてトグルアイコンの為のclass付与 $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon'); $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); //ウィンドウサイズをチェックしてスマフォ用と
WordPressのウィジェットを自作するためのTips
WordPressに標準装備されているウィジェットで、自作のウィジェットを作成してみよう、という内容です。便利な機能で、クライアントワークでは割と必須ですけどあまり情報がない印象だったので復習をかねて書いてみました。 WPのウィジェットに追加できるアイテムボックスを自作する、という方法です。基本的な事しか書いてません。なので、WordPressテーマ開発のビギナーさん向けになります。 ウィジェットをテーマで使えるようにするまずはおさらい。利用しているテーマでウィジェットを使えるようにするには、その為のコードを書く必要があります。 何もしていない状態ですと、上記のようにウィジェットページには注意文しか表示されません。 まずは利用可能にする利用するためには以下のようなコードを利用中のテーマファイル内にあるfunctions.phpに書きます。 if ( function_exists('reg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトで未使用のCSSセレクタを教えてくれるツール・「Unused CSS」
MarkdownもサポートのOSSな同期機能付きノートアプリ・「Joplin」
WYSIWYGモードも備わったOSSのライブプレビュー機能付きMarkdownエディタ・「TOAST UI Editor」
成功したスタートアップのプロジェクト立ち上げ当時のプロモーションビデオを収集している・「Startup Demo Videos」
Githubでファイルのアイコンを分かりやすく変更するブラウザ拡張・「GitHub File Icon」
CSS Gridを使ったWebサイトのギャラリーサイト・「Grid Examples」
オープンソースのファイルアップローダー・「Uppy」
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」
