社内で使うスライドテンプレをMarpで作ってみた
こんにちは。秋になり、いつにも増して食欲が止まらないマーケのさやかです。 みなさん「Marp」ってご存知ですか？私は今回のタスクが現れるまで知りませんでした。haha 今回は、Marpを使って会社独自のスライドテンプレートを作成しましたので一連の流れをご紹介します！ Marpってなんぞや？ Marpをざっくり説明すると、マークダウンでスライドを作成するツールです。 Notionにメモ程度に書いたマークダウンを急遽スライドにする必要がある！なんてときに便利ですね。 また、マークダウンでスライドを作成するので、gitで管理できるのも大きな魅力です。 （詳しくは公式サイトをご覧ください https://marpit.marp.app/） Marpにはデフォルトで3種類のテーマが用意されており、スライドを作成するだけであれば簡単に始めることが可能です。 Marpの使い方 VS CodeにMarp
知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
テキスト比較ツール「difff（デュフフ）」、web上で簡単に差分がわかる。 | WordPressやWebデザインなど紹介 Ocadweb
CSS、HTMLなどの修正をした場合に、前回との比較をして何が修正されたのか確認するケースがあります。 Subversionなどでバージョン管理をしている場合はSubversionの機能で差分を確認することができますが、使い勝手や見やすさという点では物足りない機能です。 そこで今回はWeb上で簡単にテキストの差分比較ができるdifffの使い方をご紹介します。 difff difffの使い方 左と右の欄に比較したいテキストの文章を入力、またはコピー＆ペーストします。 「比較する」ボタンをクリックすると差分がマーカーのような色付きで表示されます。色を変えたい場合は、「カラー１」「カラー２」「モノクロ」を選択して変更することができます。文字数、空白行、改行数、単語数もわかります。 印刷用のページとして、不要な画面の表示部分を表示せずに比較した差分の結果のみ表示したい場合は「結果のみ表示（印刷用）
【オリジナル制作】Photoshopでの作業を効率化できるいい感じのJSXスクリプト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。「とりあえずタイトルに興味を持ったけどいまいちピンとこなかった」という方もいるのではないでしょうか。 ずばり、Photoshopのスクリプト機能を利用して、表題の作業を自動的に処理させるということです。僕みたいな怠け者で楽をしたい人にはぴったり！ 今回主に紹介したいのは自作のスクリプトで、Webに特化した作業を簡単にしてくれます。 ダウンロードはこちら（ダウンロードが開始されます）： https://liginc.co.jp/demo/2012/09/PhotoshopScripts.zip スクリプトを使うには？ まずはスクリプトの使い方について説明していきます。 スクリプトをダウンロードし解凍したら、拡張子が「jsx」のファイルが幾つか入っていると思います。それらを下記のフォルダにコピーし、PCを再起動させます。 Windows：PhotoshopPre
Bootstrap Studio
Presenting Bootstrap Studio, a revolutionary tool that developers and designers use to create beautiful interfaces using the Bootstrap Framework. Learn more What is it? Bootstrap Studio is a desktop application which you can use to build beautiful interfaces and websites by only using drag & drop. It comes with a large collection of components like charts, maps, data tables, forms, menus, lists,
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール