Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ
10km40分切りが2020年の目標、メドピア長距離部の小宮山です。 みなさんTailwind CSSはご存知でしょうか。tailwindとは「追い風」を意味します。最高に気持ちよく走れるコンディションですね。 目次 サービス概要 技術概要 Tailwind CSSとは何か HTMLとCSS HTMLとCSSとコンポーネント コンポーネントと雑なセレクタ コンポーネントとインラインスタイル Tailwind CSSがもたらしたもの まとめ サービス概要 まずは今回新たに立ち上げたサービスの紹介です。 「MedPeerスポット×リクルートメディカルキャリア」という医師向けスポット求人マッチングサービス（以下、本サービス）が11月にリリースされました。 medpeer.co.jp ログインや応募などサービスのコアな部分はMedPeer医師会員限定になってしまいますが、サイトの雰囲気自体は非会員
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
画像からHTMLを生成する深層学習とは？AIがwebサイト自動コーディング。 | Ledge.ai
サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
404
File Not Found アクセスしようとしたページは 見つかりませんでした。 以下のような原因が考えられます。 記事が削除された URLが間違っている
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
フロントエンド開発の概要について
ここでは、フロントエンド開発の概要について説明していきます。 ＊元記事はこちらです。(英語) この記事でカバーしているものについてSingle-page Apps (SPAs)New-age JavaScriptUser InterfaceState ManagementCoding with StyleTestingLinting JavaScriptLinting CSSTypesBuild SystemPackage ManagementContinuous IntegrationHostingDeploymentSingle-page Apps (SPAs)かつてはサーバーサイドレンダリングという、別のURLを開くごとにページをリフレッシュしてサーバーから新たなHTMLページを送る手法が主流でしたが、最近のSPAsではクライアントサイドレンダリングというものが主流になっています。
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
むずかしくないJavaScriptのやさしい話 デモチュートリアル このチュートリアルは、#ndsmeetup8 で発表した内容のデモの手順をまとめたものです。 jQueryをscriptタグ挿入で使っているような開発者向けの内容です。 npmとwebpackでビルドをするという使い方の提案です。 発表内容はこちら。 http://www.slideshare.net/fbcivic/javascript-ndsmeetup8 ※発表当時はwebpack1についての記事でしたが、webpack1→webpack2→webpack3→webpack4と記事を更新しています。 webpack3までの古い解説はこちら （基本的なことなのでほとんど変わりませんが、webpack4でwebpack-cliが必要になったり設定ファイルの記述が変わりました） 事前準備 nodejsをインストールしてくだ
FreeFrontend
Welcome to our collection of CSS modal windows! In this curated compilation, we have gathered a diverse range of HTML and CSS modal window code examples sourced from reputable platforms such as CodePen, GitHub, and other valuable resources. With our April 2023 update, we are excited to present six new additions to our collection, ensuring that you have access to the latest and most innovative moda
DOMPurify - XSSの防止に。HTMLをクリーンに変換 MOONGIFT
CGM（コンシューマジェネレートメディア）の大きな問題はユーザの投稿した文字がセキュリティ上問題があるかどうかチェックしなければならないことでしょう。特にHTMLを許容して投稿できる場合です。 テキストだけにしてしまえば問題はありませんが、問題のないHTMLコードは扱いたい、そう考える方にお勧めなライブラリがDOMPurifyです。 DOMPurifyのデモ。問題のある箇所を取り除いてくれます。 DOMPurifyの使い方 まずスクリプトを読み込みます。 <script type="text/javascript" src="purify.js"></script> 後は表示する際に DOMPurify.sanitize を通します。 var clean = DOMPurify.sanitize(dirty); これで奇麗なHTMLコードになるといった具合です。DOMPurifyの特徴とし
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
Webix を使ってみた - Qiita
はじめに HTML＋JavaScript でアプリ開発するにあたって、UI ライブラリをどうするか悩みました。独自に CSS＋JavaScript で書ければいいのですが、無理なので既存のライブラリを使うことにします。jQuery UI や jQuery Mobile に始まり、Twitter Bootstrap 、Adobe Topcoat 、Intel App Framework など試しました。モバイルアプリは Onsen UI がよさそうです。デスクトップアプリは Titanium 、Sencha Ext JS 、Kendo UI など見てみました。その上で Webix が気に入りました。 参考 サクサク書けて柔軟なカスタマイズが可能な、UIフレームワーク「Webix」 | #GUNMAGISGEEK Webix とは Webix は、クロスブラウザの（主要ウェブブラウザで動作する
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
2016年を振り返って、 HTML, CSS, JavaScript の書き方を変えたところ
2016年のブラウザ事情の進展に伴い、実務で HTML, CSS, JavaScript の書き方が変化した部分を列挙してみます。あくまで代表的なもののみです。 ブラウザのサポートバージョン変化環境面の変化まとめ ブラウザのサポートバージョン変化§ IE 8 サポート終了§ 2016年1月に IE 8 のサポートが終了しました。 html5shiv.js の読み込みが不要になったSVGが（PNGによる代替画像を用意することなく）使えるようになったvideo要素、audio要素が使えるようになった::before, ::after 擬似要素をダブルコロンで書けるようになった:not 擬似クラスが使えるようになり、例えば一行テキストエリアのセレクターが input:not([type]), input[type="text"] で正確に表せるようになったaddEventListener(),
正規表現 - 文字列内から HTML タグを正確に判別！ - mk-mode BLOG
1. テストパターン１（不正確なパターン） <.*?> . は、改行を除く任意の１文字。 * は、直前の表現の０回以上の繰り返しだが、 *? とすることでさらに最短一致。 よって、 < と最初の > で囲まれた任意の０文字以上の文字列のこと。 2. テストパターン２（不正確なパターン） <\/?[^>]*> \/ は、 / 文字そのもの。 / だけだと別の意味なるのでエスケープしている。 ? は、 直前の正規表現の 0 または 1 回の繰り返し。 [ ] は、文字クラス指定。 [ ] 内に列挙したいずれかの１文字。 ^ は、 [ ] 内の先頭にあれば、 [ ] 内に列挙されている指定文字以外の１文字。 * は、直前の表現の０回以上の繰り返し。 よって、< と > で囲まれ、 < の次に / が０個か１個で、残りが > 以外の文字列のこと。 言い換えれば、「テストパターン１」の <.*?>
html-pdf
node-html-pdf HTML to PDF converter that uses phantomjs Example Business Card -> and its Source file Example Receipt Changelog Have a look at the releases page: https://github.com/marcbachmann/node-html-pdf/releases Installation Install the html-pdf utility via npm: $ npm install -g html-pdf Command-line example $ html-pdf test/businesscard.html businesscard.pdf Code example var fs = require('fs')
「table」って実はここまでできるんです！jQuery tableプラグイン12選｜SeleQt【セレキュト】
＜table＞はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ（HTMLメールを除いて）、現在tableを使うのは、表データを見せるために使うときくらいでしょう。 HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか？ この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。 jQueryで動くtableプラグイン12選 Dynatable Dynatableはフィルター、分類、ページ付けなどの機能をも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript UI デザイン ソフトウェアおよびユーザー インターフェイス コンポーネント |インフラジスティックス