Fullpagescreencapture.comはURLを指定すると、そのWebページの全体のスクショを撮ってくれるWebアプリです 普通に撮るだけならDevtoolsでいいんですけどこちらはURLを発行してくれるのでこれはこれで便利かなぁと思います 結構綺麗に撮れるし、日本語サイトでも問題なく使えます。ユーザー登録は不要、広告もありません Fullpagescreencapture.com
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: #
roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです 実装方法も手軽で簡単、CSVにも対応しています 動作テスト 動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう <script src="https://unpkg.com/rough-viz@1.0.4"></script>↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね new roughViz.BarH( { element: '#vis0', title: "SNS foo bar", titleFontSize: '1.5rem',
Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています csstable { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; margin: 0; padding: 10px; position: relative; } th { background-color: #fff; } td:hover::before { background-color: red; content: ""; height: 100%; left: -5000px; position: absolute; top: 0
Secure Calendarはデータを暗号化してセキュアに保管するカレンダーアプリです 暗号化にはBlockstackが使われていますのでBlockstackのアカウントでログインして自分自身でデータを保管する流れになります UIも分かりやすく使いやすい印象でした。脱Googleを検討されているなら選択候補としてありなんじゃないかなぁと思います。他アプリの連携に受かっているなら難しいですが。 使ってみた 使ってみました。Blockstackを使ったアプリは多くはUIが微妙な事が結構多いんですが、こちらはかなり完成された印象でした。 見やすいし使いやすい。従来のカレンダーアプリと同じ感覚で使えるので直感で操作できました。 一応Githubでソースコードが公開されていますがライセンスや説明の明記はありませんので気になる方は開発者にお問い合わせください Secure CalendarOn Gi
Result 以前書いたものとは別で、こちらは任意の場所で区切りたいケースの時に。 もっとシンプルな方法で非表示部分が要素に依存しています 多くの場合は動的なコンテンツに対応する必要があるので以前書いた方法で事足りそうです css.read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .15s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before {
Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのとかを作れる、というもの 僕の語彙力がアレなので見てもらった方が早いですね サンプル Naker.Backで作ったサンプルです。用意されたマテリアルを使い、設定は何も考えず作ったもので2分もかかっていません 使い方は吐き出されたコードに指定したidの要素で包括するだけです。例えば上のデモなら、作成時にtestというIDを指定したのでid=”test”という要素の中にコードをコピペすれば表示されます マテリアルは任意のものを使う事も出来ます。設定は動く方向や背景色、グラデーションも可能、マテリアルの数や動作スピードなどの設定が可能です 難点は吐き出されるコードがNaker.BackのCDNを
SingleFileZは任意のWebページの表示やコンテンツを1つのファイルだけで保存する魚拓ライクなChromeエクステンションです。当ブログでもテストしましたが日本語でも問題なく、完璧に保存できました。 OSSとしてもソースコードが公開されています。先発のSingleFileのフォークだそうで改良されて改めてOSSとして公開されています。 永久保存の保障が無いWebサイトを保存したい事もあると思います。Webサービスの魚拓やアーカイブサービスが良く使われますが、やはり保証はないのでこのようにダウンロードできるツールの選択肢もあると良いかもしれませんね。 注意点 ダウンロードしたファイルの扱いに関する注意点はここでは割愛しますが、本エクステンションを使う際の注意点が一つだけ。 上図のように、セッティング項目の「ファイルの URL へのアクセスを許可する」をONにしておかないと閲覧できませ
Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数要素を同時に制御、アニメーションエフェクトを手軽に付与できるプリセットなどを特徴としています アイデアと応用次第で高度なアニメーションコンテンツを実装する事が可能です サンプル このような高度なアニメーション(だと僕は思いましたが感覚は個人差あると思います)の実装をサポートしてくれます <script src="http://daybrush.com/scenejs/release/latest/dist/scene.js"></script>CDNも用意されています。ちょっと学習コストは高いですが、覚えればいろいろなアニメーションコンテンツが作れそうです 開発者は本家NAVERのフ
Result 子要素が特定の数の場合のみスタイリングする的なやつ。上記の例は5個以上7個以内の場合のみ適応させる例です 動的なコンテンツで使える日が来るかもと思ったので備忘録 リスト以外でも勿論大丈夫です cssnth-last-childと間接セレクタを使います ul li:nth-last-child(n+5):nth-last-child(-n+7):first-child, ul li:nth-last-child(n+5):nth-last-child(-n+7):first-child ~ li { background-color: orange; }:nth-last-child(n+5)と:nth-last-child(n+5) ~ liで5個以上ある場合は全子要素に適応 値にマイナスを使い、:nth-last-child(-n+7)と:nth-last-child(-n
Result フローチャート式のサイトマップというか、サイトマップにフローチャートを利用しただけです 横向きのフローチャートと同様に疑似要素で罫線を作って繋いでいきます ある程度少なめのコードでリストの数が増えたりモニタサイズが異なっても対応できるので汎用的な印象です 内容としては今更感満載のネタですが必要になった機会があったのでおさらい css.tree, .tree ul, .tree li { list-style: none; margin: 0; padding: 0; position: relative; } .tree { margin: 0 0 1em; text-align: center; } .tree, .tree ul { display: table; } .tree ul { width: 100%; } .tree li { display: table-
Shadeは予算に苦しむスタートアップ企業向けに無償提供されたLPテンプレートです。クレジット表記も歓迎はするけど必須ではないそうです。(この旨は同梱されているライセンスファイルに記載されています) 用意されたテンプレートはモバイルアプリ用、SaaSアプリケーション用など4種類で、来月、10月に新たに1つずつ追加される予定だそうです。 概ね完成されたタイプのテンプレートで、画像やテキストを変更して利用する形となります。とりあえずWebページも含め、形としてローンチしたい、という方には良さそうです。 手順 DLする場合は決済サービスのPaddleを通すようです。Download nowをクリックすると上記のようにポップアップするので指示に従って進めればメールアドレスにDL用のリンクを含んだメールが送られてきます。 メールマガジンの登録を薦められますが購読せずとも問題ありません。何かしらのサー
Result ヒーローイメージに目が疲れない程度のアニメーションフレームを用意して注視を促し、訴求力向上を期待する的なやつ。向上するかは分かりません ユーザーにストレスないものが望ましいという事で癒されそうな波をSVGとCSSだけで表現するサンプルです まぁこれでもストレス感じる人がいないわけではないでしょうけども。 css.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration:
Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です cssblockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } blockquote:before { content: '❝'; float: left; font-size: 200%; margin-left: -20px; } blockquote:after { content: "引用元:【"attr(cite)"】"; display: block; text-align: rig
Namecheap Logo Makerはブラウザでロゴを自動生成してくれるWebアプリです。 星の数ほど同じ用途のツールはありますが、本アプリが違う点はユーザー登録不要、クレジットも不要、完全無料で利用可能で、DLしたロゴに広告表示なども無く、商用利用可能である所です。勿論クレジットカードの登録などもありません。 今までは作成してもDLする前に何かしら条件がありましたが、こちらはまったく求められません。 使い方 ↑ 適当に作ってみました。DLしたzipの中には3つのpngファイルと7種のSVGの他、フォントは何を利用したか等の資料ファイルが同梱されています。 任意の名前(企業名やサービス名)、業種、気に入ったフォントやアイコンを複数選択、スローガンや好みのカラーを設定すると自動でロゴを作成してくれます。 気に入ったロゴを選んでダウンロードすればOK。DL前にWebサイトや名刺、Tシャツな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く