【超初心者向け】スプレッドシートの効率化術と見やすい表の作り方を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デジタルハリウッドSTUDIO by LIGの運営担当の天（@10TEN10TAN10）です。 デジタルハリウッドSTUDIO by LIGとは 株式会社LIGとデジタルハリウッドが業務提携をしてはじめたクリエイター養成スクールのこと。Webデザイナーや動画クリエイターを目指す方向けのカリキュラムを展開している。現在、上野・池袋・大宮・北千住にて受講生を募集中。無料説明会は毎日開催中！ デジタルハリウッドSTUDIO by LIG（以下、デジLIG）では様々な情報をGoogleが提供する表計算アプリ、スプレッドシートで管理しています。 スプレッドシートは表計算もできるので、名簿やカリキュラム一覧の作成だけでなく、過去の数字を分析し目標数字を出すこともあれば、アンケートをもとにイベント参加率を出したりと、業務で一番触れているツールと言っても過言ではありません。 スプレッドシート
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
縦横比を無視したリサイズをしても違和感のない画像に仕上げることができる画像リサイズ用ライブラリ「Caire」
画像ファイルのリサイズはすべてのピクセルに対して均等に伸縮させるものです。このため、人物や建物が写っている画像に縦横比を無視したリサイズを行うと、被写体のバランスも崩れてしまい、違和感のある画像になってしまいます。画像リサイズ用ライブラリ「Caire」は画像内にある人物や建物などの比率を維持したままリサイズでき、違和感のない画像を作り出せます。 GitHub - esimov/caire: Content aware image resize library https://github.com/esimov/caire 「Caire」はSeam carvingアルゴリズムを使った画像リサイズ用ライブラリです。Seam carvingアルゴリズムはレスポンシブウェブデザインを採用したウェブページのように、画面サイズに応じて画像のリサイズを行うようなコンテンツにおいて、縦横比を無視したリサイ
webwatch·Webサイトの変化を感知してメール送信 MOONGIFT
ニュースメディアの速報系であったり、号外と言ったニュースにいち早く飛びつきたいという人は多いのではないでしょうか。かといって始終Webサイトを見続けている訳にはいきません。そこでコンピュータの力が使えます。 webwatchはURLを監視して指定した文字が出てくるとアラートを出すという仕組みになっています。 webwatchの使い方 webwatchのオプションです。基本的にすべて必須です。 $ webwatch --help Usage of bin/webwatch: -from address Email address to send from -password Password Password for SMTP server -smtp server Address of SMTP server to use (host:port) (default "gmail-smtp-
Amok - JavaScriptの変更をリアルタイム反映
Webブラウザのライブリロードは便利なのですが、変更する度に再読込されてしまうとそれまで入力したデータがすべて消えてしまいます。フォームの修正をするたびにデータを入力し直すのは億劫で面倒です。 最近であればJavaScript関係で編集する度にリロードして準備を整えるなんて面倒さもあります。そこで紹介したいのがAmok、JavaScriptをライブエディット可能にするソフトウェアです。 Amokの使い方 こちらはデモアプリより。最初はこのように表示されています。これらの描画はすべてJavaScriptで作られています。 ボールの色を変更。その場で書き換わります。 別なデモ。Reactで作られたフォームです ボタンのラベルを変更しました。これもリアルタイムに反映されます。 デモ動画です。 Amokは指定したファイルを監視し、その内容をリアルタイムに反映します。HTML側は指定できないようなの
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 | バニデザノート
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
【WordPress】「p」とか「br」の自動整形を無効に出来るプラグイン
プラグイン大好き、@dearwalker_yuyaです。 WordPressって自動で「p」や「br」を入れてくれるんですが親切が仇になることもあるんです。 以前紹介したこれで【閉じタグ】が無かったり【開きタグ】だけ変なとこにあったりと,おかしなエラーが出てました。 調べてみるとWordPressが自動で入れてれる「pタグ」が問題だったようです。 よし、原因はわかりました。対策しましょう！ WPプラグイン『PS Disable Auto Formatting』を入れる イメージ通りのプラグインに『PS Disable Auto Formatting』ってステキな奴があったのでこいつを入れます。 WordPressより『PS Disable Auto Formatting』でプラグイン検索で出てきます。 FTPなどでアップロードされる方はこちらからどうぞ。 ・PS Disable Auto
WordPressの管理画面のカラースキームを作成出来るプラグイン・Admin Color Schemer
WordPressの管理画面の配色は現在のWP3.8で何通りかに変更できるようになっています。このカラースキームの種類を自分で設定して増やせる、というプラグインです。 管理画面で新たなカラースキームを生成して、プロフィールで使えるようにする、みたいなやつ。 カラースキームを作れる、というWPのプラグイン。シンプルで良い感じです。 プラグインを有効化すると左メニューの「ツール」に項目が追加されます。上記のようにカラーピッカーでカラースキームを作成します。 細かい設定も可能です。 保存すると、新たにカラースキームがCustomという名前で追加されます。 Webサイトの管理者は管理画面を見る時間も長いので好みのスタイルにしておきたいところですね。ご利用は以下よりどうぞ。 Admin Color Schemer
バイク買取価格の相場は？高く売れるバイクの特徴｜知りたかったバイク断捨離アレコレ
このサイトでは、バイク買取で知っておきたい内容を取り上げます。 まず最初に、バイクの買取価格の相場の考え方を取り上げ、高く売れるバイクの特徴を考えます。 加えて、バイクの買取を依頼した場合のキャンセルの期限や、カギがないバイクの買取が可能かどうかについても記載します。 そして、バイクを買い取ってもらう場合の手順もわかりやすく説明し、さらには、まだローンを支払っているバイクを売却する場合の注意点もお伝えします。 バイク買取の相場はバイクの車種や年式などによりある程度決まっています。 一般的に、バイクの年式が新しく人気が高い車種は高値で買い取ってもらえる確率が高くなります。 そして、バイク買取を考えている人は、自分のバイクの買取相場を知っておくと買取業者に安く買いたたかれることを防ぎ、適正価格で売却するのに役立ちます。 高く売るためには、相場以外に大切な要素があります。 その一つが売却する時期
[JS]スクロールやスライド時に変化する背景に合わせてナビゲーションのテキストなどを最適なカラーにするスクリプト -BackgroundCheck
ユーザーのアクションで背景が変化するコンテンツ、例えば、複数のパネルを垂直に配置し、パネルごとに背景のカラーを変えているとか、スライダーの画像や写真に明るいカラーや暗いカラーが混在しているなど、そういった時にナビゲーションを暗いカラー、もしくは明るいカラー、どちらにしようか迷うことがありませんか？ 変化する背景のカラーに合わせて、指定したテキストやエレメントを最適なカラーに変更するスクリプトを紹介します。 BackgroundCheck BackgroundCheck -GitHub BackgroundCheckのデモ BackgroundCheckの使い方 BackgroundCheckのデモ デモは、スクリプトの基本性能、スクロール、スライドの3種類です。 Chrome, Safari, Firefoxなどモダンブラウザをはじめ、iPhone/iPadなどのiOS6/7でも動作します
[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
การถ่ายภาพและการท่องเที่ยว - RESPONSIVE
This message appears for administrator users only
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
[JS]CSSファイルに変更を加えてもリフレッシュ無しで反映させるスクリプト -CSSrefresh
CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるスクリプト（とブックマークレット）を紹介します。 CSSrefresh - automatically refresh CSS files [ad#ad-2] CSSrefreshは制作時に役立つスクリプトで、CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。 CSSrefreshの使い方 使い方は簡単で、2通りあります。 CSSrefreshをインクルードする 使用するページにCSSrefreshを外部スクリプトとして記述します。 <head> <link rel="stylesheet" type="text/css" href="css/site.css" /> <script type="text/javascript" src="js/cssrefresh.js"></sc
jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える
jQueryを使ってテーブルのセルに入力 された数字のデータをカラーでグルー ピングできるようにする方法です。 プラグインは不要で簡単なコードで実現 できます。大量のデータがあるときは 使ってみては。 個人的にはあまり使う機会ありませんけど。大量の数字が入力されたテーブルほど見にくいものはありませんのでイザという時のためにメモ。 jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える方法。数字のみが入力されたテーブルの可視性を、色の濃度でグルーピングして可視性を高めます。 Sample こんな感じでグルーピング出来ました。濃い色ほど数字が大きいです。普通にマークアップすれば勝手に色が変るので管理が楽じゃないかなと。 コード$(document).ready(function() { // 配列内の最大値を取得する関数 Array.max = function(arra
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック
ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像からカラーを取得して背景に適用するjQueryのプラグイン。
IDEA * IDEA
